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 ( 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>