jQuery extension

jQuery multi-library coexistence

The beginning of jquery is jQuery when $ is obtained. If you introduce someone else's plug-in on the page, the plug-in written by someone else must start with $ or \jQuery, then it will conflict with the imported jquery. jQuery has already anticipated this situation, so jQuery can surrender the use of $ or jQuery, or replace it with other operators.

• Hand over $ control

// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()

// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用

• Hand over control of $ and jQuery

// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)

// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined

• Custom replacement control

// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)

// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () {
    
     console.log('我被点击了') })

jQuery plugin extension

• Sometimes in our business needs, we will encounter some methods that are not in it, then we can extend some methods to him

Extend to itself

• method:jQuery.extend

// jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.extend({
    
    
    max: function (...n) {
    
     return Math.max.apply(null, n) },
    min: function (...n) {
    
     return Math.min.apply(null, n) }
})

• After the expansion is complete, we can use it

const max = $.max(4, 5, 3, 2, 6, 1)
console.log(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1

Extend to element collection

• method:jQuery.fn.extend()

// jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.fn.extend({
    
    
    checked: function () {
    
    
        // return 关键字是为了保证链式编程
        // 后面的代码才是业务逻辑
        return this.each(function() {
    
     this.checked = true })
    }
})

• After the expansion is complete, we can use it

// 靠元素集合来调用
$('input[type=checkbox]').checked()
// 执行完毕之后，所有的 复选框 就都是选中状态了

jQuery commonly used plug-ins

Plug-in library URL:

• Home of jquery: http://www.htmleaf.com/jQuery
• jq22：http://www.jq22.com

Form validation plugin (jquery-validation)

Download link: http://static.runoob.com/download/jquery-validation-1.14.0.zip

1. Introduce jquery
2. Introduce jquery.validate.js
3. Introduce language packs
4. The form tag calls the validate method

$("form").validate(function(){
    
    
    rules:{
    
     // 定义规则
        // 键是表单元素name属性值，值是规则项 -- 单一规则
        uname:"required",
        // 键是表单元素name属性值，值是对象
        pass:{
    
    
			// 键是规则名称，值是规则的值
            maxlength:12,
            minlength:6
            required:true
        }
    },
    message:{
    
     // 自定义提示内容，要和上面的规则对应
        uname:"用户名必填",
        pass:{
    
    
			maxlength:"不能大于12位",
            minlength:"不能小于6位",
            required:"密码必填", // 如果要使用插件默认的提示信息则可以省略
        }
    },
    submitHandler:function(form){
    
     // 处理表单提交
         // jQuery序列化表单数据
        var data = $(form).serialize();
        /* 
        	手动提交表单或发送ajax
        	form.submit()
        	ajax
        	
        */
    }
});

5. Custom error message style, use the class name error
6. Custom verification method:

jQuery.validator.addMethod("checkTel",function(v){
    
     
    var reg = /^[1][345789]\d{9}$/;
    if(!reg.test(v)){
    
    
    	return false;   
    }else{
    
    
        return true;
    }
},"手机号不正确");
// 验证规则是checkTel，提示信息是固定的

Color animation plugin (jquery.color)

Download link: https://github.com/jquery/jquery-color

• Just import the plug-in, just write the color animation

Image lazy loading plugin (jquery.lazyload)

Download link: https://github.com/pedromenezes/jQuery-lazyload

1. Introduce jquery
2. Introduce the plugin name
3. Replace the src attribute of the picture with the data-original attribute, and add width and height to the picture label
4. Add a class name to the picture for control
5. Calling method in js code:$("img.类名").lazyload();
6. Custom placeholder image:

$("img.lazy").lazyload(function(){
    
    
    placeholder:"image/1.gif",
});

laydate time plugin

Official website address: http://www.layui.com/laydate

• Download the plug-in and introduce the core js file

<body>
	<input type="text" id="time">
</body>
<script src="laydate.js"></script>
<script>
// 初始化时间，执行一个laydate实例
laydate.render({
     
     
	elem:"#time",
	type:"datetime", // 可以指定类型：month,year,datetime,time
	mark:{
     
      // 标记
		'0-6-2':"儿童节",
		'0-0-5':'发工资',
		'2019-6-30':'离职',
		'2019-6-28':'',
	},
});
</script>

layer pop-up layer plugin

Pop-up layer address: http://layer.layui.com

• Loading layer

<body>
	<button id="loading">加载</button>
</body>
<script src="jquery.js"></script>
<script src="layer.js"></script>
<script>
// loading层
$("#loading").click(function(){
    
    
		var index1 = layer.load(1,{
    
    
		shade:[0.1,'#666'], // 0.1表示透明度，#666表示背景颜色
		shadeClose:true, // 表示点击遮罩关闭弹出层，默认为false
	});
	// 关闭指定的弹出层:layer.close(弹出层id);
	setTimeout(function(){
    
    layer.close(index1);},3000);
});
</script>

• Prompt layer:

<body>
	<button id="tip">提示</button>
</body>
<script src="jquery.js"></script>
<script src="layer.js"></script>
<script>
// 提示层
$("#tip").click(function(){
    
    
	layer.msg("提交失败！！！",{
    
    time:2000}); // 设置2秒钟之后自动关闭
});
</script>