id选择器 $("#d") 选中id为d的元素
标签选择器 $(“p”) 选中标签为p的元素
类选择器 $(".c") 选中class为c的元素
并集选择器 $("#d,.c") 同时选中id为d和class为c的元素
交集选择器 $(“div.c”) 选中div且div类名为c的元素
<style type="text/css"> .c{ background-color:#00FF00; } </style> </head> <script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ $("#d1").css("background-color","#990000").css("color","#777777") $(".c1").addClass("c") $("p").css("background-color","#999999") $("#d1,.c1").css("font-size","22px") $("li.c2").css("background-color","#324567") }) </script> <body> <body > <ul> <li id="d1">第一个</li> <li>第二个</li> <li class="c1">第三个</li> <li class="c2">第四个</li> </ul> <p>锻炼身体</p> </body> </html>后代选择器 $("#menu span") 选中#menu下的span标签
子选择器 $("#menu>span") 选中#menu下的子标签span
相邻元素选择器 $(“h2+dl”) 选中h2标签之后的同辈标签dl
同辈元素选择器 $(“h2~dl”) 选中h2标签后的所有dl标签
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ $("ul li").css("font-size","22px") //子所有代 $("ul>li").css("background-color","#999999")//子一代 $("#d1+ul").css("color","#FF0000")//之后第一个邻居 $("#d1~ul").css("line-height","64px")//之后所有个邻居 }) </script> <body> <ul> <li>考试 2</li> <li>学生 2</li> </ul> <ul id="d1"> <li>学校</li> <ol> <li>先锋软件学院</li> <li>南昌大学</li> <li>江西师大</li> </ol> <li>工厂</li> <li>医院</li> </ul> <ul> <li>考试</li> <li>学生</li> </ul> <ul> <li>考试 1</li> <li>学生 1</li> </ul> </body>选中包含特定属性的元素 $("[href]") 选中包含href属性的元素
选中等于给定属性值的元素 $("[href=’#’]") 选中href属性的属性值为#的元素
选中不能给定属性值的元素 $("[href!=’#’]") 选中href属性的属性值不为#的元素
选中给定属性值以特定值开头的元素 $("[href^=’#’]") 选中href属性的属性值以#开头的元素
选中给定属性值以特定值结尾的元素 ( " [ h r e f ("[href ("[href=’#’]") 选中href属性的属性值以#结尾的元素
选中给定属性值包含特定值开头的元素 $("[hre*=’#’]") 选中href属性的属性值包含#的元素
选中满足多个条件的符合属性的元素 $(“li[id][title=‘新闻要点’]”) 选中含有id属性且title属性值为新闻要点的li元素
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ $("a[href]").css("background-color","#cccccc") $("a[href='#']").css("color","#ff0000") $("ul[id='d1'] li[id^='dd']").css("font-size","32px") $("[id$='d2']").css("border","10px solid #0000ff") $("[id*='a']").css("font-family","黑体") }) </script> <body> <h2><a href="#">搜狐</a></h2> <ul id="d2"> <li>考试 2</li> <li>学生 2</li> </ul> <ul id="d1"> <li>学校</li> <ol> <li id="dd1" title="xianfeng">先锋软件学院</li> <li id="dd2">南昌大学</li> <li>江西师大</li> </ol> <li>工厂</li> <li>医院</li> </ul> <ul id="a1"> <li>考试</li> <li>学生</li> </ul> <ul id="a2"> <li>考试 1</li> <li>学生 1</li> </ul> </body>选取第一个元素 $(“li:first”) 选取所有li元素中的第一个li元素
选取最后一个元素 $(“li:last”) 选取所有li元素中最后一个li元素
选取索引是偶数个的元素(索引从0开始) $(“li:even”) 选取索引是偶数的li元素
选取索引是奇数个的元素(索引从0开始) $(“li:odd”) 选取索引是奇数的li元素
选取索引等于index的元素(索引从0开始) $(“li:eq(index)”) 选取索引等于1的li元素
选取索引大于index的元素(索引从0开始) $(“li:gt(1)”) 选取索引大于1的li元素(不包括1)
选取索引小于index的元素(索引从0开始) $(“li:lt(1)”) 选取索引小于1的li元素(不包括1)
选取去除与给定选择器匹配的元素 $(“li:not(.three)”) 选取class不是three的li元素
选取当前获取焦点元素 $(":focus") 选取当前获取焦点的元素
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ //选取指定第一个tr元素 $("tr:first").css("background-color","#aaaaaa") //选取最后一个tr元素 $("tr:last").css("background-color","#ff0000") //选取指定索引位置处的元素 $("tr:eq(1)").css("border","#00ff00 solid 20px") //选取索引值为偶数tr元素 $("tr:even").css("font-size","32px") //选取索引值为奇数tr元素 $("tr:odd").css("font-family","黑体") //选取id不等于d1的所有tr元素 $("tr:not('#d1')").css("color","#873ff8"); //选取获得焦点的img元素 $("img:focus").css("border","12px solid #873ff8"); }) </script> <body> <h2>第二号</h2> <h3>第三号</h3> <table border="1"> <tr><td>学号</td><td>姓名</td><td>成绩</td></tr> <tr><td>NC001</td><td>李四</td><td>36</td></tr> <tr id="d1"><td>NC002</td><td>王武</td><td>54</td></tr> <tr><td>NC003</td><td>徐林</td><td>23</td></tr> <tr><td>NC004</td><td>刘海东</td><td>41</td></tr> <tr><td>NC005</td><td>马云</td><td>84</td></tr> </table> <br/> <img src="../QQ图片20190530124206.gif" height="200" width="180" /> </body>选取可见性元素 :visible $(":visible") 选取所有可见元素
选取所有隐藏元素 :hidden $(":hidden") 选取所有隐藏方法
show() 控制元素显示
hide() 控制元素隐藏
<script language="javascript" src="../js/jquery-1.8.2.js"></script> <script language="javascript"> $(function(){ $("#hidden").click(function(){ $("table").hide() //隐藏表格 }) $("#visible").click(function(){ $("table").show() //显示表格 }) }) </script> <body> <button id="hidden">隐藏</button> <button id="visible">显示</button> <table border="1"> <tr><td>学号</td><td>姓名</td><td>成绩</td></tr> <tr><td>NC001</td><td>李四</td><td>36</td></tr> <tr><td>NC002</td><td>王武</td><td>54</td></tr> <tr><td>NC005</td><td>马云</td><td>84</td></tr> </table> </body>