jQuery选择器
1.给网页所有<p>标签加上点击事件.
<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <body> <p>测试1</p> <p>测试2</p> <script type="text/javascript"> $("p").click(function() { alert("hello"); }); </script> </body> </html>
2.使表格隔行变色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <body> <!-- <p>测试1</p> <p>测试2</p> --> <table id="tb"> <tbody> <tr><td>第一行</td><td>第一行</td></tr> <tr><td>第二行</td><td>第二行</td></tr> <tr><td>第三行</td><td>第三行</td></tr> <tr><td>第四行</td><td>第四行</td></tr> <tr><td>第五行</td><td>第五行</td></tr> <tr><td>第六行</td><td>第六行</td></tr> </tbody> </table> <script type="text/javascript"> $("#tb tbody tr:even").css("backgroundColor","#888"); </script> </body> </html>
3.对多选框进行操作,输出选择的多选框的个数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <body> <input type="checkbox" value="1" name="check" checked="checked"> <input type="checkbox" value="2" name="check"> <input type="checkbox" value="3" name="check" checked="checked"> <input type="button" value="你选择的个数" id="btn"> <script type="text/javascript"> $("#btn").click(function(){ var items = $("input[name='check']:checked") alert("选择的个数为"+items.length); }); </script> </body> </html>
4. 折叠--》显示全部(部分高亮)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> *{margin: 0;padding: 0;} body{font-size: 12px;text-align: center;} a{color:#04D;text-decoration:none;} a:hover{color: #F50;text-decoration:underline; } .SubCategoryBox{width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;} .SubCategoryBox ul{list-style: none} .SubCategoryBox ul li{display: block;float: left;width: 200px;line-height: 20px;} .showmore{clear: both;text-align: center;padding-top: 10px} .showmore a{display: block;with:120px;margin:0 auto;line-height: 24px;border: 1px} .showmore a span{padding-left: 15px;} .promoted a {color: #F50;} </style> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>(30440)</i> </li> <li><a href="#">索尼</a><i>(27220)</i> </li> <li><a href="#">三星</a><i>(20808)</i> </li> <li><a href="#">尼康</a><i>(17821)</i> </li> <li><a href="#">松下</a><i>(12289)</i> </li> <li><a href="#">卡西欧</a><i>(8242)</i> </li> <li><a href="#">富士</a><i>(14894)</i> </li> <li><a href="#">柯达</a><i>(9520)</i> </li> <li><a href="#">宾得</a><i>(2195)</i> </li> <li><a href="#">理光</a><i>(4114)</i> </li> <li><a href="#">奥林巴斯</a><i>(12205)</i> </li> <li><a href="#">明基</a><i>(1466)</i> </li> <li><a href="#">爱国者</a><i>(3091)</i> </li> <li><a href="#">其他品牌相机</a><i>(7275)</i> </li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> <script type="text/javascript">$(function () { var $category= $("ul li:gt(5):not(:last)"); $category.hide(); var $toggleBtn=$("div.showmore>a"); $toggleBtn.click(function () { if ($category.is(":visible")){ $category.hide(); $(this).find("span") .text("显示全部品牌"); $('ul li ').removeClass("promoted"); } else { $category.show(); $(this).find('span') .text("精简显示品牌"); $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); } return false; }) }) </script> </body> </html>