选择器允许你对元素组合单个元素进行操作;CSS3中的选择器在jQuery中也适用,如id选择器、class选择器、标签选择器、属性选择器、后代选择器等等。
将选择器作为参数传给$()或者jQuery(),返回包含零个或一个DOM元素集合的jQuery对象。
基本选择器(*、id、class、element、selector1,selector2,selectorN)
1 // ?选择所有元素 2 $("*") 3 ?4 // ?选择id为app的元素 5 $("#app") 6 ?7 // 选择class为app的元素 8 $(".app") 9 10 // 选择所有div元素11 $("div")12 13 // 选择所有div、p、li元素14 $("div,p,li")
层级选择器(后代选择器、兄弟元素选择器)
1 // ??后代选择器,包括子子孙孙 2 $("form input") ???// ?选择form中的所有input元素 3 $("#main div") ???// ?选择id为main的元素中的所有div 4 ?5 // ??子元素选择器,只选择儿子辈的元素 6 $("form > input") ??// ?选择form中所有儿子为input的元素 7 ?8 // ??兄弟元素选择器,必须具有相同的父元素 9 $("div ~ p") ???// ?选择div元素后面的且具有相同父元素的所有p元素10 $("div + p") ???// ?选择紧跟在div元素后的p元素,即相邻的p元素,如:<div></div><p></p>(假设其具有相同父元素)
伪类选择器
1 ?// ?基本过滤选择器 2 ?$("tr:first") ??????????????// ?选择所有tr元素中的第一个 ?3 ?$("tr:last") ???????????????// ?选择所有tr元素中的最后一个 ?4 ?$("input:not(:checked)") ???// ?不包含checked的选择器的所有的input元素 ?5 ?$("tr:even") ???????????????// ?选择所有的tr元素中索引为偶数的tr元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) ?6 ?$("tr:odd") ????????????????// ?选择所有的tr元素中索引为奇数的tr元素 7 ?$("td:eq(2)") ??????????????// ?选择所有td元素中索引为2的td元素 ?8 ?$("td:gt(4)") ??????????????// ?选择td元素中索引大于4的所有td元素 ?9 ?$("td:lt(4)") ??????????????// ?选择td元素中索引小于4的所有的td元素 10 ?$(":header") 11 ?$("div:animated") 12 ?13 ?// ?内容过滤选择器14 ?$("div:contains(‘John‘)") ???// ?选择所有div中含有John文本的元素 15 ?$("td:empty") ???????????????// ?选择所有的空(也不包括文本节点)的td元素16 ?$("div:has(p)") ?????????????// ?选择所有含有p标签的div元素 17 $("td:parent") ???????????????// ?选择所有含有子元素或者文本的td元素18 19 // ?可视化过滤选择器20 ?$("div:hidden") ???????????// ?选择所有的被hidden的div元素 21 ?$("div:visible") ??????????// ?选择所有的可视化的div元素 22 ??23 // ?子元素过滤选择器24 ?$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 25 ?$("div span:first-child") ?????????// ?选择div中的第一个孩子且标签名为span元素26 ?$("div span:last-child") ??????????// ?选择div中的最后一个孩子且标签名为span元素27 ?$("div button:only-child") ????????// ?选择div中button是唯一子元素的button元素28 ?$("div span:nth-of-type(2)") ??????// ?选择所有div中的第二个span元素 29 ?30 //表单元素选择器: 31 ?$(":input") ???????????????// ?选择所有的表单输入元素,包括input, textarea, select 和 button 32 ?$(":text") ????????????????// ?选择所有的text input元素 33 ?$(":password") ????????????// ?选择所有的password input元素 34 ?$(":radio") ???????????????// ?选择所有的radio input元素 35 ?$(":checkbox") ????????????// ?选择所有的checkbox input元素 36 ?$(":submit") ??????????????// ?选择所有的submit input元素 37 ?$(":image") ???????????????// ?选择所有的image input元素 38 ?$(":reset") ???????????????// ?选择所有的reset input元素 39 ?$(":button") ??????????????// ?选择所有的button input元素 40 ?$(":file") ????????????????// ?选择所有的file input元素 41 ?$(":hidden") ??????????????// ?选择所有类型为hidden的input元素或表单的隐藏域 42 43 //表单元素过滤选择器44 ?$(":enabled") ?????????????????// ??选择所有的可操作的表单元素 45 ?$(":disabled") ????????????????// ??选择所有的不可操作的表单元素 46 ?$(":checked") ?????????????????// ??选择所有的被checked的表单元素 47 ?$("select option:selected") ???// ??选择所有的select的子元素中被selected的元素
属性选择器
1 // ??选择带有某个属性的元素 2 $("[name]") ???// ?选择所有带有name属性的元素 3 $("div[id]") ?????// ?选择所有带有id属性的div元素 4 ?5 // ???选择指定属性值的元素 6 $("[type=‘text‘]") ???// ?选择所有type属性为text的元素 7 $("a[href=‘button.html‘]") ???// ?选择所有href属性为button.html的a元素 8 $("[type!=‘button‘]") ???// ?选择所有type属性不为button的元素 9 $("[type$=‘button‘]") ???// ?选择所有type属性以button结尾的元素10 $("[type^=‘button‘]") ???// ?选择所有type属性以button开始的元素11 $("[type|=‘button‘]")12 $("[type*=‘button‘]")13 $("[type~=‘button‘]")
jQuery之选择器
原文地址:http://www.cnblogs.com/iyunpeng/p/7597253.html