当前位置：首页 > news >正文

JavaScript学习教程，从入门到精通，jQuery概述与简单使用（31）

news 来源：原创 2025/5/1 6:56:41

jQuery概述与简单使用

jQuery是一个快速、简洁的JavaScript库，其设计宗旨是"write Less, Do More"，即用更少的代码完成更多的工作。它是一个封装好的特定集合(方法和函数)，优化了DOM操作、事件处理、动画设计和Ajax交互。

jQuery的引入方式

<!-- 本地引入 -->
<script src="jquery-3.7.1.min.js"></script><!-- CDN引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jQuery入口函数

jQuery提供了两种入口函数的写法，确保DOM加载完成后再执行代码：

// 写法一（推荐）
$(function() {// 此处是页面DOM加载完成的入口
});// 写法二
$(document).ready(function() {// 此处是页面DOM加载完成的入口
});

这两种写法都相当于原生JS中的DOMContentLoaded事件，不同于load事件（需要等待所有外部资源加载完成）。

二、$()函数与jQuery对象

$()函数

$是jQuery的顶级对象，相当于原生JavaScript中的window。$()函数是jQuery的核心函数，也称为工厂函数，主要用于：

选择DOM元素：$("selector")
创建DOM元素：$("<div>新元素</div>")
将DOM对象转换为jQuery对象：$(domObj)

jQuery对象与DOM对象

jQuery对象是通过$()函数包装DOM对象后产生的对象，以伪数组形式存储。两者不能混用方法：

// DOM对象：原生JS获取的对象
var div = document.querySelector('div');
console.log(div); // DOM对象// jQuery对象：用jquery方式获取的对象
$('div');
console.dir($('div')); // 输出结果是一个伪数组

相互转换

// DOM转jQuery对象
var video = document.querySelector('video');
$(video); // 转换为jQuery对象// jQuery转DOM对象（两种方式）
$('video')[0]; // 方法一：通过索引获取
$('video').get(0); // 方法二：使用get方法

三、jQuery选择器

jQuery选择器用于快速定位DOM元素，语法为$("选择器")，引号内写法与CSS选择器相同。

基础选择器

名称	用法	描述
ID选择器	`$("#id")`	获取指定ID的元素
类选择器	`$(".class")`	获取同一类class的元素
标签选择器	`$("div")`	获取同一类标签的所有元素
全选选择器	`$("*")`	匹配所有元素
并集选择器	`$("div,p,li")`	选取多个元素
交集选择器	`$("li.current")`	选择同时满足条件的元素

层级选择器

名称	用法	描述
子代选择器	`$("ul>li")`	获取亲儿子层级的元素
后代选择器	`$("ul li")`	获取ul下的所有li元素，包括子孙

筛选选择器

语法	用法	描述
`:first`	`$('li:first')`	获取第一个li元素
`:last`	`$('li:last')`	获取最后一个li元素
`:eq(index)`	`$('li:eq(2)')`	获取索引号为2的元素（从0开始）
`:odd`	`$('li:odd')`	获取索引号为奇数的元素
`:even`	`$('li:even')`	获取索引号为偶数的元素

筛选方法

方法	用法	说明
`parent()`	`$("li").parent()`	查找父级
`children()`	`$("ul").children("li")`	相当于`$("ul>li")`
`find()`	`$("ul").find("li")`	相当于`$("ul li")`
`siblings()`	`$(".first").siblings("li")`	查找兄弟节点，不包括自己
`eq()`	`$("li").eq(2)`	相当于`$("li:eq(2)")`

隐式迭代

jQuery会自动遍历内部DOM元素（伪数组形式存储），无需手动循环：

$("ul li").css("background", "pink"); 
// 自动为所有li元素设置背景色，无需遍历

四、on()方法绑定事件

on()方法是jQuery中绑定事件处理程序的首选方法，自jQuery 1.7起，它替代了bind()、live()和delegate()方法。

基本语法

$(selector).on(event, childSelector, data, function, map)

多种使用方式

基础事件绑定：

$("p").on("click", function() {alert("段落被点击");
});

事件委托（适合动态元素）：

$("div").on("click", "p", function() {// 点击div内的p元素时触发$(this).css("background", "yellow");
});

批量绑定事件：

$("div").on({click: function() { /* 点击事件 */ },mouseenter: function() { /* 鼠标进入事件 */ }
});

链式绑定：

$("div").on("click", function() { /*...*/ }).on("mouseenter", function() { /*...*/ });

事件解绑

使用off()方法解除事件绑定：

// 解绑所有click事件
$("div").off("click");// 解绑特定处理函数
$("div").off("click", handlerFunction);

五、鼠标事件

jQuery提供了丰富的鼠标事件处理方法：

常用鼠标事件

click() - 点击事件

$("button").click(function() {alert("按钮被点击");
});

dblclick() - 双击事件

