JQuery选择器
1.通过标签类型选择 $("p") //选择所有的P标签
$("a") //选择所有的a标签
$("div") //选择所有的div标签
2.通过class选择元素
$(".red") //选择类名为red的类
3.通过ID选择元素
$("#red") //选择ID名为red的类
4.使用联合选择器更加准确的选择
$("p.red") //选择具有类名为red的p标签
5.使用组合选择器
$("p,.red,#red") //选择所有p标签 具有red类名的类 ID名为red的类
6.层次选择器
$("body span") //选择出body里面的所有span标签,包括被p包含的span标签
$("body>span") //只选择body下直接含有的span标签,不包括那些被p包含的span标签
7.选择不匹配某个选择器的元素 :not()
$("p:not(.foo)"); //选择所有类名不是foot的P标签元素
8.第一个元素和最后一个元素 :first和:last
选择第一个元素:$("p:first"); //选择第一个P标签
选择最后一个元素:$("p:last"); //选择第二个P标签
9.选择奇数偶数的元素 :even和:odd
选择奇数:$("p:even");
选择偶数:$("p:odd");
10.选择特定索引的元素
$("p:eq(5)") //选择第6个P标签
注意:索引是从0开始,0代表第一个元素,1代表第二个,2代表第三个......
11.内容过滤器 :contains() 区分大小写的,内容的大小写影响匹配
$("p:contains(哇塞,有头猪)"); //P标签里面含有“哇塞,有头猪”文本,才会被选中
12.匹配包含特定元素的元素 :has()
$("p:has(span)"); //选择里面含有span标签的p元素
13.选择空元素
$(":empty"); //不包含任何文本也不包含任何其他元素的空元素
14.选择父元素 :parent 只匹配那些拥有子元素的元素,不管它包含的是其他元素,还是文本内容
$("p:parent"); //所有拥有子元素的P标签
15.可见性过滤器 :hidden和:visible 分别用来选择被隐藏的元素和可看到的元素
选择所有可见的段落:$("p:visible");
选择所有不可见的段落:$("p:hidden");
16.属性过滤器 属性是位于标签内部用来对标签做进一步描述的东西(如class、href、ID、title等
①根据属性及属性的值选择元素
要匹配拥有特定属性及属性值的元素,用下面的格式将属性和值放到方括号当中([]):
[属性名=属性值]
要选择拥有class foo的所有元素,在控制台执行以下代码:
$("[class=foo]");
②选择没有某个属性的元素或属性值不匹配的元素
反之,要选择不匹配特定属性及其值的元素,在属性名和属性值之间的等号前插入一个感叹号(!):
[属性名!=属性值]
运行下面的代码,选出没有foo class的全部段落:
$("p[class!=foo]");
17.子元素过滤器
子元素过滤器是:even、:odd和:eq()的一种代用品。主要的区别在于这一套选择器起始索引为1而不是0
匹配奇数索引值/偶数索引值/特定索引值的元素 :nth-child()
4个参数选项:even、odd、index和equation
这个过滤器的索引也是从1而不是0开始,这样第一个元素的索引就是1而不是0,第2个元素是2,以此类推
选择第一个或最后一个子元素
:first-child和:last-child返回的元素集合可能含有不止一个匹配元素
$("p span:last"); //找回段落内的最后一个span
18.表单过滤器
按表单元素配匹类型
button、:checkbox、:file、:image、:input、:password、:radio、:submit和:text
$("input:radio"); //选择全部单选按钮
按匹配可禁用的表单元素 enabled和:disabled
$(":disabled"); //选择所有被禁用表单元素
匹配选中和未选中的表单元素 checked和:selected
$(":checked"); //当前选中的单选按钮
$("a") //选择所有的a标签
$("div") //选择所有的div标签
2.通过class选择元素
$(".red") //选择类名为red的类
3.通过ID选择元素
$("#red") //选择ID名为red的类
4.使用联合选择器更加准确的选择
$("p.red") //选择具有类名为red的p标签
5.使用组合选择器
$("p,.red,#red") //选择所有p标签 具有red类名的类 ID名为red的类
6.层次选择器
$("body span") //选择出body里面的所有span标签,包括被p包含的span标签
$("body>span") //只选择body下直接含有的span标签,不包括那些被p包含的span标签
7.选择不匹配某个选择器的元素 :not()
$("p:not(.foo)"); //选择所有类名不是foot的P标签元素
8.第一个元素和最后一个元素 :first和:last
选择第一个元素:$("p:first"); //选择第一个P标签
选择最后一个元素:$("p:last"); //选择第二个P标签
9.选择奇数偶数的元素 :even和:odd
选择奇数:$("p:even");
选择偶数:$("p:odd");
10.选择特定索引的元素
$("p:eq(5)") //选择第6个P标签
注意:索引是从0开始,0代表第一个元素,1代表第二个,2代表第三个......
11.内容过滤器 :contains() 区分大小写的,内容的大小写影响匹配
$("p:contains(哇塞,有头猪)"); //P标签里面含有“哇塞,有头猪”文本,才会被选中
12.匹配包含特定元素的元素 :has()
$("p:has(span)"); //选择里面含有span标签的p元素
13.选择空元素
$(":empty"); //不包含任何文本也不包含任何其他元素的空元素
14.选择父元素 :parent 只匹配那些拥有子元素的元素,不管它包含的是其他元素,还是文本内容
$("p:parent"); //所有拥有子元素的P标签
15.可见性过滤器 :hidden和:visible 分别用来选择被隐藏的元素和可看到的元素
选择所有可见的段落:$("p:visible");
选择所有不可见的段落:$("p:hidden");
16.属性过滤器 属性是位于标签内部用来对标签做进一步描述的东西(如class、href、ID、title等
①根据属性及属性的值选择元素
要匹配拥有特定属性及属性值的元素,用下面的格式将属性和值放到方括号当中([]):
[属性名=属性值]
要选择拥有class foo的所有元素,在控制台执行以下代码:
$("[class=foo]");
②选择没有某个属性的元素或属性值不匹配的元素
反之,要选择不匹配特定属性及其值的元素,在属性名和属性值之间的等号前插入一个感叹号(!):
[属性名!=属性值]
运行下面的代码,选出没有foo class的全部段落:
$("p[class!=foo]");
17.子元素过滤器
子元素过滤器是:even、:odd和:eq()的一种代用品。主要的区别在于这一套选择器起始索引为1而不是0
匹配奇数索引值/偶数索引值/特定索引值的元素 :nth-child()
4个参数选项:even、odd、index和equation
这个过滤器的索引也是从1而不是0开始,这样第一个元素的索引就是1而不是0,第2个元素是2,以此类推
选择第一个或最后一个子元素
:first-child和:last-child返回的元素集合可能含有不止一个匹配元素
$("p span:last"); //找回段落内的最后一个span
18.表单过滤器
按表单元素配匹类型
button、:checkbox、:file、:image、:input、:password、:radio、:submit和:text
$("input:radio"); //选择全部单选按钮
按匹配可禁用的表单元素 enabled和:disabled
$(":disabled"); //选择所有被禁用表单元素
匹配选中和未选中的表单元素 checked和:selected
$(":checked"); //当前选中的单选按钮