jQuery 编程的 100 个实用技巧：原理解析与代码示例

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。尽管现代前端开发中，原生 JavaScript 和框架（如 React、Vue）逐渐成为主流，但 jQuery 仍然在许多项目中广泛使用。本文将深入探讨 100 个 jQuery 编程技巧，结合原理解析和代码示例，帮助开发者更好地掌握 jQuery。

---

1. 选择器基础

原理解析

jQuery 的核心功能之一是选择器，它允许开发者通过 CSS 选择器语法快速定位 DOM 元素。

代码示例

// 选择所有 <p> 元素
$('p');

// 选择 ID 为 "myId" 的元素
$('#myId');

// 选择类名为 "myClass" 的元素
$('.myClass');

---

2. 链式调用

原理解析

jQuery 支持链式调用，可以在一个语句中连续调用多个方法。

代码示例

$('p').addClass('highlight').css('color', 'red');

---

3. DOM 操作

原理解析

jQuery 提供了丰富的 DOM 操作方法，如 append、prepend、remove 等。

代码示例

// 在元素末尾添加内容
$('#myDiv').append('<p>New paragraph</p>');

// 在元素开头添加内容
$('#myDiv').prepend('<p>First paragraph</p>');

// 移除元素
$('#myDiv').remove();

---

4. 事件绑定

原理解析

jQuery 简化了事件绑定，支持 click、hover、on 等方法。

代码示例

// 绑定点击事件
$('#myButton').click(function() {
  alert('Button clicked!');
});

// 使用 on 方法绑定事件
$('#myButton').on('click', function() {
  alert('Button clicked!');
});

---

5. Ajax 请求

原理解析

jQuery 提供了简洁的 Ajax API，支持 $.ajax、$.get、$.post 等方法。

代码示例

// 发送 GET 请求
$.get('https://api.example.com/data', function(response) {
  console.log(response);
});

// 发送 POST 请求
$.post('https://api.example.com/data', { name: 'John' }, function(response) {
  console.log(response);
});

---

6. 动画效果

原理解析

jQuery 提供了丰富的动画方法，如 hide、show、fadeIn、fadeOut 等。

代码示例

// 隐藏元素
$('#myDiv').hide();

// 显示元素
$('#myDiv').show();

// 淡入元素
$('#myDiv').fadeIn();

// 淡出元素
$('#myDiv').fadeOut();

---

7. 遍历 DOM

原理解析

jQuery 提供了 each 方法，用于遍历 DOM 元素。

代码示例

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

---

8. 属性操作

原理解析

jQuery 提供了 attr、removeAttr 等方法，用于操作元素的属性。

代码示例

// 获取属性值
var src = $('#myImage').attr('src');

// 设置属性值
$('#myImage').attr('src', 'new-image.jpg');

// 移除属性
$('#myImage').removeAttr('src');

---

9. 类操作

原理解析

jQuery 提供了 addClass、removeClass、toggleClass 等方法，用于操作元素的类。

代码示例

// 添加类
$('#myDiv').addClass('highlight');

// 移除类
$('#myDiv').removeClass('highlight');

// 切换类
$('#myDiv').toggleClass('highlight');

---

10. 样式操作

原理解析

jQuery 提供了 css 方法，用于操作元素的样式。

代码示例

// 获取样式值
var color = $('#myDiv').css('color');

// 设置样式值
$('#myDiv').css('color', 'red');

// 设置多个样式值
$('#myDiv').css({
  'color': 'red',
  'font-size': '20px'
});

---

11. 表单操作

原理解析

jQuery 提供了 val 方法，用于获取或设置表单元素的值。

代码示例

// 获取输入框的值
var value = $('#myInput').val();

// 设置输入框的值
$('#myInput').val('New Value');

---

12. DOM 就绪事件

原理解析

jQuery 提供了 $(document).ready 方法，用于在 DOM 加载完成后执行代码。

代码示例

$(document).ready(function() {
  console.log('DOM is ready!');
});

---

13. 延迟执行

原理解析

jQuery 提供了 delay 方法，用于延迟执行后续操作。

代码示例

$('#myDiv').fadeIn().delay(1000).fadeOut();

---

14. 停止动画

原理解析

jQuery 提供了 stop 方法，用于停止当前动画。

代码示例

$('#myDiv').stop();

---

15. 自定义动画

原理解析

jQuery 提供了 animate 方法，用于创建自定义动画。

代码示例

$('#myDiv').animate({
  opacity: 0.5,
  left: '+=50',
  height: 'toggle'
}, 1000);

---

16. 事件委托

