jquery select2 多选 submit、jquery多选搜索框 收藏 0

如何利用JQuery封装一个自定义通用JS操作方便在其他项目中使用？

想要利用JQuery封装一个通用的JS操作，提供给其他项目使用，首先需要明确的就是我们需要通过JQuery的封装来完成什么操作，并且这些操作必须是能够在多个项目中进行复用的操作。例如比较常见的操作有：Ajax请求封装、表单的处理、DOM操作、动画效果支持、通用事件的处理、对于数据的校验等操作。

有了这些操作之后，接下来我们就来看看如何对这些操作进行封装。

想要实现JQuery的封装，首先我们先来了解一个概念，就是匿名函数（IIFE, Immediately Invoked Function Expression），通过匿名函数（IIFE, Immediately Invoked Function Expression）来封装代码，可以避免与全局变量产生冲突，并且可以控制模块的作用域，而且在JQuery中内部本身也是通过这种方式来进行实现的，如下所示。

我们可以将$符作为参数传递给函数，然后就确保代码内部使用的$都是只想JQuery的，即使在外部调用了其他的库，重写了$符也还是一样的效果。

了解了匿名函数操作之后，接下来我们就来通过几个小例子来展示如何实现JQuery的封装。这里我们首先来演示一下封装一个Ajax请求。

封装AJAX请求

封装表单验证

当然除了对Ajax的封装之外，我们还可以创建对表单验证的封装，方便在其他项目中对表单验证操作的进行复用。

使用方式

封装常用动画

这里我们演示一个滑动显示与隐藏动画的操作，如下所示。

使用方法

当然除了对我们特定功能的扩展封装之外，我们还可以对JQuery的现有功能进行增强。例如我们可以通过 $.extend() 来扩展全局的 jQuery 对象，或者通过 $.fn.extend() 来扩展实例对象。前者更适合全局操作，后者适合对选中的元素进行操作。

全局扩展

实例方法扩展

封装完成之后，接下最重要的事情就是，在项目中进行使用。我们可以将上面的操作封装成一个独立的JS文件，然后再使用的时候可以随时进行调用。例如common-utils.js，然后在使用的时候可以通过如下的方式进行引用。

然后在其他项目中就可以直接调用你的通用方法

在实际的项目使用过程中，我们可以根据业务需求来不断的对封装操作进行扩展和优化，例如可以在封装操作中添加缓存、根据不同环境的处理、根据不同状态码进行统一的封装处理等操作。这样我们的代码不仅是项目可复用，而且还可以做到高度可维护可扩展。

每日分享，三款纯jquery移动端日期时间选择插件

序言：mm再也不用担心我找不到合适好看的日期选择插件了，今天分享三款纯jquery移动端日期时间选择插件，赶紧点赞收藏转发吧。

一、jQuery移动端触屏滑动时间日期选择插件

简介：jQuery移动端触屏滑动时间日期选择插件，点击文本框触发时间选择控件，默认选择当前日期，选好的以红色显示。

js代码：

二：简单的jQuery移动端日期时间选择插件

简介：一款简单的jQuery手机移动端日期时间选择插件，点击输入框遮罩弹出日期时间选择器，手机触屏滑动分别选择年、月、日、时、分。

js代码：

三：datePicker简单的手机移动端日期选择插件

简介：datePicker是一款非常简单易用的手机移动端日期选择插件，点击输入框触发弹出年月日滑动选择控件。

js代码：

以上是为大家分享的三款纯jquery移动端日期时间选择插件，有需要以上代码的可以在下方给我留言。

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

往期文章分享：

jquery选择器

jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。

适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

注意：$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关，只要是同辈节点就都能匹配。

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单对象属性过滤选择器共七种选择器。

主要对所选择的元素中所包含的子元素或内容进行过滤。

主要对元素的可见性（可见或不可见）进行过滤。

可见选择器:hidden，可以对样式的display的值为none的元素进行过滤选择；以外；还可以对表单的隐藏元素（即类型为hidden的表单项）或visible:hidden的元素进行过滤选择。

主要对元素的属性进行过滤选择符合属性特征符合的元素。

主要选择元素中所含有的子元素。

:nth-child 过滤选择器：

:nth-child(even) 选取父元素下索引号为偶数的子元素

:nth-child(odd) 选取父元素下索引号为奇数的子元素

:nth-child(5n) 选取父元素下索引号为5n的子元素

:nth-child(5n+1) 选取父元素下索引号为5n+1的子元素

主要对表单元素进行过滤选择。

主要对所选择的表单元素进行过滤。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com