jQuery基本选择器实例讲解

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

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

3、页面预览效果如下

4、我们现在要做的就是点击不同的按钮，选中不同的页面元素，这也是jQuery的核心，基本选择器。首先给第一个按钮添加代码，让它选中id为one的div

5、代码解释，$("#btn_1").click(function(){}); 这个是绑定按钮1的click事件，当按钮1被点击的时候触发 function 中的函数$("#one").css("background","#00FF00"); #one代表选中id为one的元素，css是jQuery函数，定义元素的css样式，"background","#00FF00"就是给元素添加背景颜色。预览效果，点击按钮1如下

6、同理，添加按钮2的click代码注意其中的选择器 .class1 代表是选中所有样式为class1的元素

7、预览效果如下

8、按钮3的代码如下，div代表选中所有的div元素

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

10、第四个按钮的代码如下*代表 找到每一个元素，包括body等所有的Html元素

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

12、最后一个按钮是选中id为one的元素和所有的span标签，$("#one,span") 并列的关系用“，”分割

13、预览效果如下

14、以上就是jQuery的基本选择器其中包括id选择器，用“#”表示，根据给定的ID匹配一个元素。class选择器，用“.”表示，根据给定的类匹配元素。注意：一个元素可以有多个类，只要有一个符合就能被匹配到。元素选择器，根据给定的元素名匹配所有元素，如div,span等html元素并列选择器，将每一个选择器匹配到的元素合并后一起返回。