練習1：點擊所有的 p 節點，能夠彈出對應的文本內容。
1 <script type="text/javascript" src="jquery-1.7.2.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 $("p").click(function(){ 5 alert($(this).text()); 6 }); 7 }); 8 </script>
注意：1、jQuery 對象可以進行隱式迭代： 為選取的所有的 p 節點都添加了 onclick 響應函數。jQuery 對象本身就是一個 DOM 對象的數組。
2、在響應函數中，this 是一個 DOM 對象，若想使用 jQUery 對象的方法，需要把其包裝為 jQuery 對象：使用 $() 把 this 包起來。
3、text() 方法是一個讀寫的方法：不加任何參數，讀取文本值；加參數為屬性節點添加文本值（文本節點），和 text() 類似的方法： attr()、val()。
練習2：使第一個 table 隔行變色。
$("table:first tr:even").css("background", "#ffaabb");
練習3：點擊 button ，彈出被選中的個數。
1 <script type="text/javascript" src="jquery-1.7.2.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 $("button").click(function(){ 5 alert($(":checkbox:checked").length); 6 }); 7 }); 8 </script> 9 ... 10 11 <body> 12 <input type="checkbox" name="test" /> 13 <input type="checkbox" name="test" /> 14 <input type="checkbox" name="test" /> 15 <input type="checkbox" name="test" /> 16 <input type="checkbox" name="test" /> 17 <input type="checkbox" name="test" /> 18 <button>您選中的個數</button> 19 </body>
練習4：分類添加內容
結果圖：
、 
代碼：
1 <title>Insert title here</title> 2 <script type="text/javascript" src="jquery-1.7.2.js"></script> 3 <script type="text/javascript"> 4 $(function(){ 5 //需求2：使包括新增的 li 都能響應 onclick 事件: 彈出 li 的文本值. 6 function showContent(li){ 7 alert($(li).text()); 8 } 9 $("li").click(function(){ 10 showContent(this) 11 }); 12 13 //需求1：點擊 submit 按鈕時,檢查是否選擇 type,若沒有選擇給出提示: "請選擇類型"; 14 $(":submit").click(function(){ 15 var $type = $(":radio[name='type']:checked"); 16 if($type.length == 0 ){ 17 alert("請選擇類型"); 18 return false; 19 } 20 var typeVal = $type.val(); 21 //檢查文本框中是否有輸入(可以去除前后空格),若沒有輸入,則給出提示:"請輸入內容"; 22 var $text = $(":text[name='name']"); 23 var textVal = $.trim($text.val()); 24 $text.val(textVal); 25 if(textVal == ""){ 26 alert("請輸入內容"); 27 return false; 28 } 29 //alert("^^" + textVal + "__"); 30 //若檢查都通過, 則在相應的 ul 節點中添加對應的 li 節點 31 $("<li>" + textVal + "</li>").appendTo($("#" + typeVal)) 32 .click(function(){ 33 showContent(this) 34 }); 35 $text.val(""); 36 return false; 37 }); 38 }) 39 </script> 40 </head> 41 <body> 42 43 <p>你喜歡哪個城市?</p> 44 45 <ul id="city"> 46 <li id="bj">北京</li> 47 <li>上海</li> 48 <li>東京</li> 49 <li>首爾</li> 50 </ul> 51 52 <br><br> 53 <p>你喜歡哪款單機游戲?</p> 54 <ul id="game"> 55 <li id="rl">紅警</li> 56 <li>實況</li> 57 <li>極品飛車</li> 58 <li>魔獸</li> 59 </ul> 60 <br><br> 61 <form action="dom-7.html" name="myform"> 62 63 <input type="radio" name="type" value="city">城市 64 <input type="radio" name="type" value="game">游戲 65 66 name: <input type="text" name="name"/> 67 68 <input type="submit" value="Submit" id="submit"/> 69 70 </form> 71 </body>
注意：1、$.trim(str)：可以去除 str 的前后空格。
2、同 JS 的響應函數一樣，jQuery 對象的響應函數若返回 false，可以取消指定元素的默認行為，比如：submit、a 等。
3、jQuery 對象的方法的連綴：調用一個方法的返回值還是調用的對象，於是可以在調用方法的后面依然調用先前那個對象的其他方法。
練習5：員工信息的增加和刪除
結果圖：
代碼：
1 <script type="text/javascript" src="jquery-1.7.2.js"></script> 2 <script type="text/javascript"> 3 4 $(function(){ 5 6 //1. jQuery 對象調用 jQuery 提供的方法的返回值如果是一個對象的話 7 //那么這個對象一定是一個 jQuery 對象 8 //2. find() 方法: 查找子節點, 返回值為子節點對應的 jQuery 對象 9 function removeTr(aNoe){ 10 //獲取 a 節點所在的的 tr 節點. 返回時是 jQuery 對象 11 var $trNode = $(aNoe).parent().parent(); 12 var textContent = $trNode.find("td:first").text(); 13 textContent = $.trim(textContent); 14 15 var flag = confirm("確定要刪除" + textContent + "的信息嗎?"); 16 if(flag){ 17 $trNode.remove(); 18 } 19 20 return false; 21 } 22 23 $("#employeetable a").click(function(){ 24 return removeTr(this); 25 }); 26 //給 submit 添加 onclick 響應事件，添加信息到 #employeetable tbody 中。 27 $("#addEmpButton").click(function(){ 28 $("<tr></tr>").append("<td>" + $("#name").val() + "</td>") 29 .append("<td>" + $("#email").val() + "</td>") 30 .append("<td>" + $("#salary").val() + "</td>") 31 .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>") 32 .appendTo("#employeetable tbody") 33 .find("a") 34 .click(function(){ 35 return removeTr(this) 36 }); 37 //添加完信息后，將 text 里的值置空。 38 $("#name").val(""); 39 $("#email").val(""); 40 $("#salary").val(""); 41 }); 42 }) 43 44 45 </script> 46 </head> 47 <body> 48 49 <center> 50 <br> <br> 添加新員工 <br> <br> name: <input type="text" 51 name="name" id="name" /> email: <input type="text" 52 name="email" id="email" /> salary: <input type="text" 53 name="salary" id="salary" /> <br> <br> 54 <button id="addEmpButton" value="abc">Submit</button> 55 <br> <br> 56 <hr> 57 <br> <br> 58 <table id="employeetable" border="1" cellpadding="5" cellspacing=0> 59 <tbody> 60 <tr> 61 <th>Name</th> 62 <th>Email</th> 63 <th>Salary</th> 64 <th> </th> 65 </tr> 66 <tr> 67 <td>Tom</td> 68 <td>tom@tom.com</td> 69 <td>5000</td> 70 <td><a href="deleteEmp?id=001">Delete</a></td> 71 </tr> 72 <tr> 73 <td> 74 Jerry 75 </td> 76 <td>jerry@sohu.com</td> 77 <td>8000</td> 78 <td><a href="deleteEmp?id=002">Delete</a></td> 79 </tr> 80 <tr> 81 <td>Bob</td> 82 <td>bob@tom.com</td> 83 <td>10000</td> 84 <td><a href="deleteEmp?id=003">Delete</a></td> 85 </tr> 86 </tbody> 87 </table> 88 </center> 89 90 </body>
注意：1、jQuery 對象 調用 jQuery 提供的方法的返回值，如果是一個對象的話，那么這個對象一定是一個 jQuery 對象。
2、找第一個 td 子節點的文本值，find() 方法：查找子節點，返回值為子節點對應的 jQuery 對象。
練習六：品牌展示
結果圖：
、 
代碼：
1 <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> 2 <script type="text/javascript"> 3 /* 4 var $category = $("li:gt(5):lt(10)"); 5 此時的 lt 是在 li:gt(5) 基礎上進行的. 6 */ 7 $(function(){ 8 //1. 需要選擇從 "富士" - "愛國者" 的所有 li: $category 9 //var $category = $("li:gt(5):lt(6)"); lt是在gt 的基礎上 選擇，所以是6，不是10. 10 //或者這么寫 11 var $category = $("li:gt(5):not(:last)"); 12 13 //2. 把他們隱藏. 14 $category.hide(); 15 16 //3. 為 .showmore 添加一個 onclick 響應函數(取消默認行為) 17 $(".showmore").click(function(){ 18 //4. 若 $category 是隱藏的. 使用 is 19 if($category.is(":hidden")){ 20 //4.1 $category 顯示 21 $category.show(); 22 23 //4.2 使 "佳能", "尼康", "奧林巴斯" 變為高亮顯示: 24 //添加 .promoted 的 class 25 $("li:contains('佳能'), li:contains('尼康'), li:contains('奧林巴斯')").addClass("promoted"); 26 27 //4.3 .showmore > a > span 的文字變為: 顯示精簡品牌 28 $(".showmore>a>span").text("顯示精簡品牌"); 29 30 //4.4 .showmore > a > span 的 background 變為: 31 //url(img/up.gif) no-repeat 0 0 32 $(".showmore>a>span").css("background", "url(img/up.gif) no-repeat 0 0"); 33 34 return false; 35 }else{ 36 //5. 若 $category 是顯示的. 37 $category.hide(); 38 $("li").removeClass("promoted"); 39 $(".showmore>a>span").text("顯示全部品牌"); 40 $(".showmore>a>span").css("background", "url(img/down.gif) no-repeat 0 0"); 41 return false; 42 } 43 }); 44 }) 45 </script> 46 </head> 47 <body> 48 <div class="SubCategoryBox"> 49 <ul> 50 <li ><a href="#">佳能</a><i>(30440) </i></li> 51 <li ><a href="#">索尼</a><i>(27220) </i></li> 52 <li ><a href="#">三星</a><i>(20808) </i></li> 53 <li ><a href="#">尼康</a><i>(17821) </i></li> 54 <li ><a href="#">松下</a><i>(12289) </i></li> 55 <li ><a href="#">卡西歐</a><i>(8242) </i></li> 56 <li ><a href="#">富士</a><i>(14894) </i></li> 57 <li ><a href="#">柯達</a><i>(9520) </i></li> 58 <li ><a href="#">賓得</a><i>(2195) </i></li> 59 <li ><a href="#">理光</a><i>(4114) </i></li> 60 <li ><a href="#">奧林巴斯</a><i>(12205) </i></li> 61 <li ><a href="#">明基</a><i>(1466) </i></li> 62 <li ><a href="#">愛國者</a><i>(3091) </i></li> 63 <li ><a href="#">其它品牌相機</a><i>(7275) </i></li> 64 </ul> 65 <div class="showmore"> 66 <a href="more.html"><span>顯示全部品牌</span></a> 67 </div> 68 </div> 69 </body>
over。