JQuery(二)
-
回顧:
- js是在整個html文檔加載完(包括圖片)成后執(zhí)行,jq是在domcument加載完成后執(zhí)行,所以jq比js快
- 所有的jquery代碼寫在頁面加載函數(shù)
- jQuery對象用$開頭 var $objEle = $("#id_name");
$(function(){ Jquery代碼 }); -
學(xué)習(xí)目標(biāo)
- 通過JQ給元素添加屬性或樣式
- 給制定的標(biāo)簽添加子標(biāo)簽或兄弟標(biāo)簽
- 學(xué)會給標(biāo)簽綁定事件
-
JQ中屬性操作
- html():獲取html代碼如果有標(biāo)簽一并獲取
- html(...):設(shè)置文本,如果有標(biāo)簽,進(jìn)行解析
- text():獲得文本,如果有標(biāo)簽,忽略
- text(...):設(shè)置文本,如果有標(biāo)簽,不進(jìn)行解析,原樣輸出
- val():獲取value屬性的值
- val(...):給value設(shè)置屬性值
JQ二級聯(lián)動
-
jQuery數(shù)組中遍歷:
- each(callback)
- callback方法中得到的this對象為document的對象
<body><img/><img/></body> $("img").each(function(i){this.src="xxx.jpg"});- $.each(object,[callable])
- 回調(diào)函數(shù)的參數(shù)
function(index,docEle) { index:遍歷的索引 docEle:this==docEle,當(dāng)前遍歷的對象 } $.each(obj,function(index,docEle){ alert(index + "==" + docEle.value); }); - each(callback)
-
文檔處理
- 追加內(nèi)容(內(nèi)部插入)
- append():末尾追加,跟document.appendChild()差不多
- A.append(B):將B追加到A內(nèi)容的末尾
- appendTo():
- A.appendTo(B):將A追加到B內(nèi)容的末尾(相反)
- prepend():首部追加
- prependTo():追加到首部
- append():末尾追加,跟document.appendChild()差不多
- 清楚內(nèi)容
- empty():清空節(jié)點內(nèi)的子節(jié)點,節(jié)點保留
- remove():刪除節(jié)點內(nèi)所有的子節(jié)點,包括自身也刪除
- 追加內(nèi)容(內(nèi)部插入)
<script type="text/javascript">
var citiesArr = new Array(4);
citiesArr[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
citiesArr[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
citiesArr[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
citiesArr[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
$(function(){
$("#province").change(function() {
//1.獲取用戶選擇的省份
var value = this.value;
//2.轉(zhuǎn)成number類型
value = parseInt(value);
//3.獲取城市select
var $city = $("#city");
//4.清空之前的城市信息
$city.empty();
//5.遍歷
$(citiesArr[value]).each(function(i,n){
//DOM方式創(chuàng)建節(jié)點
opEle = document.createElement('option');
//給節(jié)點設(shè)置值,也可以通過:document.createTextNode(n)后appendchild()進(jìn)去
//opEle.innerHTML = n;
//$(opEle).html(n);
$(opEle).text(n);
$(opEle).appendTo($city);
});
});
});
</script>
JQ左右選擇
<script type="text/javascript">
$(function(){
$("#left_one_to_right").click(function(){
$("#left_select option:selected").appendTo($("#right_select"))
});
$("#left_all_to_right").click(function(){
$("#left_select option").appendTo($("#right_select"))
});
});
</script>
JQ表單校驗
- 在學(xué)習(xí)javascript時我們通過手動的方式進(jìn)行表單校驗,此功能在開發(fā)中非常常見,屬于通用功能范疇,在實際開發(fā)中一般都是通過第三方工具實現(xiàn)的
- 使用jQuery插件validation進(jìn)行表單校驗
- validate.js是建立在jquery之上的，所以得先導(dǎo)入jquery的類庫再導(dǎo)validate
- 出生日期選擇一般用控件實現(xiàn)
- 驗證碼暫時還不能校驗
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的翩概，所以得先導(dǎo)入jquery的類庫-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入國際化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:6
}
},
messages:{
username:{
required:"用戶名不能為空!",
minlength:"用戶名不得少于6位！"
},
password:{
required:"密碼不能為空!",
digits:"密碼必須是整數(shù)!",
minlength:"密碼不得少于6位!"
}
},
errorElement: "label", //用來創(chuàng)建錯誤提示信息標(biāo)簽,validate插件默認(rèn)的就是label
success: function(label) { //驗證成功后的執(zhí)行的回調(diào)函數(shù)
//label指向上面那個錯誤提示信息標(biāo)簽label
label.text(" ") //清空錯誤提示消息
.addClass("success"); //加上自定義的success類
}
});
});
</script>
