1，jQuery选择器
1.1：层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> $(function(){ //1、获取id为main的span标签 内 所有的div标签 var arr1 = $("#main div"); //alert(arr1.length); //2、获取id为main的span标签 内 子元素div标签 var arr2 = $("#main>div"); //alert(arr2.length); //3、获取id为main的span标签 后 第一个div兄弟标签 var x3 = $("#main+div"); //alert(x3[0].innerHTML); //4、获取id为main的span标签 后 所有的div兄弟标签 var arr4 = $("#main~div"); alert(arr4.length); }); </script> </head> <body> <span id="main"> <div>111111</div> <div>222222</div> <div>333333</div> <span> <div>44444</div> </span> </span> <div>55555</div> <span> <div>66666</div> </span> <div>77777</div> </body> </html>
目标：熟练掌握其他选择器
课堂练习题：
//5、获取内容体为44444的div标签 var div = $("#main>span>div"); //alert(div[0].innerHTML); //6、获取class值为hehe标签，及标签下的所有span标签 //$(".hehe span"); //7、获取所有font标签， 以及font标签中的子标签span //$("font>span"); //8、获取id为xixi标签，及该标签下 所有 class值为hehe的标签 //$("#xixi .hehe"); //9、仅想获取<div>666666</div> //$("#main+span>div");
1.2：属性选择器、通配符选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> $(function(){ //1、获取所有存在type属性的标签 var arr = $("[type]"); //alert(arr.length);//6 //2、获取所有type属性为radio的标签 var arr2= $("[type='radio']"); //alert(arr2.length); //3、获取所有type属性含有o的标签 var arr3 = $("[type*='o']"); //alert(arr3.length); //4、获取所有input标签中的单选框，且name为sex的标签 var arr4 = $("input[type='radio'][name='sex']"); //alert(arr4.length); //5、获取所有input标签中，type不为text的标签 var arr5= $("input[type!='text']"); alert(arr5.length); }); </script> </head> <body> 用户名：<input type="text" name="uname" value="小刘"/><br /> 密码：<input type="password" name="pwd" value="123"/><br /> 性别：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br /> 是否VIP：<input type="radio" name="vip" value="no" />不是 <input type="radio" name="vip" value="yes" />是<br /> </body> </html>
课堂练习题：
//课堂练习题 //1、获取 所有的复选框，name属性包含 a //$("[type='checkbox'][name*='a']"); //2、获取 所有的按钮，按钮名字 包含'提交' //$("[type='button'][value*='提交']"); //3、获取id=hehe标签 下所有的 选择框<select> ，筛选出哪个选择框name属性=city //$("#hehe select[name='city']");
1.3：基本过滤选择器
目标：熟练使用基本过滤选择器进行筛选操作
/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> $(function(){ //1、在所有DIV标签中，获取第一个div var d1 = $("div:first"); //alert(d1[0].innerHTML); //2、在所有DIV标签中，获取最后一个div var d2 = $("div:last"); //alert(d2[0].innerHTML); //3、在所有DIV标签中，获取所有偶数位的div var arr3 = $("div:even"); /*arr3.each(function () { alert(this.innerHTML); });*/ //4、在所有DIV标签中，获取所有奇数位的div var arr4 = $("div:odd"); /*arr4.each(function () { alert(this.innerHTML); });*/ //5、在所有DIV标签中，获取除了第一位以外所有的div var arr5 = $("div:not(div:first)"); /*arr5.each(function () { alert(this.innerHTML); });*/ //6、在所有DIV标签中，获取索引等于1的div var d6 = $("div:eq(1)"); //alert(d6[0].innerHTML); //7、在所有DIV标签中，获取索引大于1的div var arr7 = $("div:gt(1)"); /*arr7.each(function () { alert(this.innerHTML); });*/ //8、在所有DIV标签中，获取索引小于1的div var arr8 = $("div:lt(1)"); /*arr8.each(function () { alert(this.innerHTML); });*/ }); </script> </head> <body> <div>11111111，索引是0</div> <div>22222222，索引是1</div> <div>33333333，索引是2</div> <div>44444444，索引是3</div> <div>55555555，索引是4</div> <div>66666666，索引是5</div> <div>77777777，索引是6</div> <div>88888888，索引是7</div> </body> </html>
课堂练习题：
//课堂练习 //1、获取所有font标签中，除了最后一个font标签外，所有的font标签 //$("font:not(font:last)"); //2、获取所有class=hehe的标签，并将这些标签中的第一个拿到 //$(".hehe:first"); //3、获取id=x的标签，拿到这个标签下所有name=hobby的复选框， // 将这些复选框中的偶数位拿到【综合】 //$("#x input[type='checkbox'][name='hobby']:even");
1.4：表单属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> $(function(){ //获取选中的复选框 var arr1 = $("input[type='checkbox']:checked"); /*arr1.each(function () { alert(this.value); });*/ //获取国家下拉框中，被选中的option var arr2 = $("#country>option:selected"); /*arr2.each(function () { alert(this.innerHTML); });*/ //获取可用的表单输入项 var arr3 = $("input:enabled"); /*arr3.each(function () { alert(this.value); });*/ //获取不可用的表单输入项 var arr4 = $("input:disabled"); alert(arr4.length); }); </script> </head> <body> <h1>不可用的表单输入项</h1> <input type="text" disabled="disabled" /> <input type="button" value="不可用按钮" disabled="disabled" /> <h1>复选框</h1> <input type="checkbox" name="hobby" value="code"/>编程 <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳 <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读 <hr /> <h1>下拉选择框</h1> 城市：<select id="city"> <option value="">请选择</option> <option value="bj">北京</option> <option value="sh">上海</option> </select> <hr /> 国家：<select id="country" multiple="multiple"> <option value="China" selected="selected">中国</option> <option value="America" selected="selected">美国</option> <option value="Russia">俄罗斯</option> <option value="England">英国</option> </select> </body> </html>
课堂练习题：
//课堂练习题： //1、获取id为x标签下，所有没有被选中的复选框【进阶】 //思路：先获取被选中复选框，进行not排除 $("#x input[type='checkbox']:not(#x input[type='checkbox']:checked)"); //2、获取form标签下，所有禁用的按钮【进阶】 //思路：先form 再按钮 最后筛选 :disabled $("form input[type='button']:disabled"); //3、获取city下拉框内，所有没有被选中的选项【进阶】 //思路：先下拉框，然后在获取选项 进行not排除（被选中选项） $("#city option:not(#city option:selected)"); //4、获取class=hehe的标签下，所有 未被选中 的 禁用 复选框【困难】 //思路：先.hehe标签，所有复选框 排除被选中的，筛选被禁用的 $(".hehe input[type='checkbox']:not(.hehe input[type='checkbox']:checked):disabled");
