第二章 jQuery选择器

Posted 别动我的猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章 jQuery选择器相关的知识,希望对你有一定的参考价值。

第二章jQuery选择器

一.jQuery选择器概述

1.什么是jQuery选择器

jQuery选择器类似于CSS选择器,用来选取网页中的元素。

2. jQuery选择器的优势

  1. 简洁的写法

$()函数在很多javascript库中都被当成一个选择器函数来使用,在jQuery中也是如此。$(“#id”)等同于document.getElementById(“id”)。

  1. 完善的处理机制

使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁的多,还能避免某些错误,适用性更好。

3. jQuery选择器的类型

分类

详细类型

CSS选择器

基本选择器

层次选择器

属性选择器

过滤选择器

基本过滤选择器

可见性过滤选择器

 

二. 通过CSS选择器获取元素

1.基本选择器

jQuery基本选择器主要包括标签选择器、类选择器、id选择器、并集选择器、全局选择器。

名称

返回值

语法:示例

标签选择器

元素集合

$(“h2”)选取所有h2元素

类选择器

元素集合

$(“.name”)选取所有class=”name”的元素

Id选择器

单个元素

$(“#id”)选取id=”id”的唯一元素

并集选择器

元素集合

$(“div,p,h2”)选取所有div,p,h2的元素的集合

全局选择器

集合元素

$(“*”)选取所有元素

2.层次选择器

嵌套一层或多层的选择器叫层次选择器。

名称

返回值

语法:示例

后代选择器

元素集合

$(“#id p”)选取id=”id”内的所有p元素,包括孙子(p里面的元素)

子选择器

元素集合

$(“#id>p”)选取id=”id”内的p元素,不包含p的子元素

相邻元素选择器

元素集合

$(“#id+p”)选取id=”id”后的下一个同辈元素

同辈元素选择器

元素集合

$(“#id~p”)选取id=”id”之后的所有同辈元素p

3.属性选择器

属性选择器就是通过html元素的属性选择元素的选择器。

名称

返回值

语法:示例

选取包含指定属性的元素

元素集合

$(“[hrer]”)选取包含href属性的元素

选取指定属性是某个值的元素

元素集合

$(“[href=’#’]”)选取href属性值为#的元素

选取指定属性不是某个值的元素

元素集合

$(“[href!=’#’]”)选取href属性值不为#的元素

选取指定属性的值是某些特定值开头的元素

元素集合

$(“[href^=’#’]”)选取href属性值以#开头的元素

选取指定属性的值是某些特定元素结尾的元素

元素集合

$(“[href$=’.jpg’]”)选取href属性以.jpg结尾的元素

选取指定属性值的值包含某些值的元素

元素集合

$(“[href*=’txt’]”)选取href属性值中含有txt的元素

 

三.通过条件过滤选取元素

过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素。

按照分类,过滤选择器可以分为:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。

1.基本过滤选择器

名称

返回值

语法:示例

选取第一个元素

单个元素

$(“li:first”)选取所有li元素中的第一个li元素

选取最后一个元素

单个元素

$(“li:last”)选取所有li元素中的最后一个li元素

选取不包含给定元素的元素

集合元素

$(“li:not(.three)”)选取所有li元素中class不是three的元素

选取索引是偶数的所有元素

集合元素

$(“li:even”)选取索引是偶数的所有li元素

选取索引是奇数的所有元素

集合元素

$(“li:odd”)选取索引是奇数的所有li 元素

选取索引等于给定值的元素

单个元素

$(“li:eq(1)”)选取索引等于1的li元素

选取索引大于给定值的元素

集合元素

$(“li:gt(1)”)选取索引大于1的元素

选取索引小于给定值的元素

集合元素

$(“li:lt(1)”)选取索引小于1的元素

选取所有标题元素,如h1~h6

集合元素

$(“:header”)选取网页中的所有标题元素

选取当前获取焦点的元素

集合元素

$(“:focus”)选取当前获取焦点的元素

选取所有动画元素

集合元素

$(“:animated”)选取当前的所有动画元素

 

2.可见过滤选择器

通过元素的显示状态(显示/隐藏)来选取 元素。

名称

返回值

语法:示例

选取可见元素

集合元素

$(“:visible”)选取所有可见的元素

选取隐蔽的元素

集合元素

$(“:hidden”)选取所有隐藏的元素

 

四. jQuery选择器的注意事项

1.选择器中包含特殊符号

在W3C规范中,规定属性值不能包含有某些特殊字符,解决此类错误的方法是使用转义符转义。

例如:$(“#id#a”);

           $(“#id[2]”);

以上代码不能正确获取元素,正确的写法如下:

         $(“#id\\#a”);

         $(“#id\\[2\\]”);

 

2.选择器中含有空格

选择器中的空格也是不容忽视的,多一个或少一个空格,可能会得到截然不同的结果。

以上是关于第二章 jQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

JQuery第二章选择器

jQuery 第二课 —— 选择定位

jQuery选择器(层级选择器)第二节

第二章(2.3jQuery选择器)

第二章(2.1/2.2)

第二个 jQuery 加载日期选择器不工作