jQuery选择器概述

青春壹個敷衍的年華 提交于 2020-03-16 03:44:36

1、基本选择器:
1) #id : 根据给定的id匹配一个元素;
2) .class: 根据给定的类名匹配元素;
3)element: 根据给定的元素名匹配元素;
4)* : 匹配所有元素;
5)selector1,selector2,...,selectorN: 将每个选择器匹配到的元素合并后一起返回

 

2、层次选择器:
1) $("ancestor descendant") : 选取ancestor元素里的所有descendant(后代)元素;
如:$("div span")选取<div>里的所有的<span>子元素

2) $("parent>child"): 选取parent元素下的所有child元素,与 $("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素;
如:$("div>span")选取<div>元素下 元素名是<span>的子元素

3) $("prev + next"): 选取紧接在prev元素后的next元素;
如:$(".one+div") 选取class为one的 下一个<div>同辈元素
可使用next()方法代替,如:$(".one")。next("div");

4) $("prev ~ siblings"): 选取prev元素之后的所有siblings元素
如:$("two ~ div") 选取id为two的元素后面所有的<div>同辈元素
可使用nextAll()方法代替,如:$("two")。nextAll("div");

 

3、过滤选择器:
1)基本过滤选择器:
:even------选取索引是偶数的所有元素,索引从0开始;
:odd------选取索引是奇数的所有元素,索引从0开始;
:gt(index)------选取索引大于index的元素,index从0开始;
:lt(index)------选取索引小于index的元素,index从0开始;
2) 内容过滤选择器:
:contains(text)---选取含有文本内容为“text”的元素
:empty------选取不包含子元素或者文本的空元素
:parent------选取含有子元素或者文本的元素
3)子元素过滤选择器:
:nth-child(index/even/odd/equation)---选取每个父元素下的第index个子元素或者奇偶元素

 

4、 表单选择器:
1) :input------选取所有的<input>,<textarea>,<select>,<button>元素
2) :text------选取所有的单行文本框

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!