一、頁面加載
- JQ的頁面加載比JS要快，當整個dom樹結構生成完畢后就會加載
- JQ頁面加載不存在覆蓋問題，加載的時候是順序執行
- JQ的頁面加載最簡寫的方式為：
$(function(){
alert("顯示頁面加載內容");
})
//對比JS的頁面加載為：
window.onload = function(){
alert("顯示頁面加載內容");
}
二、JQ的獲取
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.JS方式獲取
/*document.getElementById("btn").onclick= function(){
location.href="驚喜.html";
}*/
//2.JQ方式獲取=====>>>$("#btn")
$("#btn").click(function(){
location.href="驚喜.html"
});
});
</script>
三、DOM對象和HQ對象的轉化
- 注意JQ不能操作JS中的屬性和方法，一樣的DOM對象也無法操作JQ對象里面的屬性和方法！！！
- JQ的html()方法：取得第一個匹配元素的html內容。
- JQ的html(val)方法：用于設定HTML內容的值，其中val是String類型
//1.JS的DOM操作
function write1(){
document.getElementById("span1").innerHTML = "js的dom操作";
}
//2.JQ的DOM操作
$(function(){
$("btn").click(function){
//注意JQ不能操作JS中的屬性和方法，例如 $("span1").innerHTML=""的寫法是錯的
$("span1").html("jq的dom操作")
});
})
-
JQ對象向DOM對象轉化：使用jQuery 對象訪問中的get()方法可以取得所有匹配的DOM元素集合，get(index)可以取得其中一個匹配的元素，即可調用JS中的屬性方法。圖中使用的是元素選擇器，即可以通過角標獲取多個
JQ對象向DOM對象轉化 將DOM對象轉換成JQ對象：直接把dom對象用$括起來
var spanEle = document.getElementById("span1");
//將DOM對象轉換成JQ對象
$(spanEle).html("DOM對象轉換成JQ對象");
-
JQ效果中的方法可以實現淡入淡出，上下滑入滑出，使用toggle可以實現一個標簽的顯示和隱藏
toggle實現標簽的顯示和隱藏
四、JQ選擇器
基本選擇器：
id選擇器：$(“#id名稱”);
元素選擇器：$(“元素名稱”);
類選擇器：$(“.類名”);
通配符：*
多個選擇器共用(并集),在同一個括號中使用 空格隔開-
層級選擇器：
ancestor descendant: 在給定的祖先元素下匹配所有的后代元素(兒子、孫子、重孫子)
parent > child : 在給定的父元素下匹配所有的子元素(兒子)
prev + next: 匹配所有緊接在 prev 元素后的 next 元素(緊挨著的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
層級選擇器 -
基本過濾選擇器：
$('li').first() 等價于：$(“li:first”)
基本過濾選擇器
五、案例——使用JQ完成表格的隔行換色
- 需求分析
在頁面加載的時候讓顯示用戶的表格進行隔行換色顯示，效果如下：使用JQ實現！ - 技術分析
需要使用jquery的選擇器(基本選擇器、基本過濾選擇器)
還需要使用jquery的CSS的方法(css(name,value))
如果CSS樣式已經由美工寫好，此時可以使用jquery的CSS類操作
css類：addClass(class | fn) - 步驟分析
第一步：引入jquery的類庫
第二步：直接寫頁面加載函數
第三步：直接使用jquery的選擇器(組合選擇)拿到需要操作的元素(奇數行和偶數行)
第四步：分別使用CSS的方法(css(name,value))對奇數行和偶數行設置背景顏色。 - 代碼實現
<script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
<link rel = "styylesheet" type = "text/css" href = "../css/style.css">
<script>
$(function(){
//獲取tbody標簽中的偶數行
$("tbody tr:even").addClass("even");
//獲取tbody標簽中的奇數行
$("tbody tr:odd").addClass("odd);
})
</script>
六、案例——使用JQ完成全選和全不選
-
需求分析
在系統后臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選
全選需求分析.png 技術分析
需要使用jquery的選擇器(id選擇器、類選擇器)
需要使用jquery的屬性操作方法 attr()或者prop()步驟分析
第一步：引入jquery文件
第二步：書寫頁面加載函數
第三步：為上面的復選框綁定單擊事件
第四步：將下面所有的復選框的選中狀態設置成跟上面的一致！代碼實現
<script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//找到下面所有的復選框并設置屬性checked()
$("#select").click(function(){
//attr在jquery1.11版本不適用，采用prop()來替代(在各個版本都適用)
//使用選擇框中input標簽已有的類 class="selectOne"
$(".selectOne").attr("checked",this.checked);
//使用選擇框中input標簽，不使用其他類屬性
$("tbody input").prop("checked",this.checked);
//使用this.checked使選擇框中是否選中狀態與表頭 id="select" 的選擇框選擇狀態相同，如果
});
});
</script>
七、數組的遍歷操作
- 方式一：
- jQuery對象訪問方式中的 each(callback)
each(callback) - 全選/全不選案例示例代碼
- jQuery對象訪問方式中的 each(callback)
$(function(){
$("#checkallbox").click(function){
var isChecked = this.checked;
//使用對象訪問的方式進行遍歷，語法：$().each(function(){})
$("input[name = 'hobby']").each(function(){
this.checked = isChecked;
});
});
});
- 方式二：
-
數組和對象操作中的 $.each(object,[callback])
$.each(object,[callback]) - object為被遍歷的對象或數組，即如下示例代碼中的[0,1,2]，其中i為角標，n為被遍歷后的內容
-
$.each( [0,1,2] , function(i , n ){
alert( "Item #" + i + ": " + n );
});
八、文檔處理操作
追加內容
apend: A.append(B) 將B追加到A的內容的末尾處
appendTo: A.appendTo(B) 將A加到B內容的末尾處-
刪除內容
empty: 刪除匹配元素集合中的所有的子節點。
remove: 從DOM中刪除所有匹配的元素
remove 案例——省市聯動
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.創建二維數組用于存儲省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
$("#province").change(function(){
//10.清除第二個下拉列表的內容
$("#city").empty();
//1.獲取用戶選擇的省份
var val = this.value;
//alert(val);
//3.遍歷二維數組中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判斷用戶選擇的省份和遍歷的省份
if(val==i){
//5.遍歷該省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.創建城市文本節點
var textNode = document.createTextNode(m);
//7.創建option元素節點
var opEle = document.createElement("option");
//8.將城市文本節點添加到option元素節點中去
$(opEle).append(textNode);
//9.將option元素節點追加到第二個下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
九、jQuery事件(常用)
- 事件綁定
-
案例——單擊顯示/關閉新內容：使用綁定事件 bind(type,[data],fn)，如下代碼中
bind 綁定單擊事件 "click"，綁定的事件內容是 function(){}。（注意代碼中的方法可以等效為JQ事件切換中的toggle()）
綁定事件 bind(type,[data],fn) -
案例——鼠標滑過內容變換:（注意代碼中的方法可以等效為JQ事件切換中的hover()）
Paste_Image.png
-
十、JQ的validation插件完成對表單數據的校驗優化
- 特點：
內置驗證規則：擁有必填、數字、email、url和信用卡號碼等19類內置驗證規則
自定義驗證規則：可以很方便的自定義驗證規則 - 調用語法：$("表單id").validate({});
- rules 規則語法：
rules:{
字段名:校驗器，
字段名:校驗器
}
- 校驗器語法：
語法：{校驗器:值，校驗器:值}
- message 提示語法：
message:{
字段名:{校驗器:"提示", 校驗器:"提示",....}
}
注意
js的函數如果寫在window.onload=function(){}大括號中的話，則該函數將變成局部函數，在html標簽中聲明的事件無法調用該函數
