一、 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对象。
- for(变量 of 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” | 校验邮箱 | |
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>