原理解析

jQuery 支持事件委托，通过 on 方法将事件绑定到父元素。

代码示例

$('#myList').on('click', 'li', function() {
  alert('List item clicked!');
});

---

17. 阻止事件冒泡

原理解析

jQuery 提供了 event.stopPropagation 方法，用于阻止事件冒泡。

代码示例

$('#myButton').click(function(event) {
  event.stopPropagation();
  alert('Button clicked!');
});

---

18. 阻止默认行为

原理解析

jQuery 提供了 event.preventDefault 方法，用于阻止默认行为。

代码示例

$('#myLink').click(function(event) {
  event.preventDefault();
  alert('Link clicked!');
});

---

19. 动态加载脚本

原理解析

jQuery 提供了 $.getScript 方法，用于动态加载 JavaScript 文件。

代码示例

$.getScript('my-script.js', function() {
  console.log('Script loaded!');
});

---

20. JSONP 请求

原理解析

jQuery 支持 JSONP 请求，用于跨域获取数据。

代码示例

$.ajax({
  url: 'https://api.example.com/data',
  dataType: 'jsonp',
  success: function(response) {
    console.log(response);
  }
});

---

21. 遍历数组

原理解析

jQuery 提供了 $.each 方法，用于遍历数组或对象。

代码示例

var arr = [1, 2, 3];
$.each(arr, function(index, value) {
  console.log(index + ': ' + value);
});

---

22. 扩展 jQuery

原理解析

jQuery 提供了 $.fn.extend 方法，用于扩展 jQuery 的原型。

代码示例

$.fn.extend({
  highlight: function() {
    return this.css('background-color', 'yellow');
  }
});

$('#myDiv').highlight();

---

23. 插件开发

原理解析

jQuery 插件是通过扩展 $.fn 对象实现的。

代码示例

(function($) {
  $.fn.myPlugin = function(options) {
    var settings = $.extend({
      color: 'red',
      fontSize: '20px'
    }, options);

    return this.css({
      color: settings.color,
      fontSize: settings.fontSize
    });
  };
})(jQuery);

$('#myDiv').myPlugin({ color: 'blue' });

---

24. 数据存储

原理解析

jQuery 提供了 data 方法，用于在元素上存储数据。

代码示例

// 存储数据
$('#myDiv').data('key', 'value');

// 获取数据
var value = $('#myDiv').data('key');

---

25. 移除数据

原理解析

jQuery 提供了 removeData 方法，用于移除元素上存储的数据。

代码示例

$('#myDiv').removeData('key');

---

26. 检查元素是否存在

原理解析

通过检查 jQuery 对象的长度，可以判断元素是否存在。

代码示例

if ($('#myDiv').length) {
  console.log('Element exists!');
}

---

27. 获取父元素

原理解析

jQuery 提供了 parent 方法，用于获取元素的父元素。

代码示例

var parent = $('#myDiv').parent();

---

28. 获取子元素

原理解析

jQuery 提供了 children 方法，用于获取元素的子元素。

代码示例

var children = $('#myDiv').children();

---

29. 获取兄弟元素

原理解析

jQuery 提供了 siblings 方法，用于获取元素的兄弟元素。

代码示例

var siblings = $('#myDiv').siblings();

---

30. 过滤元素

原理解析

jQuery 提供了 filter 方法，用于过滤元素。

代码示例

var filtered = $('li').filter('.highlight');

---

31. 查找元素

原理解析

jQuery 提供了 find 方法，用于查找元素的后代元素。

代码示例

var found = $('#myDiv').find('p');

---

32. 克隆元素

原理解析

jQuery 提供了 clone 方法，用于克隆元素。

代码示例

var cloned = $('#myDiv').clone();

---

33. 替换元素

原理解析

jQuery 提供了 replaceWith 方法，用于替换元素。

代码示例

$('#myDiv').replaceWith('<p>New content</p>');

---

34. 包裹元素

原理解析

jQuery 提供了 wrap 方法，用于包裹元素。

代码示例

$('#myDiv').wrap('<div class="wrapper"></div>');

---

35. 解包元素

原理解析

jQuery 提供了 unwrap 方法，用于解包元素。

代码示例

$('#myDiv').unwrap();

---

36. 插入元素

原理解析

jQuery 提供了 insertBefore 和 insertAfter 方法，用于插入元素。

代码示例

$('<p>New paragraph</p>').insertBefore('#myDiv');
$('<p>New paragraph</p>').insertAfter('#myDiv');

---

37. 获取元素位置

原理解析

jQuery 提供了 offset 方法，用于获取元素的位置。

