jquery常用查询总结

JQuery 是一个广泛使用的 JavaScript 库，极大地简化了网页中的 DOM 操作、事件处理和动画效果。本篇文章将深入探讨 `jQuery` 中的一些常用查询和功能。 ### 1. jQuery 核心方法 `$` 是 jQuery 类的一个别名，`$()` 用于构造一个 jQuery 对象。jQuery 的所有功能都是通过这个函数实现的。例如： ```javascript // 选择所有 p 元素，且这些 p 元素都是 div 的子元素 $("div > p"); // 查找文档第一个表单中，所有的单选按钮 $("input:radio", document.forms[0]); // 在一个由 ajax 返回的 xml 文档中，查找所有的 div 元素 $("div", xml.responseXML); ``` ### 2. 创建 HTML 元素 使用 `$()` 可以根据 HTML 标记字符串创建 jQuery 对象包装的 DOM 元素。例如： ```javascript // 创建并追加一个 div 元素 $("<div><p>Hello</p></div>").appendTo("body"); // 创建一个 input 元素，设置 type 为 'text' $("<input type='text'>"); ``` ### 3. 转换 DOM 元素 可以将 DOM 元素转换为 jQuery 对象，便于使用 jQuery 提供的方法。例如： ```javascript // 设置页面背景色为黑色 $(document.body).css("background", "black"); ``` ### 4. 页面加载完成后的代码执行 `$(document).ready()` 或 `$(function(){})` 用于在页面加载完成后自动执行代码。 ```javascript $(document).ready(function() { // 页面加载完成后执行的代码 }); ``` ### 5. 访问 jQuery 对象 - `eq(index)`：返回指定索引的 jQuery 对象。 - `.each(function(index, element){})`：遍历匹配的元素，对每个元素执行指定的函数。 - `.size()` 或 `.length`：返回匹配元素的数量。 - `.get(index)`：获取匹配元素数组中的特定元素，`get()` 无参数时返回整个数组。 - `.index([element])`：返回指定元素在匹配元素集合中的索引位置。 ### 6. 插件机制 - `jQuery.fn.extend()`：扩展 jQuery 对象，添加新的方法，这些方法针对单个 DOM 元素。 - `$.extend()`：扩展 jQuery 命名空间，添加全局方法，这些方法作用于所有 DOM 元素。 例如： ```javascript // 扩展 jQuery 对象，添加 check 和 uncheck 方法 jQuery.fn.extend({ check: function() { this.each(function() { this.checked = true; }); }, uncheck: function() { this.each(function() { this.checked = false; }); } }); // 调用扩展的方法 $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); // 扩展全局方法 $.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); // 调用全局方法 var maxVal = $.max(10, 20); ``` ### 7. 选择器 - `$("#id")`：选择具有给定 ID 的元素。 - `$("dom 元素名")`：选择所有指定类型的元素。 - `$(".class")`：选择具有给定类名的元素。 - `$("*")`：选择所有元素。 jQuery 还提供了许多其他高级选择器，如属性选择器、伪类选择器等，例如： ```javascript // 选择所有 disabled 的 input 元素 $("input:disabled"); // 选择第一个子元素 $("ul > li:first-child"); // 选择最后一个子元素 $("ul > li:last-child"); ``` jQuery 提供了一套强大而简便的 API，使得开发者能够高效地进行网页交互和动态效果的实现。了解和熟练运用这些查询方法，可以极大地提高开发效率和代码质量。