一、 jQuery的遍历

1.1 语法

格式：
- jQuery对象.each（function（index，element）{ }）;
- 其中， index：元素在集合中的索引；element：集合中的每一个元素对象。

 $(function () {
            //方式1：jq对象的方法
            //1.给按钮绑定点击事件
            $("#b1").click(function () {
                //获取被遍历的对象
                $("#city li").each(function (index, ele) {
                    alert(index + ":" + ele.innerText + ":" + $(ele).html() + ":" + (this).innerHTML)
                })
            });
        }

1.2 jQuery的全局方法遍历

1.2.1 语法

格式： $each(jquery对象,function(index,element){});
- 其中，index： 元素在集合中的索引；element： 集合中的每一个元素对象（dom对象）。

$(function () {
//全局变量函数
            //方式二
            $("#b2").click(function () {
                /*$.each($("#city li"),function (index,ele) {
                    alert(index+":"+ele.innerText+":"+$(ele).html()+":"+(this).innerHTML)
                })*/
                var arrLI = document.getElementsByTagName("li");
                $.each(arrLI, function (index, ele) {
                    alert(index + ":" + ele.innerText + ":" + $(ele).html() + ":" + (this).innerHTML)
                })
            });
   }

1.3 jQuery3.0新特性

1.3.1 语法

格式：
- for(变量 of jquery对象){
  变量;}
  其中， 变量： 定义变量一次接受jquery数组中的每一个元素；jquery对象： 要被遍历的jquery对象。

 $(function () {
 //方式三：新特性
            //1.给按绑定点击事件
            $("#b3").click(function () {
                for (var ele of $("#city li")) {
                    alert(ele.innerText)
                }
            });
        });
}

以上代码的其他部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>遍历对象</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
     
    </script>
</head>
<body>
<input type="button" value="获取城市列表内,列表项中的值1" id="b1"/>
<input type="button" value="获取城市列表内,列表项中的值2" id="b2"/>
<input type="button" value="获取城市列表内,列表项中的值3" id="b3"/>
<br/><br/>

<ul id="city">
    <li>北京</li>
    <li>天津</li>
    <li>上海</li>
    <li>重庆</li>
</ul>

</body>

</html>

二、 jQuery的事件绑定与解绑

2.1 派发事件

格式：
- jq对象.事件名称（function(){}）;

2.2 on绑定事件

2.2.1 语法

格式：

	jQuery元素对象.on(事件名称，function(){
	 				//逻辑代码
	 		})

其中： 事件名称是jQuery的事件方法的方法名称，例如：click，mouseover

代码实现：

 $(function () {
            // 使用 on 方法给bid1绑定点击事件
            $("#bid1").on("click",function () {
                alert("被点击了~~~~")
            })
        });

2.3 off解绑事件

2.3.1 语法

格式：
```
 - jQuery元素对象.off(事件名称);
```
其中： 参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件。

$(function () {
           
            // 点击 bid2 按钮,将bid1的单击事件解绑
            $("#bid2").click(function (){
                $("#bid1").off("click");
                alert("解绑完成！")
            });
        });

2.4 事件切换

2.4.1 语法

格式：
```
  	hover([over],out)
```

其中： over代表鼠标移入事件触发的函数，out代表鼠标移除事件触发的函数。

 $(function () {
            $("#divId").hover(function () {
                $(this).css("background", "#0f0");
            }, function () {
                $(this).css("background", "#ff0");
            });
        });

三、 jQuery插件

插件： 实现指定功能的代码片段。

3.1 jQuery插件机制语法

语法	解释
jQuery.fn.extend（object）	对jQuery对象进行方法扩展
jQuery.extend(object)	对jQuery全局进行方法扩展

代码：

//扩展jq对象的方法
        jQuery.fn.extend({
            //方法名称：处理的函数
            "checkAll": function () {
                //实现复选框的全选
                $(this).each(function (index, ele) {
                    ele.checked = true;
                })
            },
            "unCheck":function () {
                $(this).each(function (index,ele) {
                    ele.checked = false;
                });
            },
            "aa": function () {
                return "hello world!"
            }
        });

        function checkFn() {
            $("input[type=\"checkbox\"]").checkAll();
        }

        function uncheckFn() {
            //$("input[type=\"checkbox\"]").unCheck();
            var aa = $("input[type=\"checkbox\"]").aa();
            alert(aa)
        }

3.2 validate插件

3.2.1 作用

对表单进行校验

3.2.2 使用方式

1. 导入jquery.js
- validate是基于jquery写的，所以要先导入jquery的js文件。
2. 在导入validate.js
- 想要使用别人的插件，就必须要导入别人已经写好的jquery的 js文件。
3. 在页面加载成功后，要确定对页面上的哪个表单进行校验
```
$(function(){
		表单对象.validate();
	});
```

3.3 validate使用格式：

	表单对象.validate（{
		rules : {},//校验规则
		messages ： {} //提示信息
	}）；

3.3.2 常见的校验规则

校验器名称	值	描述
required	true or false	必须填写
number	true or false	只能输入数字
min	数字	最小值
max	数字	最大值
range	[min,max]	取值范围
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minlength,maxlength]	长度范围
equalTo	通过jQuery选择器选中指定元素对象	和谁相等（重复密码）
email	“email”	校验邮箱
date	true	校验日期
dateISO	true	校验日期格式：xxxx-xx-xx xxxx/xx/xx

