D31--jQuery高階
阿新 • • 發佈：2019-01-05
一、 jQuery的遍歷
1.1 語法
- 格式：
- jQuery物件.each（function（index，element）{ }）;
- 其中， index：元素在集合中的索引；element：集合中的每一個元素物件。
$(function () {
//方式1：jq物件的方法
//1.給按鈕繫結點選事件
$("#b1").click(function () {
//獲取被遍歷的物件
$("#city li").each(function ( 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. 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>