详解Jquery选择器

1、常见的选择器

id，类，标签选择器。

$("#a1")

$(".myclass")

$("div")

2、组合选择器

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

3、继承选择器

$("#d1.myclass")

找到的对应的html元素为

<divid='#d1'><aclass="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#seloption: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)//匹配所有的图像域，例如<inputtype="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代码

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

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

</div>

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

$("#d1divdiv")'前面父级后面是子集
$("#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中添加内容GoodMoringChina!!怎么做？这里必须用到end(),用于返回到根元素上，必须用end()才能返回，因为如果不用end，那么返回的只是当前的元素。

<divid="d1">
<div></div>
<div></div>
</div>

<divid="d2">
<div></div>
<div></div>
</div>

jquery代码如下：

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