代码示例

var position = $('#myDiv').offset();
console.log(position.top, position.left);

---

38. 获取元素尺寸

原理解析

jQuery 提供了 width、height 等方法，用于获取元素的尺寸。

代码示例

var width = $('#myDiv').width();
var height = $('#myDiv').height();

---

39. 滚动到元素

原理解析

jQuery 提供了 scrollTop 方法，用于滚动到元素。

代码示例

$('html, body').animate({
  scrollTop: $('#myDiv').offset().top
}, 1000);

---

40. 禁用表单元素

原理解析

jQuery 提供了 prop 方法，用于禁用表单元素。

代码示例

$('#myInput').prop('disabled', true);

---

41. 启用表单元素

原理解析

jQuery 提供了 prop 方法，用于启用表单元素。

代码示例

$('#myInput').prop('disabled', false);

---

42. 检查复选框状态

原理解析

jQuery 提供了 is 方法，用于检查复选框的状态。

代码示例

if ($('#myCheckbox').is(':checked')) {
  console.log('Checkbox is checked!');
}

---

43. 设置复选框状态

原理解析

jQuery 提供了 prop 方法，用于设置复选框的状态。

代码示例

$('#myCheckbox').prop('checked', true);

---

44. 获取选中的单选按钮

原理解析

jQuery 提供了 :checked 选择器，用于获取选中的单选按钮。

代码示例

var selected = $('input[name="myRadio"]:checked').val();

---

45. 获取选中的选项

原理解析

jQuery 提供了 :selected 选择器，用于获取选中的选项。

代码示例

var selected = $('#mySelect option:selected').val();

---

46. 动态添加选项

原理解析

jQuery 提供了 append 方法，用于动态添加选项。

代码示例

$('#mySelect').append('<option value="3">Option 3</option>');

---

47. 移除选项

原理解析

jQuery 提供了 remove 方法，用于移除选项。

代码示例

$('#mySelect option[value="2"]').remove();

---

48. 清空下拉列表

原理解析

jQuery 提供了 empty 方法，用于清空下拉列表。

代码示例

$('#mySelect').empty();

---

49. 获取表单数据

原理解析

jQuery 提供了 serialize 方法，用于获取表单数据。

代码示例

var formData = $('#myForm').serialize();
console.log(formData);

---

50. 获取表单数据为对象

原理解析

jQuery 提供了 serializeArray 方法，用于获取表单数据为对象。

代码示例

var formData = $('#myForm').serializeArray();
console.log(formData);

---

51. 重置表单

原理解析

jQuery 提供了 trigger 方法，用于重置表单。

代码示例

$('#myForm').trigger('reset');

---

52. 动态创建元素

原理解析

jQuery 允许通过 HTML 字符串动态创建元素。

代码示例

var newElement = $('<div>New element</div>');
$('#myDiv').append(newElement);

---

53. 移除事件

原理解析

jQuery 提供了 off 方法，用于移除事件。

代码示例

$('#myButton').off('click');

---

54. 一次性事件

原理解析

jQuery 提供了 one 方法，用于绑定一次性事件。

代码示例

$('#myButton').one('click', function() {
  alert('Button clicked once!');
});

---

55. 触发事件

原理解析

jQuery 提供了 trigger 方法，用于触发事件。

代码示例

$('#myButton').trigger('click');

---

56. 自定义事件

原理解析

jQuery 支持自定义事件，可以通过 trigger 方法触发。

代码示例

$('#myDiv').on('customEvent', function() {
  alert('Custom event triggered!');
});

$('#myDiv').trigger('customEvent');

---

57. 延迟加载图片

原理解析

通过 jQuery 可以实现图片的延迟加载。

代码示例

$('img.lazy').each(function() {
  $(this).attr('src', $(this).data('src'));
});

---

58. 动态加载 CSS

原理解析

jQuery 提供了 $.get 方法，用于动态加载 CSS 文件。

代码示例

$.get('my-styles.css', function(css) {
  $('<style>').text(css).appendTo('head');
});

---

59. 检查元素可见性

原理解析

jQuery 提供了 :visible 选择器，用于检查元素是否可见。

代码示例

if ($('#myDiv').is(':visible')) {
  console.log('Element is visible!');
}

---

60. 隐藏元素

原理解析

jQuery 提供了 hide 方法，用于隐藏元素。

代码示例

$('#myDiv').hide();

---

61. 显示元素

原理解析

jQuery 提供了 show 方法，用于显示元素。

代码示例

$('#myDiv').show();

---

62. 切换元素可见性

