與Ajax同樣重要的jQuery（1）
jQuery框架
jQuery 1.4 是企業主流版本，從jQuery1.6 開始引入大量新特性。最新版本 2.1.1，這裡講解以1.8.3為主(新版本主要是瀏覽器相容問題以及新特性)
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery框架原始碼，沒有被精簡，體積較大 （主要用來研究 jQuery原始碼），企業開發時，需要匯入 jquery-1.8.3.min.js （精簡過）
1.jQuery程式快速入門
window.onload = function() {...}
等價於$(document).ready(function(){...});
①：jQuery基本使用
傳統Js寫法：
<scripttype="text/javascript"> window.onload=function(){ alert("傳統JS，Ok"); } </script> jQuery寫法： <scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script> <scripttype="text/javascript"> $(function(){ alert("ok"); }); $(document).ready(function(){ alert("OK"); });
</script>
②：jQuery核心函式
1)jQuery(callback) // 頁面onload 函式
2)jQuery(expression, [context]) // 查詢指定物件 ------ 九種選擇器
3)jQuery(elements) // 將dom物件轉換為jQuery物件
* document 是DOM物件 jQuery(document) 成為了jQuery物件
4)jQuery(html, [ownerDocument]) // 將html轉換jQuery物件
* jQuery("<p>hello</p>") ----- 得到 jQuery物件
Demo:
<scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 獲得div物件
var domObject = document.getElementById("mydiv"); // 獲得DOM物件
domObject.innerHTML = "ITCAST";
// 通過包裝DOM物件，成為jQuery物件
var $jQueryObject = $(domObject); // DOM物件成為 jQuery物件
$jQueryObject.html("傳智播客"); // html()是jQuery物件的方法
// 通過訪問jQuery物件下標0 元素，獲得DOM物件
var dom1 = $jQueryObject[0]; // 轉換jQuery物件為DOM物件
var dom2 = $jQueryObject.get(0);
dom2.innerHTML = "傳智播客ITCAST";
});
</script>
<body>
<divid="mydiv">hello</div>
</body>jQuery物件無法使用DOM物件屬性方法，DOM物件也無法使用jQuery物件屬性方法。但是我們可以使用jQuery提供方法，將DOM物件通過jQuery()函式包裝成為jQuery物件，同樣我們可以把jQuery物件轉化成DOM物件。
jQuery--->DOM物件：$jQuery物件[0]或者$jQuery物件.get(0);
DOM物件--->jQuery：$(DOM物件)
2.jQuery九種選擇器
選擇器是jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴於選擇器
jQuery(expression, [context]) 在核心函式jQuery中傳入表示式，對頁面中元素進行選擇======================jQuery核心函式第二種！
①：基本選擇器
根據元素id屬性、class屬性、元素名稱 對元素進行選擇
id選擇器： $("#元素id屬性")
class選擇器： $(".元素class屬性")
元素名稱選擇器：$("元素名稱")
多個選擇器同時使用 selector1,select2 例如 ： $("#xxid ,.xxxclass") 同時選擇id 和 class匹配兩類元素
練習1：
² 通過each() 在每個div元素內容前 加入 “傳智播客”
² 通過size() / length 列印頁面中 class屬性為 itcast 的元素數量
² 通過index() 列印 id屬性為foo 的div標籤 是頁面內的第幾個div標籤
<scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
// 選中所有div 得到集合
$("div").each(function(){
// 在每個div內容前加入“傳智播客”
// this.innerHTML = "傳智播客" + this.innerHTML ;
$(this).html("傳智播客" + $(this).html());
});
// 通過size() / length 列印頁面中 class屬性為 itcast 的元素數量
// alert($(".itcast").size());
alert($(".itcast").length);
// 通過index() 列印 id屬性為foo 的div標籤 是頁面內的第幾個div標籤
alert($("div").index($("#foo")));
});
</script>
<body>
<div>DIVAAAA</div>
<divclass="itcast">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<divclass="itcast">DIVEEEE</div>
<divid="foo">DIVFFFF</div>
<p>PAAAA</p>
<pclass="itcast">PBBBB</p>
<p>PCCCC</p>
</body>②：層級選擇器
根據祖先、後代、父子關係、兄弟關係 進行選擇
ancestor descendant 獲取ancestor元素下邊的所有元素 $("form input")
parent > child 獲取parent元素下邊的所有直接child 子元素 $("form > input")
prev + next 獲取緊隨pre元素的後一個兄弟元素 $("label + input")
prev ~ siblings 獲取pre元素後邊的所有兄弟元素 $("form ~ input")
練習2：
² 將class屬性值為itcast的元素下所有a元素字型變為紅色
² 將class屬性值為itcast的元素下直接a元素字型變為藍色
² 將div元素後所有兄弟a元素，字型變為黃色，大小變為30px
<scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
// 將class屬性值為itcast的元素下所有a元素字型變為紅色
$(".itcast a").css("color","red");
// 將class屬性值為itcast的元素下直接a元素字型變為藍色
$(".itcast>a").css("color","blue");
// 將div元素後所有兄弟a元素，字型變為黃色，大小變為30px
$("div~a").css({color:'yellow','font-size':'30px'});
});
</script>
<body>
<divclass="itcast">
<a>div link</a>
<p>info
<a>p link</a>
</p>
</div>
<a>link</a>
<pclass="itcast">
<a>p link</a>
</p>
<a>link</a>
</body>執行結果
③：基本過濾選擇器
:first 選取第一個元素 $("tr:first")
:last 選取最後一個元素 $("tr:last")
:not(selector) 去除所有與給定選擇器匹配的元素 $("input:not(:checked)")
:even 選取所有元素中偶數索引的元素，從 0 開始計數 $("tr:even") ----- 選取奇數元素
:odd 選取所有元素中奇數索引的元素 ，從0 開始計數 $("tr:odd") ------ 選取偶數元素
:eq(index) 選取指定索引的元素 $("tr:eq(1)")
:gt(index) 選取索引大於指定index的元素 $("tr:gt(0)")
:lt(index) 選取索引小於指定index的元素 $("tr:lt(2)")
:header 選取所有的標題元素 如：h1, h2, h3 $(":header")
:animated 匹配所有正在執行動畫效果的元素
練習3：
² 設定表格第一行，顯示為紅色
² 設定表格除第一行以外 顯示為藍色
² 設定表格奇數行背景色 黃色
² 設定表格偶數行背景色 綠色
² 設定頁面中所有標題 顯示為灰色
² 設定頁面中正在執行動畫效果div背景黃色，不執行動畫div背景綠色
<scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
// 設定表格第一行，顯示為紅色
$("tr:first").css("color","red");
// 設定表格除第一行以外 顯示為藍色
// $("tr:not(:first)").css("color","blue");
$("tr:gt(0)").css("color","blue");
// 設定表格奇數行背景色 黃色 /設定表格偶數行背景色 綠色
$("tr:even").css("background-color","yellow");
$("tr:odd").css("background-color","green");
// 設定頁面中所有標題 顯示為灰色
$(":header").css("color","gray");
// 設定頁面中正在執行動畫效果div背景黃色，不執行動畫div背景綠色
// 無法選中正在執行動畫的元素
$("div:not(:animated)").css("background-color","green");
$("div").click(function(){
$(this).css("background-color","yellow");//設定執行動畫元素
$(this).slideUp("slow");
});
});
</script>
<body>
<h1>表格資訊</h1>
<h2>這是一張商品表</h2>
<tableborder="1"width="600">
<tr>
<th>商品編號</th>
<th>商品名稱</th>
<th>售價</th>
<th>數量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣機</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>熱水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手機</td>
<td>2188</td>
<td>200</td>
</tr>
</table>
<div>
slideDown(speed, [callback])
概述
通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回撥函式。
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
引數
speedString,Number三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
callback (可選)FunctionFunction在動畫完成時執行的函式
</div>
<div>
fadeOut(speed, [callback])
概述
通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回撥函式。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
引數
speedString,Number三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
callback (可選)Function在動畫完成時執行的函式
</div>
</body>
④：內容過濾選擇器
內容選擇器是對子元素和文字內容的操作
:contains(text) 選取包含text文字內容的元素 $("div:contains('John')") 文字內容含有john 的所有div
:empty 選取不包含子元素或者文字節點的空元素 $("td:empty") td元素必須為空
:has(selector) 選取含有選擇器所匹配的元素的元素 $("div:has(p)").addClass("test"); 含有p子元素的div
:parent 選取含有子元素或文字節點的元素 $("td:parent") 所有不為空td元素選中
練習4：
² 設定含有文字內容 ”傳智播客” 的 div 的字型顏色為紅色
² 設定沒有子元素的div元素 文字內容 ”這是一個空DIV“
² 設定包含p元素 的 div 背景色為黃色
² 設定所有含有子元素的span字型為藍色
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 設定含有文字內容 ”傳智播客” 的 div 的字型顏色為紅色
$("div:contains('傳智播客')").css("color","red");
// 設定沒有子元素的div元素 文字內容 ”這是一個空DIV“
$("div:empty").html('這是一個空DIV');
// 設定包含p元素 的 div 背景色為黃色
$("div:has(p)").css("background-color","yellow");
// 設定所有含有子元素的span字型為藍色
$("span:parent").css("color","blue");
});
</script>
<body>
<div>今天是個晴天</div>
<div>明天要去傳智播客學 java</div>
<div><span>JavaScript</span> 是網頁開發中指令碼技術</div>
<div>Ajax 是非同步的 JavaScript和 XML</div>
<div><p>jQuery</p> 是 JavaScript一個 輕量級框架</div>
<div></div>
</body>
⑤：可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素
:hidden 選取所有不可見元素 $("tr:hidden")
:visible 選取所有可見的元素 $("tr:visible")
練習5：
² 為表單中所有隱藏域 新增 class屬性，值為itcast
² 設定table所有 可見 tr 背景色 黃色
² 設定table所有 隱藏tr 字型顏色為紅色，顯示出來 ，並輸出tr中文字值
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 為表單中所有隱藏域 新增 class屬性，值為itcast
$("input:hidden").addClass("itcast");
// 設定table所有 可見 tr 背景色 黃色
$("tr:visible").css("background-color","yellow");
// 設定table所有 隱藏tr 字型顏色為紅色，顯示出來 ，並輸出tr中文字值
$("tr:hidden").each(function(){
alert($(this).text());
});
$("tr:hidden").css("color","red");
$("tr:hidden").css("display","block");
});
</script>
<body>
<form>
訂單號 itcast-xxxx 金額 100元
<!-- 隱藏令牌號 -->
<input type="hidden" name="token"
value="12312-0xccx-zx-asd-21-asd-gdfgd" />
<input type="submit" value="確認支付" />
</form>
<table>
<tr style="display:none;">
<td>冰箱</td>
</tr>
<tr style="visibility:hidden;">
<td>洗衣機</td>
</tr>
<tr>
<td>熱水器</td>
</tr>
</table>
</body>
⑥：屬性過濾選擇器
通過元素的屬性來選取相應的元素
[attribute] 選取擁有此屬性的元素 $("div[id]")
[attribute=value] 選取指定屬性值為value的所有元素
[attribute !=value] 選取屬性值不為value的所有元素
[attribute ^= value] 選取屬性值以value開始的所有元素
[attribute $= value] 選取屬性值以value結束的所有元素
[attribute *= value] 選取屬性值包含value的所有元素
練習6：
² 設定所有含有id屬性的div，字型顏色紅色
² 設定所有class屬性值 含有itcast元素背景色為黃色
² 對所有既有id又有class屬性div元素，新增一個點選事件，列印div標籤中內容
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 設定所有含有id屬性的div，字型顏色紅色
$("div[id]").css("color","red");
// 設定所有class屬性值 含有itcast元素背景色為黃色
$("[class *= 'itcast']").css("background-color","yellow");
// 對所有既有id又有class屬性div元素，新增一個點選事件，列印div標籤中內容
$("div[id][class]").click(function(){
alert($(this).html());
});
});
</script>
<body>
<div>AAAA</div>
<div id="mydiv" class="itcast1">BBBB</div>
<div class="itcast2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="itcast3">FFFF</div>
<p class="p-itcast">PPPPPP</p>
</body>
⑦：子元素過濾選擇器
對某元素中的子元素進行選取
:nth-child(index/even/odd) 選取索引為index的元素、索引為偶數的元素、索引為奇數的元素 ----- index 從1開始 區別 eq
:first-child 選取第一個子元素
:last-child 選取最後一個子元素
:only-child 選取唯一子元素，它的父元素只有它這一個子元素
練習7：
² 選擇id屬性mytable 下3的倍數行，字型顏色為紅色
² 表格 奇數行 背景色 黃色
² 表格 偶數行 背景色 灰色
² 只有一個td的 tr元素 字型為 藍色
<scripttype="text/javascript"src="../jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(function(){
// 選擇id屬性mytable 下3的倍數行，字型顏色為紅色
$("#mytable tr:nth-child(3n)").css("color","red");
// 表格 奇數行 背景色 黃色 / 表格 偶數行 背景色 灰色
$("table tr:nth-child(even)").css("background-color","gray");
// $("table tr:nth-child(odd)").css("background-color","yellow"); // 從1計數
$("tr:even").css("background-color","yellow");// 從0計數
// 只有一個td的 tr元素 字型為 藍色
$("tr td:only-child").css("color","blue");
});
</script>
</head>
<body>
<tableborder="1"width="400"id="mytable">
<tr><td>1</td><td>冰箱</td></tr>
<tr><td>2</td><td>洗衣機</td></tr>
<tr><td>3</td><td>熱水器</td></tr>
<tr><td>4</td><td>電飯鍋</td></tr>
<tr><td>5</td><td>電磁爐</td></tr>
<tr><td>6</td><td>豆漿機</td></tr>
<tr><td>7</td><td>微波爐</td></tr>
<tr><td>8</td><td>電視</td></tr>
<tr><td>9</td><td>空調</td></tr>
<tr><td>10</td><td>收音機</td></tr>
<tr><td>11</td><td>排油煙機</td></tr>
<tr><td>12</td><td>加溼器</td></tr>
<tr><td>13 電暖氣</td>加溼器</tr>
</table>
</body>
⑧：表單過濾選擇器
選取表單元素的過濾選擇器
:input 選取所有<input>、<textarea>、<select >和<button>元素
:text 選取所有的文字框元素
:password 選取所有的密碼框元素
:radio 選取所有的單選框元素
:checkbox 選取所有的多選框元素
:submit 選取所有的提交按鈕元素
:image 選取所有的影象按鈕元素
:reset 選取所有重置按鈕元素
:button 選取所有按鈕元素
:file 選取所有檔案上傳域元素
:hidden 選取所有不可見元素
練習8：
² 對所有text框和password框，新增離焦事件，校驗輸入內容不能為空
² 對button 新增 點選事件，提交form表單
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 對所有text框和password框，新增離焦事件，校驗輸入內容不能為空
$(":text,:password").blur(function(){
// 獲得表單元素內容 val()
var value = $(this).val(); // 獲得value 屬性
// 將輸入內容 trim
if($.trim(value) == "" ){
alert("使用者名稱和密碼不能為空");
}
});
// 對button 新增 點選事件，提交form表單
$(":button").click(function(){
$("#myform").submit();
});
});
</script>
<body>
<form action="regist" method="post" id="myform">
使用者名稱 <input type="text" name="username" /><br/>
密碼 <input type="password" name="password" /><br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女"/><br/>
城市 <select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
個人簡介 <textarea rows="5" cols="60" name="introduce"></textarea>
<input type="button" value="提交"/>
</form>
</body>
⑨：表單物件屬性過濾選擇器
選取表單元素屬性的過濾選擇器
:enabled 選取所有可用元素
:disabled 選取所有不可用元素
:checked 選取所有被選中的元素，如單選框、複選框
:selected 選取所有被選中項元素，如下拉列表框、列表框