Web学习笔记（四）：jQuery篇

声明：本篇笔记部分摘自《Web前端技术 - 航空工业出版社》，遵循CC BY 4.0协议。
存在由AI生成的小部分内容，仅供参考，请仔细甄别可能存在的错误。

一、jQuery基础

1.认识jQuery

jQuery于2006年1月由John Resig发布，其设计宗旨是“write less, do more”，即倡导写更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。它的设计可以改变用户编写JavaScript代码的方式，有助于提高编程效率。jQuery主要有以下特点。

  • 代码精致小巧。jQuery是一个轻量级的JavaScript库，其代码非常小巧。
  • 强大的功能函数。使用jQuery的功能函数，能够帮助开发人员快速地实现各种功能，并且代码优雅简洁，结构清晰。
  • 跨浏览器。jQuery具有良好的兼容性，可以兼容各大主流浏览器。
  • 链式的语法风格。jQuery可以对元素的一组操作进行统一的处理，不需要重新获取对象，也就是说jQuery可以基于一个对象进行一组操作。
  • 插件丰富。除了jQuery本身带有的一些特效外，它还可以通过插件实现更多的功能，如表单验证、拖放效果等。网上的jQuery插件很多，可以直接下载使用，而且插件会将JavaScript代码和HTML代码完全分离，便于维护代码。
  • 使用jQuery可以极大地提高编写JavaScript代码的效率，还可以让代码更加简洁、健壮。可以说，jQuery适合任何应用JavaScript的项目开发。

2.下载和配置jQuery

  1. 点击进入jQuery官网,点击“Download jQuery”字样下载脚本文件。
  2. 进入代码页，右键后点击菜单中的“另存为”选项(或按下Ctrl+S)，保存jQuery到本地。
  3. 将保存的jquery-xxx.mim.js文件复制到项目文件夹。
  4. 通过<script src="文件路径"></script>将jQuery引入HTML文档。
    • 注意：引用jQuery的<script>标签应该在所有的<script>标签之前！

二、jQuery选择器

1.基本选择器

