A-A+
jQuery选择器详解
jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器： $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span") 过滤掉：checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 偶数 $("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素 奇数 $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 $("td:gt(4)") 选择td元素中序号大于4的所有td元素 (从零开始，不包含4) $("td:ll(4)") :ll(4) 选择td元素中序号小于4的所有的td元素 (从零开始，不包含4) $(":header") :header 选择器选取所有标题元素（h1 - h6）。 示例：array("title"=>array(":header","text")); 遇见从设定区域开始，遇见哪个h元素就采集哪个 $("div:animated") :animated 选择器用于匹配所有正在执行动画效果的元素 内容过滤选择器： $("div:contains('NET')") 选择所有div中含有NET文本的元素。 示例：array("title"=>array("div:contains('NET')","text")); <div>jQuery, .NET, CLR</dd><div>SEO</dt>只会选择 第一个div $("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组 示例： <td>不会取我，因为我有内容</td><td></td> $("div:has(p)") 选择所有含有p标签的div元素 即使p不是div的直系子元素，也会生效。 $("div td:parent") 选择所有div下的td为父节点的元素数组 空元素排除在外 示例：<div> <td>1</td> <td></td> <td>2</td> </div> 只会输出 1 2 可视化过滤选择器： $("div:hidden") 选择所有的被hidden的div元素 (:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。) $("div:visible") 选择所有的可视化的div元素 意为选取可见的元素(忽略不可见的) 属性过滤选择器： $("div[id]") 选择所有含有id属性的div元素 示例：a[title] <a href="#" title="b1a" >1</a> <a href="#" title="2bb">2</a> <a href="#" class=item>3</a> 3就不会被选取 $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 示例：同上title换成class 则 a[class=2bb] 选取第二个链接 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 同上相反 a[class!=2bb] 除第二个都选 结果 1 3 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 $('a[title^=b]') 选取的是 1 $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 $('a[title$=b]') 选取的是 2 $("input[name*='man']") 选择所有的name属性包含'news'的input元素 $('a[title*=b]') 选取的是 1 2 // 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的 $("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 意思同时满足这些条件 a[title^=b][class=item] 以title等于b开始 并且class=item 子元素过滤选择器： nth表示第n个，:nth-child就表示第n个child元素 它是从1开始的 $("ul li:nth-child(2)") 获取ul中 第x个 li 子元素 $("ul li:nth-child(odd)") 获取所有ul中，第奇数个li元素 $("ul li:nth-child(3n + 1)") 例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。 $("div span:first-child") 返回所有的div元素的第一个子节点的数组 $("div span:last-child") 返回所有的div元素的最后一个节点的数组 //需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。 $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 <div>1 <div>2 <div3>3</div> </div> </div> 示例$("div:only-child") 结果 3 表单元素选择器： $(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button $(":text") 选择所有的text input元素 等同于input[type=text] $(":password") 选择所有的password input元素 等同于$('input[type=password]') 取密码框元素 $(":radio") 选择所有的radio input元素 等同于$('input[type=radio]') 取单选框元素 示例<input type="radio" name="radio" value="国企"/> ---------------------------------------------------------------------- $(":checkbox") 选择所有的checkbox input元素 等同$('input[type=checkbox]') 若你想选择选中项 :checkbox（取复选框元素） :checkbox选择器和属性选择器$('input[type=checkbox]')等同 <script type="text/javascript"> $(document).ready(function() { $(':checkbox').each(function() { alert($(this).val()); }); // 等效代码 /* $('input[type=checkbox]').each(function() { alert($(this).val()); }); */ }); </script> 您的兴趣爱好： <input type="checkbox" />游泳 <input type="checkbox" />看书 <input type="checkbox" checked="checked" value="打篮球"/>打篮球 <input type="checkbox" checked="checked" value="电脑游戏"/>电脑游戏 上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法： $(':checkbox:checked').each(function() { alert($(this).val()); }); $('input[type=checkbox][checked]').each(function() { alert($(this).val()); }); $(':checked').each(function() { alert($(this).val()); }); ----------------------------------------- $(":submit") 选择所有的submit input元素 $('input[type=submit]') 取提交按钮元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $('input[type=reset]') 取重置按钮元素 $(":button") 选择所有的button input元素 $('input[type=button]') 取按钮元素 $(":file") 选择所有的file input元素 $('input[type=file]') 取上传域元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 $('input[type=hidden]') 取不可见元素 表单元素过滤选择器： $(":enabled") 选择所有的可操作的表单元素 匹配范围包括input, select, textarea。 $(":disabled") 选择所有的不可操作的表单元素 匹配范围包括input, select, textarea。 $(":checked") 选择所有的被checked的表单元素 取选中的单选框或复选框元素 $("select option:selected") 选择所有的select的option子元素中被selected的元素 ( :selected 取下拉列表被选中的元素) selected当前是哪个就选哪个 选取一个 name 为”S_03_22″的input text框的上一个td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始，并且不是以”_R”结尾的 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一个名为 radio_01的radio所选的值 $(”input[@ name =radio_01][@checked]“).val(); $("A B") 查找A元素下面的所有子节点，包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点 例子：找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点 例子：匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 例子：匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") // 等价代码$('label').next('input'); 结果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 例子：找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") // 等价代码$('.inside').nextAll('div'); 有点表示class元素 没点直接是<开头 结果: [ <input name="none" /> ] |
布施恩德可便相知重
微信扫一扫打赏
支付宝扫一扫打赏