jQuery选择器

一 jQuery简单选择器及其拓展

简单选择器定义为元素、类、id、属性选择器,这些选择器的杂糅会有想象不到的特效,值得学习。

<div class="divClass" id="divId" name="divName">
    <div class="divChildClass" id="divChildId" name="divChildName">
        <a>textA</a>
        <b>textB</b>
    </div>
</div>

1. 元素选择器

$("div");

2. Class选择器

$(".divClass");

3. ID选择器

$("#divId");

[拓展]多级(组合)选择器

  1. 亲子选择器
    > #divId中Id值为"divChildId"的第一任后代.
$("#divId > #divChildId");
  1. 儿孙选择器
    > div中所有标签为a的后代
$("div a");
  1. 相邻兄弟选择器
    > 选择第一个且相邻名字叫b的弟弟(不能向上选择)
$("a + b");
  1. 一般兄弟选择器
    > 选择所有名字叫做b的弟弟(不能向上选择)
$("a ~ b");

4. 属性选择器(选择器乘法)

在这里会出现选择器乘法,比较难缠

  • 基础
$('div[name]'); //乘法,div中有属性name的DOM
$("[name='divName']"); //属性名为divName的DOM
  • 只包含 |
$('div[name|="-"]'); //查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
  • 连字符 ~
$('div[name~="a"]'); //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
(name="x a")
  • 开始、结尾、至少 ^ $ *

++简单选择器END++

二 复杂选择器

伪类选择器,或者说是筛选选择器

<div class="divClass" id="divId" name="divName">
    <div class="divChildClass" id="divChildId" name="divChildName">
        <a>textA</a>
        <b>textB</b>
    </div>
</div>

1. 坐标(索引)筛选器

  • 最初 first
$("li:fist"); // 筛选第一个li元素
  • 最后 last
$("li:last"); // 筛选最后一个li元素
  • 奇偶 even(偶数)、odd(奇数)
$("li:even"); // 匹配偶数,由索引0开始执行匹配
  • 比较 gt(>)、eq(=)、lt(<)
$("li:eq(2)"); // 匹配索引值为2的数,由索引0开始执行匹配
$("li:gt(2)"); // 匹配索引值 >2的数,由索引0开始执行匹配
$("li:lt(2)"); // 匹配索引值 <2的数,由索引0开始执行匹配
  • 取反 not
$(":not(selector)"); // 匹配selector之外(selector能控制的范围内)的元素
  • 其他 lang、root、animated

2. 内容筛选选择器

  • 包含 contain
$("div:contains('text')");// 匹配div中包含text的盒子
  • 包含 has
$("div:has(span)");// 匹配div中包含span节点的DOM
  • 空包 empty
$("div:empty");// 匹配div中所有空div节点(没有子元素)
  • 非空 parent
$("div:parent");// 匹配div中所有非空(包含子元素)节点

3. 子元素选择器

  • 长子 first-child
$('div:first-child'); // 匹配所有div的第一个子元素
  • 幼子 last-child
$('div:last-child'); // 匹配所有div的最后一个子元素
  • 独子 only-child
$('div:only-child'); // 匹配所有div的独生子,如果没有独生子,不匹配
  • 正序子 nth-child()
$('div:nth-child(1)') //匹配div中第一个孩子,索引由0开始
  • 倒序子 nth-child()
$('div:nth-last-child(2)') //匹配div中倒数第二个孩子

三 特殊选择器

1. 表单选择器

  • 略,TODO

2. this选择器

js中this指向当前对象,一般是DOM,而jquery的this选择器将js的this转换成jquery对象,调用jquery对象方法.

$this = $(this);

发表评论

电子邮件地址不会被公开。 必填项已用*标注