jQuery：一些小练习
练习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。
