A-A+

jQuery选择器详解

2015年05月07日 12:47 汪洋大海 暂无评论 阅读 209 views 次
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元素的第024... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)   偶数
$("tr:odd")                选择所有的tr元素的第135... ...个元素    奇数
$("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" /> ]

给我留言