$("div").dblclick(function() {$(this).css("background", "blue");
});

mouseenter() - 鼠标进入

$("div").mouseenter(function() {$(this).css("border", "2px solid red");
});

mouseleave() - 鼠标离开

$("div").mouseleave(function() {$(this).css("border", "none");
});

hover() - 鼠标悬停（结合进入和离开）

$("div").hover(function() { // 鼠标进入$(this).css("background", "yellow");},function() { // 鼠标离开$(this).css("background", "white");}
);

事件对象

jQuery统一了事件对象，提供跨浏览器兼容性：

$("div").click(function(event) {console.log(event.pageX); // 鼠标相对于文档的X坐标console.log(event.pageY); // 鼠标相对于文档的Y坐标console.log(event.target); // 触发事件的DOM元素console.log(event.type); // 事件类型（如"click"）event.preventDefault(); // 阻止默认行为event.stopPropagation(); // 阻止事件冒泡
});

六、css()方法操作样式

css()方法是jQuery中用于获取或设置元素样式的主要方法。

获取样式

// 获取第一个匹配元素的color样式
var color = $("p").css("color");
console.log(color); // 输出如"rgb(255, 0, 0)"

设置单个样式

// 设置所有p元素的文字颜色为红色
$("p").css("color", "red");// 数值可省略单位（默认为px）
$("div").css("width", 300); // 等价于"300px"

设置多个样式

$("div").css({"width": "200px","height": 150, // 数值会自动加px"background-color": "#f0f0f0","border": "1px solid black"
});

使用函数设置样式

$("div").css("width", function(index, currentWidth) {// index - 元素在集合中的索引// currentWidth - 当前宽度值return parseInt(currentWidth) + 50 + "px";
});

七、类样式操作

jQuery提供了专门的方法来操作元素的class属性：

addClass() - 添加类

$("div").addClass("highlight"); // 添加单个类
$("div").addClass("highlight active"); // 添加多个类

removeClass() - 移除类

$("div").removeClass("highlight"); // 移除单个类
$("div").removeClass("highlight active"); // 移除多个类
$("div").removeClass(); // 移除所有类

toggleClass() - 切换类

$("button").click(function() {$("div").toggleClass("active"); // 有则移除，无则添加
});

hasClass() - 检查类

if ($("div").hasClass("active")) {console.log("该元素有active类");
}

八、综合案例

案例1：排他思想实现选项卡

<div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li></ul></div><div class="tab_con"><div class="item" style="display:block">商品介绍内容</div><div class="item">规格与包装内容</div><div class="item">售后保障内容</div></div>
</div><script>
$(function() {// 1. 给tab栏的li绑定点击事件$(".tab_list li").click(function() {// 2. 当前tab栏被选中，其他tab栏取消选中$(this).addClass("current").siblings().removeClass("current");// 3. 获取被点击tab栏的索引号var index = $(this).index();// 4. 让对应索引号的item显示，其他隐藏$(".tab_con .item").eq(index).show().siblings().hide();});
});
</script>

案例2：表格隔行变色

<table border="1" cellspacing="0" cellpadding="0"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>20</td></tr><tr><td>2</td><td>李四</td><td>22</td></tr><tr><td>3</td><td>王五</td><td>25</td></tr><tr><td>4</td><td>赵六</td><td>28</td></tr></tbody>
</table><script>
$(function() {// 1. 给tbody内的奇数行添加样式$("tbody tr:odd").css("background-color", "#f2f2f2");// 2. 给tbody内的偶数行添加样式$("tbody tr:even").css("background-color", "#fff");// 3. 鼠标悬停效果$("tbody tr").hover(function() {$(this).css("background-color", "#ddd");},function() {// 恢复原来的背景色var index = $(this).index();$(this).css("background-color", index % 2 === 0 ? "#fff" : "#f2f2f2");});
});
</script>

案例3：全选与反选

<div class="checkbox-group"><input type="checkbox" id="checkAll"> 全选/取消全选<br><input type="checkbox" class="checkItem"> 选项1<br><input type="checkbox" class="checkItem"> 选项2<br><input type="checkbox" class="checkItem"> 选项3<br><button id="reverseBtn">反选</button>
</div><script>
$(function() {// 1. 全选/取消全选$("#checkAll").click(function() {$(".checkItem").prop("checked", $(this).prop("checked"));});// 2. 当所有子选项被选中时，自动勾选全选$(".checkItem").click(function() {var allChecked = $(".checkItem").length === $(".checkItem:checked").length;$("#checkAll").prop("checked", allChecked);});// 3. 反选功能$("#reverseBtn").click(function() {$(".checkItem").each(function() {$(this).prop("checked", !$(this).prop("checked"));});// 更新全选按钮状态var allChecked = $(".checkItem").length === $(".checkItem:checked").length;$("#checkAll").prop("checked", allChecked);});
});
</script>