jquery选择器小记

闲来无聊，搜罗搜罗jQuery选择的基本知识。

好记性不如烂笔头，记下来以备不时之需。

基本选择器

---

id选择器 --> $(‘#id‘)

class 选择器 -->  $(‘.class‘)

标签选择器  -->  $(‘span‘)

* 选择器  -->  $(‘form *‘)  :便利form下的所有元素

并列选择器  -->  $(‘span,a‘)  : 所有的span  和  a

层次选择器

---

直系子元素  -->$(‘div > span‘)  : div下的第一代span元素

下一个兄弟元素  -->$(‘.class + span‘)  :类名为class的后面一个同级的 span元素

之后所有的兄弟元素 --> $(‘.class ~ span‘):类名为class之后的所有span元素

过滤选择器

---

第一个/最后一个元素  --> $(‘span:first‘)  /  $(‘span:last‘)

取非元素  -->  $(‘div:not(.class)‘) :选取类名不为 class的div【当存在父子关系时要注意】

取偶数索引 / 奇数索引元素  -->  $(‘li:even‘) / $(‘li:odd‘) :索引从0开始，even表示偶数，odd表示奇数

指定索引的元素  -->  $(‘.class : eq(2)‘)  :选取类名为class的第三个元素

取大于索引 / 小于索引的元素 --> $(‘li :gt(2)‘) / $(‘li :lt(2)‘)

取H1~H6标题元素  --> $(‘:header‘)  /  $(‘:h2‘)  :选取所有标题 / 选取h2标题

取包含text文本的元素  --> $(‘span:contains("jQuery")‘) :span标签中包含jQuery文本的元素

选取不包含/ 文本为空的元素 -->$(‘span:empty‘)

选择器匹配元素  --> $(‘div:has(span)‘)  :包含span的div元素

选取有子元素的元素  --> $(‘li:parent‘)  :含有子元素的li元素

属性过滤选择器

---

包含某属性的元素 --> $(‘a[title]‘)  ：a标签中含有title属性的

选取某属性值的元素 -->  $(‘a[titile=value]‘)  /  $(‘a[titile != value]‘)