jQuery基本选择器实例讲解

1、1.新建jQuery_jibenxuanzeqi.html 页面作为今天的讲解页面

2、2.首先在静态页面中编写我们需要的元素，5个按钮，4个div，1个span 并给其添加样式，代码如下

3、3.页面预览效果如下

4、4.我们现在要做的就是点击不同的按钮，选中不同的页面元素，这也是jQuery的核心，基本选择器。

首先给第一个按钮添加代码，让它选中id为one的div

5、5.代码解释，

$("#btn_1").click(function(){}); 这个是绑定按钮1的click事件，当按钮1被点击的时候触发 function 中的函数

$("#one").css("background","#00FF00"); #one代表选中id为one的元素，css是jQuery函数，定义元素的css样式，"background","#00FF00"就是给元素添加背景颜色。

预览效果，点击按钮1如下

6、6.同理，添加按钮2的click代码

注意其中的选择器 .class1 代表是选中所有样式为class1的元素

7、7.预览效果如下

8、8.按钮3的代码如下，

div代表选中所有的div元素

9、9.预览效果，除了span标签，所有div都被选中了

10、10.第四个按钮的代码如下

*代表 找到每一个元素，包括body等所有的Html元素

11、11.所以预览效果是整个页面都变颜色了

12、12.最后一个按钮是选中id为one的元素和所有的span标签，

$("#one,span") 并列的关系用“，”分割

13、13.预览效果如下

14、14.以上就是jQuery的基本选择器

其中包括

id选择器，用“#”表示，根据给定的ID匹配一个元素。

class选择器，用“.”表示，根据给定的类匹配元素。注意：一个元素可以有多个类，只要有一个符合就能被匹配到。

元素选择器，根据给定的元素名匹配所有元素，如div,span等html元素

并列选择器，将每一个选择器匹配到的元素合并后一起返回。