jQuery基本选择器实例讲解

 时间:2026-02-15 21:37:50

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

jQuery基本选择器实例讲解

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

jQuery基本选择器实例讲解

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

jQuery基本选择器实例讲解

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

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

jQuery基本选择器实例讲解

5、5.代码解释,

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

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

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

jQuery基本选择器实例讲解

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

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

jQuery基本选择器实例讲解

7、7.预览效果如下

jQuery基本选择器实例讲解

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

div代表选中所有的div元素

jQuery基本选择器实例讲解

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

jQuery基本选择器实例讲解

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

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

jQuery基本选择器实例讲解

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

jQuery基本选择器实例讲解

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

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

jQuery基本选择器实例讲解

13、13.预览效果如下

jQuery基本选择器实例讲解

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

其中包括

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

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

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

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

  • div设置字体颜色
  • 怎么用js弹出可输入内容的对话框
  • vscode的格式化代码快捷键是什么
  • vscode怎么把图片放进程序
  • Visual Studio怎么新建html页面
  • 热门搜索
    玫瑰什么时候开花 诺贝尔发明了什么 三大攻坚战指的是什么 light是什么意思 hrm是什么职位 普洱茶是什么茶 2月6日是什么星座 6月10日是什么星座 现在买什么手机好 皮肤黑的人适合穿什么颜色的衣服