第二章 jQuery选择器

Posted 2020-10-12 别动我的猫

第二章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.选择器中含有空格

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