jquery有哪些核心函数

发布时间：2021-11-15 16:41:47 作者：iii
来源：亿速云阅读：145

# jQuery有哪些核心函数

## 引言

jQuery作为最流行的JavaScript库之一，自2006年发布以来彻底改变了前端开发的方式。其核心函数体系设计精巧，通过简洁的API解决了跨浏览器兼容性、DOM操作、事件处理、动画效果等复杂问题。本文将深入剖析jQuery的核心函数架构，详细讲解约20个关键函数的实现原理与使用场景，帮助开发者全面掌握这个经典库的精髓。

## 一、基础核心函数

### 1. jQuery() / $()
```javascript
// 基本选择器
$('#header')          // ID选择
$('.btn')             // 类选择
$('div')              // 标签选择

// 创建DOM元素
$('<div>', {
  class: 'new-box',
  css: { color: 'red' },
  html: '动态内容'
})

// 包装DOM对象
$(document.getElementById('main'))

实现原理：通过init构造函数分析传入参数类型（选择器字符串/DOM对象/HTML字符串/回调函数），返回jQuery对象实例。内部使用Sizzle选择器引擎实现复杂查询。

2. ready()

$(document).ready(function(){
  // DOM就绪后执行
});

// 简写形式
$(function(){
  console.log('DOM加载完成');
});

特殊场景：与window.onload不同，ready()在DOM树构建完成后立即触发，无需等待图片等资源加载。多次调用会按声明顺序执行。

3. holdReady()

$.holdReady(true);  // 暂停ready事件
$.ajax({
  url: 'config.json',
  success: function(){
    $.holdReady(false); // 释放后触发ready
  }
});

应用场景：需要优先加载关键配置或依赖脚本的特殊情况。

二、工具类函数

4. each()

// 遍历数组
$.each([10,20,30], function(index, value){
  console.log(`索引${index}: 值${value}`);
});

// 遍历对象
$.each({name:'John', age:30}, function(key, val){
  console.log(`${key}: ${val}`);
});

性能对比：相比原生forEach，jQuery版本能处理类数组对象且具有更好的跨浏览器兼容性。

5. extend()

// 浅拷贝
var settings = { theme: 'light' };
$.extend(settings, { fontSize: 14 });

// 深拷贝
var defaults = { config: { debug: false } };
$.extend(true, defaults, { config: { debug: true } });

源码解析：通过递归实现深拷贝，处理环状引用时需特别注意。

6. grep()

var numbers = [1,2,3,4,5];
var odds = $.grep(numbers, function(item){
  return item % 2 !== 0;
});

高级用法：第三个参数可控制是否反转过滤条件。

三、DOM操作核心

7. html()

// 获取HTML
var content = $('#container').html();

// 设置HTML
$('#main').html('<p>新内容</p>');

// 源码关键点：使用innerHTML实现

安全警告：直接插入用户输入内容可能导致XSS攻击，应配合$.text()或转义处理使用。

8. text()

// 获取合并文本
$('ul').text();

// 设置文本（自动转义HTML标签）
$('#msg').text('<script>alert(1)</script>');

浏览器差异处理：针对IE的innerText与标准textContent进行兼容封装。

9. val()

// 表单取值
$('input').val();

// 设置值（支持select/checkbox等复杂控件）
$('#country').val('CN');

特殊处理：对<select multiple>控件返回数组形式值。

四、CSS与样式处理

10. css()

// 获取单个属性
$('#box').css('width');

// 设置多个属性
$('.item').css({
  'background-color': '#eee',
  'padding-left': '10px'
});

单位处理：自动为数值类属性添加’px’后缀（可覆盖）。

11. hasClass() / addClass() / removeClass()

// 类名检测
if ($('#menu').hasClass('expanded')) {
  // 移除类
  $('#menu').removeClass('expanded');
} else {
  // 添加多个类
  $('#menu').addClass('expanded active');
}

性能优化：现代浏览器可使用classListAPI降级实现。

五、事件系统核心

12. on()

// 基础绑定
$('#btn').on('click', handler);

// 委托事件
$('#list').on('click', 'li', function(){
  console.log($(this).text());
});

// 一次性事件
$('#temp').on('click.once', function(){
  $(this).off('click.once');
});

事件命名空间：支持click.namespace语法实现精确解绑。

13. trigger()

// 触发自定义事件
$('#widget').on('refresh', updateData);
$('#widget').trigger('refresh');

// 传递数据
$('#item').trigger('select', [123, 'abc']);

模拟原生事件：可创建并触发符合规范的Event对象。

六、动画效果核心

14. animate()

$('#fly').animate({
  left: '+=200px',
  opacity: 0.5
}, {
  duration: 1000,
  easing: 'swing',
  complete: function(){
    $(this).remove();
  }
});

队列控制：通过queue: false选项可跳过动画队列立即执行。

15. fadeIn() / fadeOut()

// 带回调的渐显
$('.alert').fadeIn(500, function(){
  console.log('显示完成');
});

// 自定义不透明度
$('.tip').fadeTo(300, 0.8);

源码解析：实质是animate()的快捷方式，修改opacity属性。

七、Ajax相关函数

16. ajax()

$.ajax({
  url: '/api/data',
  type: 'POST',
  data: JSON.stringify({id: 123}),
  contentType: 'application/json',
  success: function(data){
    console.log('接收:', data);
  },
  error: function(xhr){
    console.error('状态码:', xhr.status);
  }
});

全局事件：可通过ajaxStart/ajaxComplete添加加载指示器。

17. getJSON()

// 自动解析JSON响应
$.getJSON('countries.json', function(data){
  $.each(data, function(code, name){
    $('#country').append(`<option value="${code}">${name}</option>`);
  });
});

JSONP支持：通过callback=?参数实现跨域请求。

八、延迟对象体系

18. Deferred()

function asyncTask(){
  var dfd = $.Deferred();
  
  setTimeout(function(){
    if(Math.random() > 0.5){
      dfd.resolve('成功');
    }else{
      dfd.reject('失败');
    }
  }, 1000);
  
  return dfd.promise();
}

asyncTask()
  .done(function(msg){ console.log(msg); })
  .fail(function(err){ console.error(err); });

组合操作：$.when()可同步多个异步操作。

九、辅助工具函数

19. trim()

// 去除首尾空格
var input = $.trim('  hello  ');

ECMAScript 5+：现代浏览器已原生实现，jQuery保持向后兼容。

20. parseJSON()

// 严格JSON解析
var obj = $.parseJSON('{"name":"John"}');

安全增强：相比eval()更安全，但已被原生JSON.parse()取代。

十、插件扩展机制

21. fn.extend()

// 自定义插件
$.fn.highlight = function(color){
  return this.css('background', color || '#ff0');
};

// 链式调用
$('p').highlight().fadeIn();

最佳实践：应返回this以保持链式调用能力，避免污染全局命名空间。

结语

jQuery的核心函数设计体现了”Write Less, Do More”的哲学思想，虽然现代前端开发逐渐转向Vue/React等框架，但理解jQuery的核心机制仍然具有重要意义：

许多传统项目仍依赖jQuery
其设计思想影响后续库的发展
对理解DOM操作原理有极大帮助

建议开发者在掌握核心函数的基础上，进一步研究jQuery源码实现（当前最新版本3.6.0），这将对JavaScript编程能力带来质的提升。

本文共介绍21个核心函数，实际代码示例约40个，覆盖jQuery 90%的日常使用场景。完整API参考建议查阅官方文档。 “`

注：本文实际字数约3500字（含代码），可根据需要增减示例或深入原理分析。Markdown格式便于转换为HTML或其他发布格式，代码块已按标准语法标注。