jQuery选择器

1.基本选择器

1)元素名称选择器

$("div")  --->匹配所有的div元素

(2)class选择器

$(".mini")  --->匹配所有class值为mini的元素

(3)ID选择器

$("#one")  ---->匹配所有的id为one的元素

(4)多元素选择器

$("span,#two,#one,.mini")

2.层级选择器

(1)后代选择器
$("div span")  匹配div内部所有的span元素

(2)子元素选择器
$("div>span")  匹配div内部所有的span子元素

(3)相邻兄弟选择器
$("#two+span")  匹配id为two后面紧邻的span兄弟 元素

(4)后面所有兄弟选择器
$("#two~span")  匹配id为two后面所有的span兄弟 元素

(5)扩展内容
$("#two").next("div")  匹配id为two的元素后面紧邻的div兄弟元素
$("#two").nextAll("div")  匹配id为two的元素后面所有的div兄弟元素
$("#two").prev("div")  匹配id为two的元素前面紧邻的div兄弟元素
$("#two").prevAll("div")  匹配id为two的元素前面所有的div兄弟元素
$("#two").siblings("div")  匹配id为two的元素前后所有的div兄弟元素
$("#two").parent()  获取id为two的元素的父元素
$("#two").parents()  获取id为two的元素的祖先元素
$("#two").find("span")  获取id为two的元素内部的所有span后代元素 --->$("#two span")

注:div元素显示还是关闭,不需要使用.css("display","none")''',可以使用jQuery的一个方法,
即$("#id").show();  //展示div
或者$("#id").hide();  //隐藏div
也可以使用$("#id").toggle();  //若是展示则隐藏,若是隐藏则展示他,最后括号里面若是加个时间,会有效果展示

3.基本过滤选择器

(1)$("div:first")  匹配div中的第一个div
(2)$("div:last")  匹配最后一个div
(3)$("div:eq(n)")  匹配div中索引值为n+1个元素
(4)$(":not(.one)")  匹配所有的class不为one的元素
    $("div:not(.one)"  匹配所有class不为one的div元素
(5)$("div:even")  匹配索引值为偶数的div
(6)$("div:odd")  匹配索引值为奇数的div

4.内容、可见选择器

(1)$("div:contains('hello')"  匹配所有包含hello文本的元素
(2)$("div:empty")  匹配所有空的div元素
(3)$("div:hidden")  匹配所有隐藏的div元素
(4)$("div:visible")  匹配所有可见的div元素

5.属性元素选择器

(1)$("div[id]")  匹配所有具有id属性的div元素
(2)$("div[title='aa']")  匹配所有title='aa'的div元素

注: $(":input")  可以选中所有的表单项元素

6.子元素选择器

(1)$("div:first-child")  匹配第一个div子元素
  $("div:nth-child(1)")  匹配第一个div子元素
(2)$("div:last-child")  匹配最后一个div子元素
(3)$("div:nth-child(n)")  匹配低n个div子元素

7.表单及表单选择器

(1)$(":input")  匹配所有的表单项元素(input、select、textarea)
(2)$(":password")  匹配所有的密码输入框
(3)$(":radio")  匹配所有的单选框
(4)$("checkbox")  匹配你所有的复选框
(5)$(":checked")  匹配所有被选中的单选框、复选框以及option选项
  $(":input[type='radio']:checked)  匹配所有被选中的单选框
  $(":input[type='checkbox']:checked)  匹配所有被选中的复选框
(6)$(":selectd")  匹配所有被选中的option
原文地址:https://www.cnblogs.com/gxlaqj/p/11381499.html