选择角色5年前

$("*"); //所有元素 $("#id"); //id="id" 的元素 $(".class"); //所有 class="class" 的元素 $("p"); //所有 element 中 <p> 元素 $("#id,.class,element"); //多个元素 $(".class1.class2"); //所有 class="class1" 且 class="class2" 的元素 $("父级元素 > 子级元素"); //给定的父级元素下匹配所有的子元素 $("祖先元素 后代元素"); //给定的祖先元素下匹配所有的后代元素 $("prev + next"); //(同级的元素)匹配紧跟在prev元素后面的next元素 $("prev ~ siblings"); //匹配prev元素后面所有的siblings元素 $("p:first"); //第一个 <p> 元素 $("p:last"); //最后一个 <p> 元素 $(":gt(x)"); //大于值x的元素 $(":lt(x)"); //小于值x的元素 $(":eq(x)"); //等于值x的元素 $("tr:even"); //所有偶数 <tr> 元素 $("tr:odd"); //所有奇数 <tr> 元素 $(":not(selector)"); //匹配不是selector的所有元素 $(":contains(text)"); // 匹配包含给定文本（text）的元素 $(":has(selector)"); //匹配包含特定选择器元素的元素 $(":empty"); //匹配不含有内容的元素（即 不包含子元素或者文本的空元素） $(":parent"); //匹配含有子元素或者文本的元素 $("[属性名]"); //匹配包含给定属性的元素 $("[attribute=value]"); //匹配给定属性是某个特定值的元素 $("[attribute！=value]"); //匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素 $("[attribute ^= value]"); //匹配给定属性是以某些值开始的元素 $("[attribute $= value]"); //匹配给定属性是以某些值结尾的元素 $("[attribute *= value]"); //匹配给定属性包含某些值的元素 $("attrSel[1] attrSel[1] attrSel[1]"); //复合选择器，需要同时满足多个条件时使用 $(":enabled"); //所有激活的input元素（可以使用的input元素） $(":disabled"); //所有禁用的input元素（不可以使用的input元素） $(":selected"); //所有被选取的元素，针对于select元素 $(":checked"); //所有被选中的input元素

0

李涛6年前

选择器总结笔记 选择器 id选择器 语法：$('#id名') 理解：和CSS语法一样 class选择器 语法：$('.class名') 理解：和CSS语法一样 元素选择器 语法：$('元素名') 理解：和css语法一样 所有元素选择器 语法：$('*') 理解：和css语法一样 页面中多个选择器 语法：$('#id名 class名 元素名') 理解：中间用空格分开，可以设置多个不同的选择器 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 层级选择器 子元素选择器 语法：$('父级元素>子级元素') 理解：匹配所有属于E元素的子元素F 后代元素选择器 语法：$('祖先元素 后代元素') 理解：匹配所有属于E元素后代的F元素，E和F之间用空格分隔 相邻兄弟选择器 语法：$('E元素 + F元素') 理解：匹配所有紧随E元素之后的同级元素F（只能同级元素） 一般兄弟选择器 语法：$('E元素~F元素) 理解：匹配将E元素后面的所有兄弟元素F >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 顺序选择器 第一个元素 语法：$(':first') 理解：匹配全文的第一个元素)$('p:first') 最后一个元素 语法：$(':last') 理解：匹配全文的最后一个元素$('p':last') 盒子内第一个元素 语法：$('父级元素 > 子元素:first') 理解：匹配盒子内第一个元素 $('父级元素>p:first') 盒子内最后一个元素 语法：$('父级元素 > 子元素:last') 理解：匹配盒子内最后一个元素 $('父级元素>p:last') --------------------------------------------------------------------------------------------------------- 比较选择器 (x的顺序是从0开始的) 表示大于值x的元素 语法：$(':gt(x)') 理解：如$('p:gt(1)') 匹配页面中P标签顺序除了第1/2个之后的所有P标签 表示小于值X的元素 语法：$(':lt(x)') 理解：如$('p:lt(2)') 匹配页面中P标签顺序除了第1/2/3的的P标签 表示等于值X的元素 语法：$(':eq(x)') 理解：如$('p:eq(5)') 匹配页面中P标签显示顺序第6个P标签 如果选择某一个div里面的可以加上父级选择器 $('div> p:gt(1)') --------------------------------------------------------------------------------------------------- 奇数偶数 奇数顺序 语法：$(':odd') 理解：$('li:odd') 匹配li元素顺序为奇数的li元素 偶数顺序 语法：$(':even') 理解：$('li:even')匹配li元素顺序为偶数的li元素 ---------------------------------------------------------------------------------------------------------- 非 排除ID名或class名以外的所有元素 语法：$('h2:not(#id名 或.class名)') 理解：匹配h2中不是此ID或CLASS名以外的的所有元素 $('.class_b>h2:not(#id_c)') 理解：匹配.class_b选择器下h2元素中不是id名：#id_c以外的所有元素 ----------------------------------------------------------------------------------------------------------- 内容选择器 匹配包含给定文本（text）的元素 语法：$(':contains(text)') 理解：如$('h2:contains(love)') 匹配h2本中包含love的h2元素 匹配包含特定选择器元素的元素 语法：$(':has(selector)') 理解：$('div:has(h4)')匹配div中包含h4元素 匹配不含有内容的元素 语法：$(':empty') 理解：$('div:empty')匹配没有子元素同时也为空的div（即不包含子元素或者文本的空元素） 匹配含有子元素或者文本的元素 语法：$(':parent') 理解：$(':parent') 匹配有子元素或者文本的元素 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 属性选择器（主要适用于input框） 包含给定属性的元素 语法：$('[属性名]') 理解：匹配包含给定属性的元素 如$('input[type]') 匹配input框下含有type属性的元素 属性是某个特定值的元素 语法：$('[attribute=value]') 理解：匹配给定属性是某个特定值的元素,如$('input[type=button]') input框下type=button的名的元素 不含有指定值的属性元素 语法：$('[attribute!=value]')理解：匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素 $('input[type!=text]') type不等于text的元素 给定属性是以某些值开始的元素 语法:$('[attribute ^= value]') 理解:匹配给定属性是以某些值开始的元素 $('input[type ^=t ]') 以t开始的input type元素 给定属性是以某些值结尾的元素 语法:$('[attribute $= value]') 理解:匹配给定属性是以某些值结尾的元素 $('input[type $=n ]') 以n结尾的input type名元素 给定属性包含某些值的元素 语法: $('[attribute *= value]') 理解:匹配给定属性包含某些值的元素 如：$('input[type *=o ]') type名包含o的元素 复合选择器 语法：$('attrSel[1] attrSel[1] attrSel[1]') 理解：中间用空格分开，需同时满足多个条件时使用。$('input[id][name*=n]') input框包含id，且name名包含n的元素。 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 表单选择器 所有激活的input元素 语法：$(':enabled') 理解:如$(':enabled')或$('input:enabled') 匹配可以使用的input元素。 所有禁用的input元素 语法：$(':disabled') 理解:$(':disabled') 或$('input:disabled')匹配不可以使用禁止input元素，input框属性为disabled=“disabled”就是禁止使用的意思。 下拉框被选取的元素 语法：$(':selected') 理解:所有被选取的元素，针对于下拉框元素,下拉框<select><option selected="selected">双鱼座</option></select> selected是选择的意思 选择框被撞中的元素 语法：$(':checked') 理解：匹配所有被选中的input元素 如<input type="checkbox" name="" checked> checkbox是选择框 checked=“checked”是选择的意思

0