3.4 rules校验器语法

方式一：单一校验

name属性的值："校验器"

方式二：多个校验

	name属性的值：{
		校验器1：值1,
		校验器2：值2
		}

3.5 messages自定义提示信息语法

方式一：

name属性的值: {
	校验器1：“提示信息1”，
	校验器2："提示信息2"
}

3.6 自定义校验器

3.6.1 格式：

	$.validator.addMethod(name,function(value,element,params){
			},
	"message");

参数说明：
name： 校验器的名称，唯一
function： 校验规则
- value：用户输入的值
- element：要校验的dom对象
- params：校验器的值
message： 当不满足校验规则时的提示信息。

3.7 插件： form表单的校验

 <script type="text/javascript">
        $(function () {
            //3.页面加载成功后，锁定被校验的表单对象
            $("#empForm").validate({
                rules: {//校验规则
                    realname: "required",//校验真实名称为必填
                    username: {
                        required: true,
                        rangelength: [5, 8]
                    },
                    psw: {
                        required: true,
                        number: true,
                        rangelength: [6, 12]
                    },
                    psw2: {
                        equalTo: "#psw"//和谁相等
                    },
                    gender: {
                        required: true
                    },
                    age: {
                        required: true
                    },
                    edu: {
                        required: true
                    },
                    birthday: {
                        required: true,
                        dateISO: true,   //校验格式
                        date: true
                    },
                    email: {
                        email: "email"
                    },
                    card: {
                        required: true,
                        cardLength: false
                    }
                },
                messages: {//当不满足校验规则时的自定义提示信息
                    realname: "真实姓名不能为空",
                    username: {
                        required: "登录名不能为空",
                        rangelength: "请输入{0}-{1}位的字符"
                    }

                }
            });
        });
        //自定义校验器，校验身份证号的长度(15 | 18)
        //格式：
        $.validator.addMethod(
            "cardLength", //校验器名称
            // 完成校验的逻辑,如果满足校验格式则返回 true,反之返回 false(默认)
            function (val, ele, param) {
                //val:输入框中输入的值
                //ele：被校验的输入框对象（js对象）
                //param：校验器的值
                if (param) {
                    //需要校验
                    if (val.length == 15 || ele.value.length == 18) {
                        return true;
                    }
                }
            },
            "身份证号不合法" //当不满足校验格式时的提示信息
        );
    </script>

D31--jQuery高级

一、 jQuery的遍历

1.1 语法

1.2 jQuery的全局方法遍历

1.2.1 语法

1.3 jQuery3.0新特性

1.3.1 语法

二、 jQuery的事件绑定与解绑

2.1 派发事件

2.2 on绑定事件

2.2.1 语法

2.3 off解绑事件

2.3.1 语法

2.4 事件切换

2.4.1 语法

三、 jQuery插件

3.1 jQuery插件机制语法

3.2 validate插件

3.2.1 作用

3.2.2 使用方式

3.3 validate使用格式：

3.3.2 常见的校验规则

3.4 rules校验器语法

3.5 messages自定义提示信息语法

3.6 自定义校验器

3.6.1 格式：

3.7 插件： form表单的校验

猜你喜欢

D31--jQuery高级

一、 jQuery的遍历

1.1 语法

1.2 jQuery的全局方法遍历

1.2.1 语法

1.3 jQuery3.0新特性

1.3.1 语法

二 、 jQuery的事件绑定与解绑

2.1 派发事件

2.2 on绑定事件

2.2.1 语法

2.3 off解绑事件

2.3.1 语法

2.4 事件切换

2.4.1 语法

三 、 jQuery插件

3.1 jQuery插件机制语法

3.2 validate插件

3.2.1 作用

3.2.2 使用方式

3.3 validate使用格式：

3.3.2 常见的校验规则

3.4 rules校验器语法

3.5 messages自定义提示信息语法

3.6 自定义校验器

3.6.1 格式：

3.7 插件： form表单的校验

猜你喜欢

二、 jQuery的事件绑定与解绑

三、 jQuery插件