选择器 语法 说明
ID选择器 $(“#类名”) 根据id属性获取一个元素，返回单个元素
元素选择器 $(“元素名”) 根据标签名获取相应元素，返回元素集
类名选择器 $(“.类名”) 根据元素拥有的类名获取元素，返回元素集
复合选择器 $(“选择器1, 选择器2, …”) 取各个选择器选中元素的并集(同时满足所有选择器)
通配选择器 $(“*”) 获取所有元素

2.层级选择器

选择器 语法 说明
后代选择器 $(“祖先元素 后代元素”) 获取祖先元素中的所有后代元素，返回元素集
子代选择器 $(“父元素>子元素”) 获取父元素的直接子元素，返回元素集
相邻选择器 $(“前元素+后元素”) 获取所有紧接在前元素后面的后元素，返回元素集
兄弟选择器 $(“兄元素~弟元素”) 获取兄元素后的所有弟元素，返回元素集

3.过滤选择器

① 简单过滤器

过滤器 说明
:first 获取第一个元素，返回单个元素
:list 获取最后一个元素，返回单个元素
:even 获取索引值（从0开始计数）为偶数的所有元素，返回元素集
:odd 获取索引值（从0开始计数）为奇数的所有元素，返回元素集
:eq(索引) 获取带有指定索引值的元素，返回单个元素
:gt(索引) 获取所有大于给定索引值的元素，返回元素集
:lt(索引) 获取所有小于给定索引值的元素，返回元素集
:header 获取所有标题元素，如h1、h2、h3等，返回元素集
:animated 获取当前正在执行动画效果的元素，返回元素集
:not(选择器) 去除所有与给定选择器匹配的元素
  • 例：$("tr:first")，获取表格第一行

② 内容过滤器

选择器 说明
:contains(内容) 获取包含给定文本的元素，返回元素集
:empty 获取所有不包含子元素或文本的空元素，返回元素集
:has(选择器) 获取包含选择器选中元素的元素，返回元素集
:parent 获取含有子元素或文本的元素，返回元素集
  • 例：$("div:has(p)")，获取所有含有p元素的div元素

③ 可见性选择器

选择器 说明
:visible 获取所有可见元素，返回元素集
:hidden 获取所有不可见元素，返回元素集

④ 子元素过滤选择器

过滤器 说明 示例
:first-child 获取每个父元素的第一个子元素，返回元素集 $("ul li:first-child")，获取每个 ul 元素中的第一个 li 元素
:list-child 获取每个父元素的最后一个子元素，返回元素集 $("ul li:last-child")，获取每个 ul 元素中的最后一个 li 元素
:only-child 获取每个父元素中唯一的子元素，返回元素集 $("ul li:only-child")，获取每个 ul 元素中含有的唯一的 li 元素
:nth-child(index/odd/even/equation) 获取每个父元素下的第 index 个子元素或奇偶元素，返回元素集（index 从 1 开始计数）

⑤ 表单对象的属性过滤器

过滤器 说明 示例
:enabled 获取所有可用元素，返回元素集 $("#form1:enabled")，获取 id 属性值为 “form1” 的表单内的所有可用元素
:disabled 获取所有不可用元素，返回元素集 $("#form2:disabled")，获取 id 属性值为 “form2” 的表单内的所有不可用元素
:checked 获取所有被选中的元素，返回元素集 $("input:checked")，获取所有被选中的 input 元素
:selected 获取所有被选中的选项元素，返回元素集 $("select:selected")，获取所有被选中的选项元素

4.属性选择器

选择器 说明 示例
[属性] 获取拥有此属性的元素，返回元素集 $("div[id]")，获取拥有属性 id 的 div 元素
[属性=值] 获取给定属性的值等于某个值的元素，返回元素集 $("div[title='test']")，获取属性 title 的值等于 “test” 的 div 元素
[属性!=值] 获取给定属性的值不等于某个值的元素，返回元素集 $("div[title!='test']")，获取属性 title 的值不等于 “test” 的 div 元素（注意：没有属性 title 的 div 元素也会被获取）
[属性^=值] 获取给定属性的值含有某个值的元素，返回元素集 $("div[title^='test']")，获取属性 title 中含有 “test” 值的 div 元素
[属性$=值] 获取给定属性的值以某个值开始的元素，返回元素集 $("div[title$='test']")，获取属性 title 的值以 “test” 开始的 div 元素
[属性*=值] 获取给定属性的值以某个值结束的元素，返回元素集 $("div[title*='test']")，获取属性 title 的值以 “test” 结束的 div 元素
[选择器1][选择器2]… 复合属性选择器，在同时满足多个条件时使用，返回元素集 $("div[id][title$='test']")，获取拥有属性 id，且属性 title 的值以 “test” 结束的 div 元素

5.表单选择器

选择器 说明 示例
:input 获取所有的 input 元素，返回元素集 $(":input")，获取所有的 input 元素
:text 获取所有的单行文本框，返回元素集 $(":text")，获取所有的单行文本框
:password 获取所有的密码框，返回元素集 $(":password")，获取所有的密码框
:button 获取所有的普通按钮，返回元素集 $(":button")，获取所有的普通按钮
:submit 获取所有的提交按钮，返回元素集 $(":submit")，获取所有的提交按钮
:image 获取所有的图像按钮，返回元素集 $(":image")，获取所有的图像按钮
:reset 获取所有的重置按钮，返回元素集 $(":reset")，获取所有的重置按钮
:radio 获取所有的单选钮，返回元素集 $(":radio")，获取所有的单选钮
:checkbox 获取所有的复选钮，返回元素集 $(":checkbox")，获取所有的复选框
:file 获取所有的文件域，返回元素集 $(":file")，获取所有的文件域

三、jQuery操作元素

1.操作元素的内容和值

分类 方法 语法 说明
操作元素的文本内容 text() $(选择器).text() 返回被选元素的文本内容
$(选择器).text(内容) 设置被选元素的文本内容
$(选择器).text(function(索引,旧内容)) 使用函数设置被选元素的文本内容
操作元素的 HTML 内容 html() $(选择器).html() 返回被选元素的 HTML 内容
$(选择器).html(内容) 设置被选元素的 HTML 内容
$(选择器).html(function(索引,旧内容)) 使用函数设置被选元素的 HTML 内容
操作元素的值 val() $(选择器).val() 返回第一个被选元素的指定值属性的值
$(选择器).val(值) 设置被选元素的指定值属性的值
$(选择器).val(function(索引,旧值)) 使用函数设置被选元素的指定值属性的值
  • 元素的值是元素的一种属性，大部分元素的值都对应值属性。

2.操作DOM节点

① 创建节点

  • 创建节点主要分为两步：
    1. 创建新元素
    2. 将新元素插入文档
1
2
3
4
5
6
7
8
9
10
11
$(document).ewady(function() {
	// 法一
	var $p1 = $("<p></p>");                  // 空元素 - 赋值 - 插入
	$p1.html("法一添加的内容");
	$("body").append($p1);                   // 创建并赋值 - 插入
	// 法二
	var $p2 = $("<p>法二添加的内容</p>");
	$("body").append($p2);
	// 法三
	$("body").append("<p>法三添加的内容</p>");  // 一气呵成
})

② 插入节点

分类 方法 语法 说明
在元素内部插入节点 append() $(选择器).append(内容) 在被选元素内部的结尾插入指定的内容
appendTo() $(内容).appendTo(选择器) 在被选元素内部的结尾插入指定的内容
prepend() $(选择器).prepend(内容) 在被选元素内部的开头插入指定的内容
prependTo() $(内容).prependTo(选择器) 在被选元素内部的开头插入指定的内容
在元素外部插入节点 after() $(选择器).after(内容) 在被选元素后插入指定的内容
insertAfter() $(内容).insertAfter(选择器) 在被选元素后插入指定的内容
before() $(选择器).before(内容) 在被选元素前插入指定的内容
insertBefore() $(内容).insertBefore(选择器) 在被选元素前插入指定的内容

③ 删除、复制和替换节点

分类 方法 语法 说明
删除节点 empty() $(选择器).empty() 移除被选元素中的所有内容，包括所有文本和子节点，但不删除该元素
remove() $(选择器).remove() 移除被选元素，包括所有文本和子节点
复制节点 clone() $(选择器).clone(includeEvents) 生成被选元素的副本，包含子节点、文本和属性
替换节点 replaceAll() $(内容).replaceAll(选择器) 用指定的 HTML 内容或元素替换被选元素，但 replaceAll() 无法使用函数进行替换
替换节点 replaceWith() $(选择器).replaceWith(内容) 用指定的 HTML 内容或元素替换被选元素

3.操作元素属性

方法 语法 说明
attr() $(选择器).attr(属性) 返回被选元素的属性值
$(选择器).attr(属性,值) 设置被选元素的属性和值
$(选择器).attr(属性,function(索引,旧值)) 使用函数来设置被选元素的属性和值
$(选择器).attr({属性:值, 属性:值 ...}) 为被选元素设置一个以上的属性和值
removeAttr() $(选择器).removeAttr(属性) 从被选元素中移除指定的属性
has类名() $(选择器).has类名(类名) 检查被选元素是否包含指定的类
add类名() $(选择器).add类名(类名) 向被选元素添加指定的类
remove类名() $(选择器).remove类名(类名) 从被选元素中删除全部或者指定的类
toggle类名() $(选择器).toggle类名(类名,switch) 设置或移除被选元素的一个或多个类进行切换

4.操作元素的CSS样式

方法 语法 说明
css() $(选择器).css(name) 返回第一个匹配元素的 CSS 属性值
$(选择器).css(name,值) 设置所有匹配元素的指定 CSS 属性
$(选择器).css(name,function(索引,值)) 使用函数设置所有匹配的元素中样式属性的值
$(选择器).css({属性:值, 属性:值, ...}) 设置多个 CSS 属性 / 值对，把 “名 / 值对” 对象设置为所有匹配元素的样式属性
height() $(选择器).height() 返回第一个匹配元素的高度
$(选择器).height(length) 设置所有匹配元素的高度
$(选择器).height(function(索引,旧height)) 使用函数设置所有匹配元素的高度
width() $(选择器).width() 返回第一个匹配元素的宽度
$(选择器).width(length) 设置所有匹配元素的宽度
$(选择器).width(function(索引,旧width)) 使用函数设置所有匹配元素的宽度

四、jQuery事件处理

1.页面加载响应事件

$(document).ready()方法是时间模块中最重要的一个方法，极大地提高了Web页面的响应速度，语法格式如下:

1
2
3
(document).ready(function() {
	// 页面加载完成时的操作
})
  • 可以使用此方法代替DOM中的window.onloaded()方法，且具有以下特点：
    • 可以多次定义$(document).ready()，各方法之间不冲突且按顺序执行，而window.onloaded()方法仅能定义一个。
    • 此方法在所有DOM元素加载完毕时就被调用，相比之下window.onloaded()方法会等待图片等关联的文件加载完成后才运行，因此前者相对更加快速高效。

2.jQuery中的事件

方法 说明
&(选择器).click(函数) 鼠标单击时运行函数或将函数绑定到此事件
&(选择器).dbclick(函数) 鼠标双击时运行函数或将函数绑定到此事件
&(选择器).mouseover(函数) 鼠标悬停时运行函数或将函数绑定到此事件
&(选择器).focus(函数) 鼠标时运行函数或将函数绑定到此事件
  • 这些事件处理程序的写法几乎与传统的JavaScript写法一致，只是名称略有不同而已。

3.事件绑定

① 为元素绑定事件

  • 使用bind()方法为元素绑定事件：
1
2
3
4
5
6
$(选择器).bind(事件, 参数, function() {
	// 事件处理程序
})

// 或者采用下面的方式来定义多种事件对应的处理程序:
$(选择器).bind(事件1:处理程序1, 事件2:处理程序2, …)

② 移除绑定

  • 使用unbind()方法解除元素绑定的事件：
1
$(选择器).unbind(事件, 处理程序)
  • 其中两个参数均可选，分别用于删除指定的事件和指定的处理程序，若留空会移除所有事件。

③ 绑定一次性事件

  • 使用one()方法为元素绑定一个或多个事件处理程序：
1
2
3
$(选择器).one(事件, 参数, function() {
	// 事件处理程序
})

五、jQuery动画效果

  • 主要用于动态显示和隐藏元素，实现类似于PPT动画的效果。

1.元素的隐藏和显示

① 分别隐藏和显示匹配元素

1
2
3
4
5
// 隐藏元素
$(选择器).hide(时长, 回调函数);

// 显示元素
$(选择器).show(时长, 回调函数);
  • "时长"参数可选，可取以ms为单位的数值，也可以用关键字slow、normal及fast。
  • "回调函数"参数可选，接收一个定义好的函数，在动画结束后执行相关操作。

② 切换元素的可见状态

1
$(选择器).toggle(时长, 回调函数);

2.元素的淡入淡出

  • 隐藏和显示元素会改变元素的宽度和高度，若希望改变透明度，可以使用淡入淡出效果实现。
1
2
3
4
5
6
7
8
9
10
11
// 将隐藏的元素淡入显示
$(选择器).fadeIn(时长, 回调函数);

// 将显示的元素淡出隐藏
$(选择器).fadeOut(时长, 回调函数);

// 淡入-淡出切换
$(选择器).fadeToggle(时长, 回调函数);

// 使元素过渡到指定的透明度
$(选择器).fadeTo(时长, 透明度, 回调函数);
  • 透明度参数取值0~1。
  • fadeTo()方法的时长参数必须给出，其他三个方法均可省略时长参数。
  • 所有方法的回调函数参数可选。

3.元素的滑动隐藏与显示效果

1
2
3
4
5
6
7
8
// 向下滑动渐显
$(选择器).slideDown(时长, 回调函数);

// 向上滑动渐隐
$(选择器).slideUp(时长, 回调函数);

// 切换显示-隐藏状态
$(选择器).slideToggle(时长, 回调函数);
  • 两个参数均可选。

六、结语

  • jQuery通过工厂函数$()以及选择器获取HTML页面上的各种元素或元素集，将它们构造为一个对象，通过各种改进自JavaScript的方法来进行高效的操作，有效地提高了JavaScript代码的易读性和简洁性。
学习笔记 > Web > JavaScript
#Web #JavaScript #jQuery
Web学习笔记（四）：jQuery篇
http://blog.morely.top/2025/07/08/Web学习笔记（四）：jQuery篇/
作者
陌离
发布于
2025年7月8日
许可协议