jQuery选择器

jQuery选择器

一、基础选择器

1、 id选择器

$("#id名")

2、 类选择器

$(".class名")

3、 标签选择器

$("标签名")

4、通配符选择器

$("*")

一般用于样式重组
5、群组选择器

$("标签名，标签名")

二、层级选择器

1、 选择到元素下的子元素

$("标签名  子元素")

$("标签名 >子元素")

2、选中元素下的子元素的下一个元素

$("div a.link + a")
//选中div下的a元素类名为link的下一个元素

3、选中元素中后面所有元素

$("div a.link ~ a")
//选中div下的a元素类名为link后面的所有元素

三、属性选择器

<div>
 <ul id="ulColor">
        <li class="red">color</li>
        <li title="blue">color</li>
        <li title="css-1">color</li>
        <li id="color1-green">color</li>
        <li id="red-1color">color</li>
        <li lang="encnhk">color</li>
        <li lang="en cn">color</li>
        <li class="cl" name="kaivon" >color</li>
    </ul>
</div>

1、属性选择器

$("#ulColor li[class]")
//选中是class的标签

2、精确的属性选择器

$("#ulColor li [title = blue]")
//选中是title是blue的标签
$("#ulColor li [title != blue]")
//选中是title不是blue的标签

3、选中title中以前缀XX开始的标签

$("#ulColor li [title |= css]")
//选中是title中前缀是css的标签

4、选中id以XXX字符串开始的标签

$("#ulColor li [ id ^= color]")
//选中是id中前缀是color的标签

5、选中id以XXX字符串结尾的标签

$("#ulColor li [ id $= color]")
//选中是id中结尾是color的标签

6、包含XXX字符串

$("#ulColor li [ lang *= cn]")
//选中属性中包含字符串cn

7、包含XXX单词

$("#ulColor li [ lang ~= cn]")
//选中属性中包含cn单词

四、基础过滤选择器

索引值都是从0开始

  <ol id="olColor">
        <li>color</li>
        <li>color</li>
        <li>color</li>
        <li lang="en">color</li>
        <li id="tar">color</li>
        <li>color</li>
        <li>color</li>
        <li>color</li>
    </ol>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>

1、选中索引值为X的标签

$("#olColor li:eq(1)")
//选中索引值为1的标签
$("#olColor li:gt(1)")
//选中大于索引值的标签
$("#olColor li:lt(1)")
//选中小于索引值的标签

2、选中除了选中的所有标签

$("#olColor li:not(#olColor li:eq(1))")

3、选中所有奇偶数标签

$("#olColor li:even")
//选中所有偶数标签
$("#olColor li:odd(1)")
//选中所有奇数标签

3、选中所有第一或最有一个标签

$("#olColor li:first")
//选中第一个标签
$("#olColor li:last")
//选中最后一个标签