jquery $ 的使用
jQuery $ 的基本用法
$ 是 jQuery 的核心标识符，它是 jQuery 的别名，用于访问 jQuery 的功能。通过 $ 可以快速选择 DOM 元素或调用 jQuery 方法。
// 选择所有 <p> 元素
$("p").hide();
// 等价于
jQuery("p").hide();选择 DOM 元素
$ 主要用于通过 CSS 选择器获取 DOM 元素，返回的是一个 jQuery 对象，可以链式调用方法。
// 选择 ID 为 "myDiv" 的元素
$("#myDiv").css("color", "red");
// 选择 class 为 "item" 的所有元素
$(".item").addClass("active");文档就绪事件
$(document).ready() 确保代码在 DOM 完全加载后执行。
$(document).ready(function() {
// DOM 加载完成后执行的代码
});
// 简写形式
$(function() {
// 简化的文档就绪事件
});创建新元素
$ 可以动态创建 HTML 元素并插入到 DOM 中。
// 创建一个新的 <div> 元素
var newDiv = $("<div>", {
text: "Hello, jQuery!",
class: "box"
});
// 添加到 body 中
$("body").append(newDiv);方法链式调用
jQuery 支持链式调用，通过 $ 返回的对象可以连续调用多个方法。
$("#myButton")
.click(function() {
alert("Button clicked!");
})
.css("background", "blue")
.fadeOut(1000);避免冲突
如果其他库也使用了 $ 符号，可以通过 jQuery.noConflict() 释放 $ 的控制权。
var jq = jQuery.noConflict();
jq("#myElement").hide(); // 使用 jq 代替 $Ajax 请求
$ 还简化了 Ajax 请求的发送和处理。
$.ajax({
url: "data.json",
method: "GET",
success: function(data) {
console.log(data);
}
});实用工具方法
$ 提供了一些实用工具方法，如 $.each() 和 $.extend()。
// 遍历数组
$.each([1, 2, 3], function(index, value) {
console.log(value);
});
// 合并对象
var obj = $.extend({}, {a: 1}, {b: 2});注意事项
- 确保在引入其他库（如 Prototype）时处理
$冲突。 - 使用最新版本的 jQuery 以获得更好的性能和安全性。
- 选择器性能优化：尽量使用 ID 或类选择器，避免复杂的选择器。
