详解Jquery选择器

1、常见的选择器

id，类，标签选择器。

$("#a1")

$(".myclass")

$("div")

2、组合选择器

$("#a1,#a3,#a4,p,.myclass")

3、继承选择器

$("#d1 .myclass")

找到的对应的html元素为

<div  id='#d1'><a class="myclass">链接</a></div>

4、按照正则表达式进行选取

$(":checkbox[id^='ssss'][id$='xxxx']").each(function(){
　　　　$(this).attr("checked", checked);
　　});
　　// 以ssss开头或者以xxxx结束
　　$(":checkbox[id^='ssss'],[id$='xxxx']").each(function(){
　　　　$(this).attr("checked", checked);
　　});

5、选取表单元素

radio

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

select

$('select#sel option:selected').val();
$('select#sel').find('option:selected').val();

6、table操作

$(renderTo).find('tr:has("th"):last').nextAll().remove();

7、表单对象获取

$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
---------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面这两个属于属于二级选择器。跟上面的不是一类，这个属于小类
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表

8、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt

9、层级元素获取

我们看这一段html代码

 <div id="d1">
       <div id="d11">
           <div id="d1111"></div>
       </div>

       <div></div>
       <div></div>

   </div>

    <div id="d2"></div>
    <div id="d3"></div>

$("#d1 div div")  '前面父级 后面是子集
$("#d1>div") '获取#d1下面的所有的div元素,只是儿子节点，不包含孙子节点
$("#d1 + div") 'div元素后面的第一个 p元素 d2 同级别的
$("#d1 ~ div") 'div后面的所有的 div元素 d2,d3。同级别的

10、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
("Element:has(selector)")‘是否包含某个元素，如：

("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素

11、jquery 中的非操作

$('#p1').not('p')
$('p[id!='p1']')

12、end的用法。往d1和d2中添加内容 GoodMoring China!!怎么做？这里必须用到end(),用于返回到根元素上，必须用end()才能返回，因为如果不用end，那么返回的只是当前的元素。

<div id="d1">
        <div></div>
        <div></div>
    </div>

<div id="d2">
        <div></div>
        <div></div>
    </div>

jquery代码如下：

$(document).ready(function () {
$("#d1,#d2").find("div:last").html("GoodMoring China!!")
.end()
.find("div:first").html("GoodMoring China!!1")
});