jQuery补充知识点

jQuery 进阶必备：链式编程、each 迭代、多库共存三大核心技巧

本文专注讲解 jQuery链式编程、each 遍历、多库共存三大补充知识点，是前端开发提升代码效率、解决框架冲突的必备技能，内容精炼实用，新手也能快速掌握！

一、链式编程 ------ 让代码更简洁优雅

1. 什么是链式编程

在 jQuery 中，对元素进行设置操作 后，方法会返回当前 jQuery 对象，因此可以连续调用多个方法，无需重复获取元素，这就是链式编程。

2. 核心规则

设置操作：可以延续链式编程（返回 jQuery 对象）
获取操作：中断链式编程（返回属性值，不返回对象）

3. 基础用法

javascript

运行

复制代码

// 普通写法（重复获取元素）
$("div").css("color","red");
$("div").addClass("active");
$("div").show();

// 链式写法（推荐，简洁高效）
$("div").css("color","red").addClass("active").show();

4. end () 方法 ------ 恢复上一次状态

当使用筛选选择器（如find()、children()）改变 jQuery 对象时，用end()可以回到上一个对象状态，继续链式操作。

javascript

运行

复制代码

$(".box")  
  .find("p")       // 筛选子元素p
  .css("color","red")  
  .end()           // 回到.box对象
  .css("background","#fff");

5. 实战场景

五角星评分、Tab 切换、表单操作等，大量使用链式编程优化代码。

二、each 方法 ------ 精准遍历元素

1. 作用

jQuery 的隐式迭代 只能给所有元素设置相同样式 / 内容 ，而each()可以遍历 jQuery 集合 ，为每个元素单独设置不同的值。

2. 语法

javascript

运行

复制代码

$(selector).each(function(index, element){
  // index：当前元素的索引号（从0开始）
  // element：当前原生DOM元素
});

3. 示例：给多个 div 设置不同透明度

javascript

运行

复制代码

$("div").each(function(index, item){
  // 索引越大，透明度越低
  $(item).css("opacity", 1 - index * 0.2);
});

4. 核心特点

遍历每一个匹配元素
支持自定义逻辑，实现差异化设置
配合索引做排序、分组、样式区分非常方便

5. 实战场景

商品列表不同透明度、导航栏索引判断、五角星评分等。

三、多库共存 ------ 解决 $ 符号冲突

1. 冲突原因

jQuery 默认使用$作为简写符号，如果页面同时引入其他框架（如 Zepto、Prototype）也使用$，就会产生符号冲突。

2. 解决方案：$.noConflict ()

jQuery 提供noConflict()方法，释放 $ 的控制权，避免冲突。

3. 用法

javascript

运行

复制代码

// 释放$，把jQuery功能交给自定义变量c
var c = $.noConflict();

// 之后使用c代替$
c("div").show();
c(".box").css("color","red");

4. 高级用法

javascript

运行

复制代码

// 直接传参，不定义新变量
$.noConflict();
jQuery("p").click();

// 立即执行函数，局部使用$
(function($){
  $("div").hide();
})(jQuery);

5. 适用场景

多框架混合开发、旧项目维护、插件封装。

四、高频知识点总结

jQuery 实用方法详解

链式编程（Method Chaining）

链式编程是 jQuery 的核心特性之一，允许在一个语句中连续调用多个方法。这种设计模式使得代码更加简洁易读。

实现原理：

每个 jQuery 方法（除少数例外）都会返回 jQuery 对象本身
这样就可以在同一个对象上连续调用多个方法

典型示例：

javascript 复制代码

$('#myElement')
  .css('color', 'red')
  .addClass('highlight')
  .fadeIn(500)
  .on('click', function() {
    alert('Clicked!');
  });

end() 方法：

用于返回到最近一次破坏性操作之前的 jQuery 对象状态
常见破坏性操作包括：.find(), .filter(), .parent() 等

示例：

javascript 复制代码

$('ul.first')
  .find('.selected')
    .css('background', 'yellow')
  .end()
  .find('.highlight')
    .css('color', 'red');

应用场景：

复杂的 DOM 操作
需要连续设置多个属性的情况
需要保持代码整洁的项目

each() 遍历方法

jQuery 的 each() 方法提供了灵活的元素遍历能力。

基本语法：

javascript 复制代码

$(selector).each(function(index, element) {
  // 操作代码
});

参数说明：

index: 当前元素在集合中的索引（从0开始）
element: 当前遍历到的 DOM 元素（不是 jQuery 对象）

使用示例：

javascript 复制代码

// 为列表项设置不同的颜色
$('li').each(function(index) {
  $(this).css('color', index % 2 === 0 ? 'blue' : 'green');
});

// 获取所有输入框的值
var values = [];
$('input[type="text"]').each(function() {
  values.push($(this).val());
});

与原生 forEach 的区别：

可以用于类数组对象和 jQuery 对象
回调函数中的 this 指向当前 DOM 元素
可以通过返回 false 提前终止循环

高级用法：

javascript 复制代码

// 处理 JSON 数据
$.each(jsonData, function(key, value) {
  console.log(key + ": " + value);
});

多库共存（noConflict() 方法）

当页面中同时使用多个 JavaScript 库时，可能会因为 $ 符号冲突导致问题。jQuery 提供了解决方案。

基本用法：

javascript 复制代码

var jq = $.noConflict();
// 现在可以使用 jq 代替 $
jq(document).ready(function() {
  jq('div').hide();
});

完全释放：

javascript 复制代码

$.noConflict(true);
// 释放 jQuery 和 $ 变量
// 此时需要访问原始 jQuery 对象只能通过 jQuery 变量

与其他库配合的最佳实践：

在引入其他库之前先引入 jQuery
立即调用 noConflict()

使用立即执行函数封装代码：

javascript 复制代码

(function($) {
  // 在这里安全使用 $ 作为 jQuery 别名
  $(document).ready(function() {
    // jQuery 代码
  });
})(jQuery);

常见冲突场景：

与 Prototype.js 共存
与 MooTools 共存
与 AngularJS 等现代框架共存

这些方法共同构成了 jQuery 强大而灵活的基础功能，使得 DOM 操作、事件处理和 AJAX 交互变得更加简单高效。

结语

链式编程、each 迭代、多库共存是 jQuery 进阶开发的三大实用技巧，能大幅提升代码质量和开发效率，也是面试常考知识点。掌握它们，你的 jQuery 开发水平将直接提升一个档次！