原理解析

jQuery 提供了 toggle 方法，用于切换元素的可见性。

代码示例

$('#myDiv').toggle();

---

63. 淡入元素

原理解析

jQuery 提供了 fadeIn 方法，用于淡入元素。

代码示例

$('#myDiv').fadeIn();

---

64. 淡出元素

原理解析

jQuery 提供了 fadeOut 方法，用于淡出元素。

代码示例

$('#myDiv').fadeOut();

---

65. 滑动元素

原理解析

jQuery 提供了 slideDown、slideUp 等方法，用于滑动元素。

代码示例

$('#myDiv').slideDown();
$('#myDiv').slideUp();

---

66. 停止滑动

原理解析

jQuery 提供了 stop 方法，用于停止滑动。

代码示例

$('#myDiv').stop();

---

67. 延迟动画

原理解析

jQuery 提供了 delay 方法，用于延迟动画。

代码示例

$('#myDiv').fadeIn().delay(1000).fadeOut();

---

68. 自定义动画

原理解析

jQuery 提供了 animate 方法，用于创建自定义动画。

代码示例

$('#myDiv').animate({
  opacity: 0.5,
  left: '+=50',
  height: 'toggle'
}, 1000);

---

69. 停止所有动画

原理解析

jQuery 提供了 stop 方法，用于停止所有动画。

代码示例

$('#myDiv').stop(true);

---

70. 获取窗口尺寸

原理解析

jQuery 提供了 width、height 等方法，用于获取窗口的尺寸。

代码示例

var windowWidth = $(window).width();
var windowHeight = $(window).height();

---

71. 获取文档尺寸

原理解析

jQuery 提供了 width、height 等方法，用于获取文档的尺寸。

代码示例

var documentWidth = $(document).width();
var documentHeight = $(document).height();

---

72. 获取滚动位置

原理解析

jQuery 提供了 scrollTop、scrollLeft 等方法，用于获取滚动位置。

代码示例

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

---

73. 设置滚动位置

原理解析

jQuery 提供了 scrollTop、scrollLeft 等方法，用于设置滚动位置。

代码示例

$(window).scrollTop(100);
$(window).scrollLeft(100);

---

74. 绑定窗口滚动事件

原理解析

jQuery 提供了 scroll 方法，用于绑定窗口滚动事件。

代码示例

$(window).scroll(function() {
  console.log('Window scrolled!');
});

---

75. 绑定窗口调整大小事件

原理解析

jQuery 提供了 resize 方法，用于绑定窗口调整大小事件。

代码示例

$(window).resize(function() {
  console.log('Window resized!');
});

---

76. 绑定键盘事件

原理解析

jQuery 提供了 keydown、keyup 等方法，用于绑定键盘事件。

代码示例

$(document).keydown(function(event) {
  console.log('Key pressed: ' + event.key);
});

---

77. 绑定鼠标事件

原理解析

jQuery 提供了 mousedown、mouseup 等方法，用于绑定鼠标事件。

代码示例

$('#myDiv').mousedown(function() {
  console.log('Mouse down!');
});

---

78. 绑定鼠标移动事件

原理解析

jQuery 提供了 mousemove 方法，用于绑定鼠标移动事件。

代码示例

$('#myDiv').mousemove(function(event) {
  console.log('Mouse moved: ' + event.pageX + ', ' + event.pageY);
});

---

79. 绑定鼠标悬停事件

原理解析

jQuery 提供了 hover 方法，用于绑定鼠标悬停事件。

代码示例

$('#myDiv').hover(function() {
  console.log('Mouse entered!');
}, function() {
  console.log('Mouse left!');
});

---

80. 绑定焦点事件

原理解析

jQuery 提供了 focus、blur 等方法，用于绑定焦点事件。

代码示例

$('#myInput').focus(function() {
  console.log('Input focused!');
});

$('#myInput').blur(function() {
  console.log('Input blurred!');
});

---

81. 绑定表单提交事件

原理解析

jQuery 提供了 submit 方法，用于绑定表单提交事件。

代码示例

$('#myForm').submit(function(event) {
  event.preventDefault();
  console.log('Form submitted!');
});

---

82. 绑定表单改变事件

原理解析

jQuery 提供了 change 方法，用于绑定表单改变事件。

代码示例

$('#myInput').change(function() {
  console.log('Input changed!');
});

---

83. 绑定表单输入事件

原理解析

jQuery 提供了 input 方法，用于绑定表单输入事件。

代码示例

$('#myInput').on('input', function() {
  console.log('Input value changed!');
});

---

