JavaScript之jQuery学习三部曲【中篇】-CSDN博客

本文链接：https://blog.csdn.net/2401_85123543/article/details/139626743

3️⃣ 标签选择器

标签选择器，通过标签名选择元素，通常会选择很多元素，返回元素序列：

//3. 标签名选择器的两种写法

var $element = $(“tagName”)

var $element = jQuery(“tagName”)

📕 内容选择器

接下来是通过元素的HTML内容进行选择，主要有以下几种方法：

//1. html元素的文本内容

var $element = $(“div:contains(‘hello’)”)

//2. html元素内容为空

var $element = $(“div:empty”) //不包含子节点或者文本的空节点

//3. html元素的内容是否包含某个其他元素，例如下面是div，div中必须含有p标签

var $element = $(“div:has§”) //含有选择器所匹配的节点

//4. html元素的内容是否包含子节点或文本节点，满足其一即可选择

var $element = $(“div:parent”) //含有子节点或者文本的节点

📕 元素筛选器

元素筛选器，就是通过一定的规则筛选元素的一些选择器，常见的筛选器有这些：

//1. 选择第一个span节点

var $element = $(‘span:first’) //第一个节点

//2. 选择最后一个span节点

var $element = $(‘span:last’) //最后一个节点

//3. 选择偶数索引的td节点

var $element = $(“td:even”) //索引为偶数的节点，从 0 开始

//4. 选择奇数索引的td节点

var $element = $(“td:odd”) //索引为奇数的节点，从 0 开始

//5. 选择索引值为某个值的td节点，下例是索引1，索引从0开始数

var $element = $(“td:eq(1)”) //给定索引值的节点

//6. 选择索引值大于/小于某个值的td节点，下例是索引1，索引从0开始数

var $element = $(“td:gt(0)”) //大于给定索引值的节点

var $element = $(“td:lt(2)”) //小于给定索引值的节点

//7. 选择当前获取焦点的节点

var $element = $(“:focus”) //当前获取焦点的节点

重点来了：看完上面的例子，我们要对一个误区进行说明，请看下面这张图：

这是一个ul，下面有5个li标签，那么我们用筛选器筛选li标签的时候，参与筛选的对象一定不要写成它的父标签ul，而是子标签li本身，例如我们实现选中第三个li标签，那么代码应该是：

var $li_3 = $(‘li’).eq(2)

总结一下就是说，筛选器在使用的时候，参与筛选的集合是子元素本身，而不是它的父元素！

📕 子元素选择器

最后是子元素选择器，能够指定某个元素下的子元素，这类选择器在开发中也很常用：

//1. 后代选择器的两种写法，注意是后代，不是子代，包括子代、孙子代等等

var $element = $(‘p span’) //p标签下的所有span节点，后代节点

var $element = $(“div”).find(“span”) //查找div下的所有span节点

//2. 子代选择器的两种写法，注意是子代，不是后代，不包括孙子代等等

var $element = $(‘p>span’) //p标签下的所有span子节点，子代节点

var $element = $(“div”).children(“img”) //div中的每个img标签子节点,子代节点

II. jQuery操作HTML样式的常用方法

下面我们对jQuery操作HTML样式的常用方法做一个汇总介绍：

📕 获取和修改HTML标签的内容

首先，说到内容，大家肯定都知道又可以细分为文本内容和HTML内容，不过这在jQuery里可以用同一个方法解决，代码是这样的：

//1. 获取标签的内容

var content = $(“.text”).html()

//2. 设置标签的内容为一个包裹内容的h1标签

$(“.text”).html(“

hello,world

”)

//3. 设置标签的内容是某个文本内容

$(“.text”).html(“xxx”)

这里的语法和普通操作dom很接近，需要在HTML写入标签，那就按照正常的标签书写即可，不过要记得加引号，之后会被解析为标签写入HTML页面指定位置。

📕 获取和修改HTML标签的属性

这部分，我们比较常用的方法是这样的：

//1. 返回文档中所有图像的src属性值

var src = $(“img”).attr(“src”);

//2. 设置文档中所有图像的src属性值是xxx.jpg

$(“img”).attr(“src”,“xxx.jpg”);

//3. 删除文档中所有图像的src属性值

$(“img”).removeAttr(“src”);

很好理解，这部分不做解释。

📕 修改HTML样式的CSS写法

最后是jQuery提供了一种类似于CSS的写法来操作元素的样式属性，即除了前面的那种操作属性的方法外，还有一种额外的操作样式的写法：

//1. 获取p标签的color属性的属性值

var color = $(“p”).css(“color”);

//2. 将所有p标签的color属性值设置为red

$(“p”).css(“color”,“red”);

//3. 将所有p标签的color属性值设置为red，并将background属性值设置为yellow(键值对写法)

$(“p”).css({ “color”: “red”, “background”: “yellow” });

最后这种CSS的操作手法，很值得大家深入学习，因为代码比较易懂简洁！

III. jQuery绑定事件的方法

现在，我们来学习一下jQuery给我们提供的绑定事件的常用方法吧：

📕 绑定事件的通用函数bind()

第一部分，我们先了解一下最常用的绑定事件函数bind()，它有四个参数，但是基础阶段，我们掌握必须的两个参数即可：

$element.bind(“event”,“function”)

第一个参数，看名字大家也知道，就是某个事件，例如点击事件，第二个参数是事件触发后具体执行的某个函数。

📕 绑定的事件类型汇总

bind()函数的第一个参数event是很丰富的，有以下事件：

事件	效果
click	将函数绑定到指定元素的 click 事件
dblclick	将函数绑定到指定元素的 double click 事件
error	将函数绑定到指定元素的 error 事件
focus	将函数绑定到指定元素的 focus 事件
keydown	将函数绑定到指定元素的 key down 事件
keypress	将函数绑定到指定元素的 key press 事件
keyup	将函数绑定到指定元素的 key up 事件
load	将函数绑定到指定元素的 load 事件
mousedown	将函数绑定到指定元素的 mouse down 事件
mouseenter	将函数绑定到指定元素的 mouse enter 事件
mouseleave	将函数绑定到指定元素的 mouse leave 事件
mousemove	将函数绑定到指定元素的 mouse move 事件
mouseout	将函数绑定到指定元素的 mouse out 事件
mouseover	将函数绑定到指定元素的 mouse over 事件
mouseup	将函数绑定到指定元素的 mouse up 事件
blur	将函数绑定到指定元素的 blur 事件
change	将函数绑定到指定元素的 change 事件