jQuery选择器

 

jQuery选择器

简介

jQuery 最核心的组成部分就是:选择器引擎。

它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性,写法更加简洁。

jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种 特殊状态的选择。

分类

1.基本选择器

#id   根据id匹配元素   $("#box")选择id为box的标签

.class   根据类名匹配元素   $(".left")选择class为left的标签

element 根据元素名匹配元素 $("p")选择id为box的标签

* 匹配所有元素 $("*")选择所有不分类型的标签

selected1,selected2 同时返回两个元素 $("p,h1")同时选择p和h1标签

 

2.层级选择器

$('ul li') 选择ul中的所有li

$('ul>li') 选择ul中子元素中的所有li

$('p+div') 选择p标签后第一个div (p标签后面的第一个div兄弟元素)

$('p~div') 选择p后面所有div兄弟元素

 

$('.one').next('div') 标签后第一个

$('.pre').nextAll('div') 标签后所有

 

3.属性选择器

1.[attribute]

    作用：匹配包含指定属性的元素

    // 匹配div中有id属性的元素

    ex: $("div[id]"");

2.[attribute = value]

    作用：匹配属性值为value的元素

    ex: $("div[id=main]"") -> $("#main");

    //匹配所有文本框

    $("[type=text]");

3.[attribute != value]

    作用：匹配属性值不是value的所有元素

4.[attribute ^= value]

    作用：匹配属性值以value字符作为开始的元素

5.[attribute$ = value]

    作用：匹配属性值以value字符作为结尾的元素

6.[attribute *= value]

    作用：匹配属性值中包含value字符的元素

 

4.筛选选择器

$('li:first') 只匹配到第一个元素

$('li:last') 只匹配到最后一个元素

$('li:not(:last)') 选择所有li排除最后一个

$('li:not(:eq(1))') 选择所有li排除第二个

$('li:odd') 选择所有索引值为偶数的li

$('li:even') 选择所有索引值为奇数的li

$('li:gt(5)') 选择大于第5个的li

$('li:lt(5)') 选择小于第5个的li

$('li:eq(5)') 选择等于第5个的li

$('div') 选择所有的div

 

1.children() / children(selector)

    作用：获取jq对象的所有子元素或带有指定选择器的子元素

    注意：只考虑子代元素，不考虑后代元素

2.next() / next(selector)

    作用：获取jq对象的下一个兄弟元素 / 满足selector的下一个兄弟元素

3.prev() / prev(selector)

    作用：获取jq的上一个兄弟元素 / 满足selector的上一个兄弟元素

4.siblings() / siblings(selector)

    作用：获jq对象的所有兄弟节点 / 满足selector的所有兄弟

5.find(selector)

    作用：获取满足selector选择器的所有后代元素

6.parent()

    作用：查找jq对象的父元素

 

5.子元素过滤选择器

1. : first - child

    匹配属于其父元素中的首个子元素

2. : last - child

    匹配属于其父元素中的最后一个子元素

3. : nth - child(n)

    匹配属于其父元素中的第n个子元素

 

经验

jQuery对象执行某个方法, 会遍历jQuery对象, DOM数组中的每个对象执行这个方法

但是可以通过索引进行获取 eq(index)