JQuery【插件】

云彩123

已于 2022-05-16 10:19:01 修改

阅读量161

点赞数 1

分类专栏： Jquery 文章标签： jquery javascript 前端开发语言 java

于 2022-03-20 00:21:45 首次发布

本文链接：https://blog.csdn.net/m0_64522859/article/details/123588136

版权

Jquery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

如需查看上一节内容，请点击下方链接进行跳转。

JQuery之事件&动画_云彩123的博客-CSDN博客一、事件(1)加载Dom两种方式window.onload方式：执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行编写个数：1个jQuery方式：执行时间：网页结构绘制完成后，执行编写个数：多个两个都有的情况下执行顺序【面试题】：jQuery3.0：window.onload比jQuery先执行jQuery1.0和2.0：jQuery比window.onload先执行(2)绑定事件两种方式元素.on("事件名",function(){})元素.事件https://blog.csdn.net/m0_64522859/article/details/123470075

自定义插件:

$.extend：扩展（工具方法）

【作用1】对象继承(拷贝)： $.extend(对象1，对象2)---->对象1继承对象2

案例1：对象间的继承（两个对象）

【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开

案例2：扩展$.max()和$.min()方法

$.fn.extend：扩展（实例方法）

【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开

案例3：扩展复选框的全选和取消全选功能【升级之前的版本】

第三方插件

查看API官方文档

插件名：jQuery Validation

使用步骤

【1】.下载jQuery插件验证库

jquery.validate.js

【2】.将类库引入页面

【3】.两种方式使用验证

HTML标签属性方式

JS方式【推荐】

验证及错误信息

$("表单元素").validate({
    rules:{
     字段验证规则
    }，
    messages:{
    字段错误信息
   }
})

错误样式

表格元素  label.error{
   样式
}

验证规则说明

见jQueryValidate规则.png

案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）

代码演示如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插件</title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			/* 一、自定义插件 */
        //1.1 $.extend()实现对象继承
        //案例1：两个对象的继承
            //定义对象
        var aname = {
            name: "李白",
			//方法
            exercise: function() {
                console.log(this.name + "在喝杜康")
            }
        }
             //调用对象的定义方法
			  aname.exercise();//在console界面显示
              //李白在喝杜康
			  
			  //定义对象
           var bname = {
            name: "杜甫",
            athletics: function() {
                console.log(this.name + "在修建草屋中")
            }
        }
          //调用对象的定义方法
		  bname.athletics();//杜甫在修建草屋中
		  
		  //bname继承了aname的属性与方法
          $.extend(bname, aname); 

          console.log(bname);//object

        bname.athletics()//李白在修建草屋中
        bname.exercise()//李白在喝杜康

        //1.2 $.extend()扩展jQuery类方法
        //案例2：求最大值(最小值)
        $.extend({
            //两数最大值
            myMax: function(a, b) {
                return a > b ? a : b
            },
            //两数最小值
            myMin: function(a, b) {
                return a < b ? a : b
            },
            //多个数的最大值
            moreMax: function(...rest) {
                var f = -Infinity //存放当前比较大的值
                for (var i of rest) { //遍历每个参数
                    f = Math.max(f, i) //比较两个数字的大小 将其中大的一个赋值给f
                }
                return f
            }
            //1.多个数字的最小值
        })

        var a1 = $.myMax(1, 2)
        console.log(a1)//2
        var a2 = $.myMin(1, 2)
        console.log(a2)//1

        var a3 = $.moreMax(-1, -2, -3, -4)
        console.log(a3)//-1

        //Infinity 无穷大
        //-Infinity 无穷小
        console.log(-1 > -Infinity)//true

        //1.3 $.fn.extend()扩展jQuery对象方法
        //案例3：实现全选效果

        // 类方法
        // $.each()   相当于  DBHelper.getCon()
        // 对象方法
        // $().not()  相当于  new Date().getTime()

        //给$的对象方法做了拓展
        $.fn.extend({
            //拓展了一个名字为checkAll的方法
            checkAll: function(f) {
                $("input").prop("checked", f)
            }
        })
        
		 //调用方法
        $(function() {
            $("#all").click(function(){
                $("#all").checkAll(all.checked)
            })
        })

        /* 二、第三方插件:表单验证插件 */
        //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
    </script>
	</head>

	<body>
		<input type="checkbox" id="all">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义插件</title>
		<script src="js/jquery-3.5.1.js"></script>
		<!--如果要使用jquery-validation 必须先导入jquery-->
		<script src="jquery-validation-1.14.0/dist/jquery.validate.js"></script>
		<!-- 中文汉化包 -->
		<script src="jquery-validation-1.14.0/dist/localization/messages_ar.js"></script>
		<script>
			$(function(){
				  //启用表单验证  validate
				  $("myForm").validate({
					//验证规则
					rules: {
		            //用户名:								
						uname :{
							  required: true, //必填字段
							  rangelength: [6, 12] //用户名字长度在6~12位
						},
						
						//密码
						upwd1 :{
							 required: true, //必填字段
							 rangelength: [6, 10] //密码长度在6~10位
						}
									
					//确认密码	
					upwd2 :{
						 equalTo: "#p1" //输入值必须与id为p1的输入值相同		
					},
										
					//邮箱					
					emal :{
						  required: true, //必填字段
						  email:true //正确格式的电子邮件
					},					
								
					//网址
					wangzhi :{
						 required: true, //必填字段
						 url:true //正确格式的网址
					},		
					
					//年龄
					uage :{
						 digits: true, //必须为整数
						 range: [18, 150] //数字要在18~150之间
					}
										
			         }    
				  })				  
			  })
		  </script>
	</head>
	<body>
		<form action="" id="myForm">
			<p>
				用户名: <input type="text" name="uname">
			</p>
			<p>
				密码: <input type="password" name="upwd1" id="p1">
			</p>
			<p>
				确认密码: <input type="password" name="upwd2" id="p2">
			</p>
			<p>
				邮箱: <input type="text" name="emal">
			</p>
			<p>
				网址: <input type="text" name="wangzhi">
			</p>
			<p>
				年龄: <input type="text" name="uage">
			</p>
			<p>
				<input type="submit">
			</p>
		</form>
	</body>
</html>

云彩123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery【插件】

自定义插件:$.extend扩展（工具方法）【作用1】对象继承(拷贝)： $.extend(对象1，对象2)---->对象1继承对象2案例1：对象间的继承（两个对象）【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体 } } ) 注意多个方法之间用逗号隔开案例2：扩展$.max()和$.min()方法$.fn.extend扩展（实例方法）【作用】扩展jQuery对象方法：$.fn.extend( {方法名：functi...
复制链接

扫一扫

专栏目录