jQuery选择器

2019独角兽企业重金招聘Python工程师标准>>>

1，基本选择器

//选择ID，返回单个元素
$("#one").css("background", "#bfa");
//选择.mini类，返回集合
$(".mini").css("background", "#bfa");
//选择Element名，返回集合
$("div").css("background", "#bfa");
//选择所有，返回集合
$("*").css("background", "#bfa");
//选择所有div,span和类.myClass的p元素
$("div,span,p.myClass").css("background", "#bfa");

2，层次选择器

$("body div").css("background", "#bfa");//body内所有div
$("body > div").css("background", "#bfa");//body的子元素div
$(".one + div").css("background", "#bfa");//.one的同级div元素
$(".one").next("div");//.one的同级div元素
$("#two ~ div").css("background", "#bfa");//#two的后面div同级元素，不包括#two
$(".one").nextAll("div");//#two的后面div同级元素，不包括#two
$(".one").sibling("div").css("background", "#bfa");//所有.one同级的div元素，与位置无关

3，基本过虑选择器，过滤选择器以：开始

$("div:first");//第一个
$("div:last");//最后一个
$("input:not(.one)");//不包括.one
$("input:even");//偶数，从0,2,4...
$("input:odd");//奇数
$("input:eq(1)");//索引=1的input，从0开始
$("input:gt(1)");//索引>1的input，从0开始
$("input:lt(1)");//索引>1的input，从0开始
$(":header");//选取所有标题元素H1,H2....
$("div:animated")//选取正在执行动画的div元素
$(":focus")//选取当前获得焦点的元素

4，内容过滤选择器，子元素或文本内容

$("div:contains('text')");//含有文本"text"的元素
$("div:empty");//不包含子元素或者文本为空的div元素
$("div:parent");//包含子元素或者文本的div元素
$("div:has(p)");//包含p的div元素

5，可见性过滤器

$(":hidden");//选取所有隐藏元素集合，包含display:none，input="hidden",visibility="hidden"的元素
$(":visible");//选取所有可见元素集合
.show(),显示元素,3000ms

6，属性过滤器

$("div[id]");//选取div属性有id的元素
$("div[title=test]");//title=test的div元素
$("div[title!=test]");//title!=test的div元素
$("div[title^=test]");//title以test开始的div元素
$("div[title$=test]");//title以test结尾的div元素
$("div[title*=test]");//title包含test的div元素
$("div[title|=test]");//title以test开头或者=test的div元素
$("div[title~=test]");//title以空格分隔的值包含test的div元素
$("div[id][title=test]");//组合元素

7，子元素过滤选择器

:nth-child(index/even/odd/equation);//选取每个父元素下的第一个index元素或奇偶元素（index从1算起）
:first-child;//选取每个父元素的第一个子元素
:last-child;//选取每个父元素的最后一个子元素
:only-child;//某个元素是它父元素中的唯一子元素；

8，表单对象属性过滤器，对所选表单元素进行过滤

:enabled; $("#form1 :enabled");//form1内所有可用元素,返回集合元素
:disabled; $("#form1 :disabled");//返回集合元素
:checked; $("input:checked");//所有被选中元素，单、复选框
:selected; $("select option:selected"); //下拉框选中.text()

9，表单选择器

:input 所有input,textarea,select,button元素
:text 所有单行文本框元素
:password 密码框元素
:radio 单选框元素
:checkbox
:submit
:image
:reset
:button
:file
:hidden

转载于:https://my.oschina.net/u/2500345/blog/595459