JavaScript之jQuery学习三部曲【中篇】

目录

I. jQuery支持的常用选择器分类讲解

📕 jQuery选择器概述

📕 基本选择器

📕 内容选择器

📕 元素筛选器

📕 子元素选择器

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

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

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

📕 修改HTML样式的CSS写法

III. jQuery绑定事件的方法

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

📕 绑定的事件类型汇总

IV. jQuery的后续学习建议

📕 查阅官方文档/菜鸟教程

📕 用一些小例子实战

---

高质量前端博主，点个关注不迷路🌸🌸🌸！

序言：

本期是jQuery的第二篇文章：【中篇】，主要从jQuery的选择器、jQuery操作HTML样式以及绑定事件进行讲解。

强烈建议看到这篇文章的小伙伴们，可以抽个时间看一下【上篇】，如果jQuery的基础还不错，也可以直接从这篇入手！

I. jQuery支持的常用选择器分类讲解

📕 jQuery选择器概述

第二篇的第一部分，我们来填坑：讲解一下jQuery支持的那些选择器吧。首先定义一下什么叫选择器：

这里的选择器意思是jQuery能够给我们提供选择某一个网页元素的方法。

例如我们想要选择页面上某个id为xx的p标签，那么在DOM中，我们有：

var element = document.getElementById("xxx")

在jQuery里，我们不用document.xxx，而是改用下面的这种格式：

var $element = jQuery(selector)

这时候有人要出来抬杠了，说自己是下面这种写法：

var $element = $(selector)

但其实要说明一下，下面这种dollar符的写法，是上面的简写，也就是说两种写法都对：

$(selector) = jQuery(selector)

说完了总览部分，那么对于selector具体是什么，我们在下面分类来给大家汇总一下。

---

📕 基本选择器

基本选择器，其实一共有三个常用的类型，分别是类选择器、id选择器和标签名选择器，是不是和学css是一个道理呀？那么我们看一看具体的语法：

1️⃣ 类选择器

类选择器，毫无意外是通过类名进行选择的，支持多选和单选，多选(选中多个元素)时返回元素列表：

//1. 类选择器两种写法
var $element = $(".className")

var $element = jQuery(".className")

---

2️⃣ id选择器

id选择器，通过id属性值进行选择，同样支持多选：

//2. id选择器的两种写法
var $element = $("#id")

var $element = jQuery("#id")

---

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(p)")  //含有选择器所匹配的节点

//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("<h1>hello,world</h1>")

//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 事件

知道了常用的事件event，给大家举个绑定事件的例子：

var $element = (".btn")
$element.bind("click",function printHello(){
    alert("hello")
})

这是把弹出hello这个函数与类名为btn的元素的点击事件进行了绑定！

---

IV. jQuery的后续学习建议

📕 查阅官方文档/菜鸟教程

对于初学者，我推荐大家可以去【菜鸟教程】，对一些未掌握的知识点进行查缺补漏；对于开发人员，那么毫无例外推荐大家查看官方文档：【jQuery官方文档】

---

📕 用一些小例子实战

刚开始学jQuery，不推荐大家直接上大项目，因为大家会很痛苦地学习，可以从简单的小例子入手，于是下一期，我带大家做一个模拟的抽奖转盘实战小例子，带大家感受一下jQuery代码的简洁性！

以上是本期的全部内容，喜欢的小伙伴们可以三连支持一下！💓💓💓！这是jQuery系列的第二篇，三连越多，最后一篇实战篇的更新越快！

另外本期博客参与了【新星计划】，还请大家支持一下🌟🌟🌟！