84. 绑定表单重置事件

原理解析

jQuery 提供了 reset 方法，用于绑定表单重置事件。

代码示例

$('#myForm').on('reset', function() {
  console.log('Form reset!');
});

---

85. 绑定表单选择事件

原理解析

jQuery 提供了 select 方法，用于绑定表单选择事件。

代码示例

$('#myInput').on('select', function() {
  console.log('Text selected!');
});

---

86. 绑定表单粘贴事件

原理解析

jQuery 提供了 paste 方法，用于绑定表单粘贴事件。

代码示例

$('#myInput').on('paste', function() {
  console.log('Text pasted!');
});

---

87. 绑定表单剪切事件

原理解析

jQuery 提供了 cut 方法，用于绑定表单剪切事件。

代码示例

$('#myInput').on('cut', function() {
  console.log('Text cut!');
});

---

88. 绑定表单复制事件

原理解析

jQuery 提供了 copy 方法，用于绑定表单复制事件。

代码示例

$('#myInput').on('copy', function() {
  console.log('Text copied!');
});

---

89. 绑定表单拖放事件

原理解析

jQuery 提供了 drag、drop 等方法，用于绑定表单拖放事件。

代码示例

$('#myDiv').on('drag', function() {
  console.log('Element dragged!');
});

$('#myDiv').on('drop', function() {
  console.log('Element dropped!');
});

---

90. 绑定表单拖拽事件

原理解析

jQuery 提供了 dragstart、dragend 等方法，用于绑定表单拖拽事件。

代码示例

$('#myDiv').on('dragstart', function() {
  console.log('Drag started!');
});

$('#myDiv').on('dragend', function() {
  console.log('Drag ended!');
});

---

91. 绑定表单拖拽进入事件

原理解析

jQuery 提供了 dragenter 方法，用于绑定表单拖拽进入事件。

代码示例

$('#myDiv').on('dragenter', function() {
  console.log('Drag entered!');
});

---

92. 绑定表单拖拽离开事件

原理解析

jQuery 提供了 dragleave 方法，用于绑定表单拖拽离开事件。

代码示例

$('#myDiv').on('dragleave', function() {
  console.log('Drag left!');
});

---

93. 绑定表单拖拽悬停事件

原理解析

jQuery 提供了 dragover 方法，用于绑定表单拖拽悬停事件。

代码示例

$('#myDiv').on('dragover', function() {
  console.log('Drag over!');
});

---

94. 绑定表单拖拽释放事件

原理解析

jQuery 提供了 drop 方法，用于绑定表单拖拽释放事件。

代码示例

$('#myDiv').on('drop', function() {
  console.log('Drag dropped!');
});

---

95. 绑定表单拖拽结束事件

原理解析

jQuery 提供了 dragend 方法，用于绑定表单拖拽结束事件。

代码示例

$('#myDiv').on('dragend', function() {
  console.log('Drag ended!');
});

---

96. 绑定表单拖拽取消事件

原理解析

jQuery 提供了 dragcancel 方法，用于绑定表单拖拽取消事件。

代码示例

$('#myDiv').on('dragcancel', function() {
  console.log('Drag canceled!');
});

---

97. 绑定表单拖拽开始事件

原理解析

jQuery 提供了 dragstart 方法，用于绑定表单拖拽开始事件。

代码示例

$('#myDiv').on('dragstart', function() {
  console.log('Drag started!');
});

---

98. 绑定表单拖拽进入目标事件

原理解析

jQuery 提供了 dragenter 方法，用于绑定表单拖拽进入目标事件。

代码示例

$('#myDiv').on('dragenter', function() {
  console.log('Drag entered target!');
});

---

99. 绑定表单拖拽离开目标事件

原理解析

jQuery 提供了 dragleave 方法，用于绑定表单拖拽离开目标事件。

代码示例

$('#myDiv').on('dragleave', function() {
  console.log('Drag left target!');
});

---

100. 绑定表单拖拽悬停目标事件

原理解析

jQuery 提供了 dragover 方法，用于绑定表单拖拽悬停目标事件。

代码示例

$('#myDiv').on('dragover', function() {
  console.log('Drag over target!');
});

---

总结

本文详细介绍了 100 个 jQuery 编程技巧，涵盖了选择器、DOM 操作、事件处理、动画、Ajax、表单操作等多个方面。通过掌握这些技巧，开发者可以更高效地使用 jQuery 构建动态、交互性强的网页应用。尽管现代前端开发中，原生 JavaScript 和框架逐渐成为主流，但 jQuery 仍然是许多项目中的重要工具。