第2章 jQuery选择器详解-【千锋教育】Jquery从入门到实战

第2章 jQuery选择器详解 选择器分类 选择器方法 选择器技巧 选择器分类 选择器方法 ☞点击查看本小节知识架构 选择器技巧 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 2.2 2.3 2.1 学习目标 了解 了解 掌握 了解 了解jQuery选择器的种类 1 掌握jQuery选择器的使用技巧 4 2 了解jQuery选择器相关的方法 3 了解基本选择器 销售额 掌握知识 理解知识 熟悉知识 了解知识 2.5 2.5 2.5 2.5 原生JavaScript语言中只有少许几种方法能够用来选择HTML中指定的元素。常见的只有getElementById()、getElementsByTagName()、getElementsByClassName()等。不仅方法少，而且有的方法还存在兼容性问题，例如，上一章中提到的getElementsByClassName()方法，就是IE8以下的浏览器所不支持的。jQuery选择器不仅提供了大量实用方法，还很好地解决了兼容性问题，帮助开发者快速地进行HTML元素的获取。 2.1 选择器分类 2.1.1 基本选择器 返回目录 2.1.2 层次选择器 2.1.3 属性选择器 2.1.4 伪类选择器 2.1 选择器分类 jQuery的选择器完全继承了CSS选择器的风格。有CSS选择器使用基础的读者，学习jQuery选择器是相当轻松的，因为有很多类似的地方。如图所示。 jQuery选择器非常多，为了让读者更好地理解选择器的使用方式，现将其分为四大类，分别为：基础选择器、层次选择器、属性选择器、伪类选择器，下面就对这些选择器一一进行详细讲解。 2.1 选择器分类 所谓基本选择器，就是jQuery中使用最为频繁的选择器，jQuery中基本选择器如表所示。 2.1.1 基本选择器 2.1 选择器分类 1. ID选择器 在HTML页面中创建一组列表标签，并对其中一行设置id属性，如<li id="elem">,这时可通过# elem来获取相关的元素。代码如下所示。 2.1.1 基本选择器 可以看到，jQuery的ID选择器在使用的时候，需要在ID值前面添加一个“#”，这个获取方式跟CSS选择器类似。 2.1 选择器分类 2.1.1 基本选择器 2. CLASS选择器 在HTML页面中创建一组列表标签，并对其中两行设置class属性值box。这时可通过jQuery的CLASS选择器来获取相关的元素，需要在class属性值前面添加一个“.”，代码如下所示。 2.1 选择器分类 3. TAG选择器 在HTML页面中创建一组列表标签，如何通过直接获取标签的方式来获取元素?这时可通过jQuery的TAG选择器。代码如下所示。 2.1.1 基本选择器 2.1 选择器分类 4. 群组选择器 在HTML页面中创建一些不同类型的标签或设置不同类型的选择器时，可通过群组选择器进行统一获取，从而进行后续操作，代码如下所示。 2.1.1 基本选择器 2.1 选择器分类 2.1.1 基本选择器 可以看到，jQuery的群组选择器在使用时，可以把指定的元素集合设置统一的样式，这个获取方式跟CSS选择器类似。 以上代码的运行结果如图所示。 2.1 选择器分类 5. 通配选择器 通配选择器可获取网页中的所有元素标签，需要使用“*”表示通配性，代码如下所示。 2.1.1 基本选择器 可以看到，jQuery的通配选择器在使用时，是设置一个“*”来获取元素的。它可以获取页面中的所有标签，包括html、body等标签。在示例中，所有元素都添加了红色边框，平时在使用通配选择符的时候一定要慎用，防止误操作所有元素。这个获取方式跟CSS选择器类似。 2.1 选择器分类 这里要注意，通过$()方法获取元素时，一定要保证该元素已经加载完毕。为了能找到元素，一般把获取jQuery代码放到页面的底部，如上面示例中的代码。也可以通过$(function(){})的回调方式来确保DOM元素已经加载完毕，代码如下所示。 2.1.1 基本选择器 2.1 选择器分类 可以看到，$(function(){})可以保证HTML加载完毕后再进行触发，类似于原生JavaScript中的window.onload = function(){};。 2.1.1 基本选择器 2.1 选择器分类 层次选择器，就是通过元素之间的层次关系来获取元素。层次选择器在实际开发中也是相当重要的。常见的层次关系包括后代、父子、兄弟、相邻，对应的选择器如表所示。 2.1.2 层次选择器 2.1 选择器分类 1. 后代选择器 在HTML页面中创建一组嵌套的列表标签，然后通过后代选择器的方式选择出所有的列表项，代码如下所示。 2.1.2 层次选择器 2.1 选择