jquery标签
jQuery 标签基础
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 标签相关的核心内容：
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery，可以使用 CDN 或本地文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器语法 jQuery 使用 CSS 选择器语法选取 DOM 元素：
$("p") // 选择所有 <p> 标签
$("#myId") // 选择 id="myId" 的元素
$(".myClass") // 选择 class="myClass" 的元素常用标签操作
- 修改内容：
$("p").text("新文本"); // 设置文本内容 $("div").html("<b>加粗文本</b>"); // 设置 HTML 内容 - 修改属性：
$("img").attr("src", "new-image.jpg"); // 修改 src 属性 $("a").removeAttr("target"); // 删除属性
动态标签操作
创建新标签
使用 $() 直接包裹 HTML 字符串创建新元素：
var newDiv = $("<div>", {
class: "box",
text: "动态创建的内容"
});
$("body").append(newDiv); // 插入到页面插入标签
append(): 在元素内部末尾插入prepend(): 在元素内部开头插入after(): 在元素之后插入before(): 在元素之前插入
示例：
$("#container").append("<p>追加段落</p>");
$("h1").after("<hr>");事件绑定
通过 on() 方法为标签绑定事件：
$("button").on("click", function() {
alert("按钮被点击");
});常用事件简写形式：
$("input").focus(function() { /* 获取焦点时触发 */ });
$("form").submit(function() { /* 表单提交时触发 */ });样式操作
直接修改 CSS 属性：
$("p").css("color", "red"); // 单个属性
$("div").css({
"background": "#eee",
"padding": "10px"
}); // 多个属性类名操作：
$("span").addClass("highlight");
$("li").removeClass("inactive");
$("img").toggleClass("border");Ajax 与标签更新
通过 $.ajax() 加载数据并更新标签内容：
$.ajax({
url: "data.php",
success: function(data) {
$("#result").html(data);
}
});简写方法：
$("#content").load("fragment.html #section1");动画效果
基础显示/隐藏：
$(".box").hide(500); // 500ms 淡出
$(".menu").show("slow"); // 慢速显示自定义动画：
$(".panel").animate({
opacity: 0.5,
left: "+=50px"
}, 1000);链式操作
jQuery 支持方法链式调用：
$("li")
.css("color", "blue")
.slideUp(200)
.slideDown(200);插件扩展
通过 $.fn 扩展自定义方法：
$.fn.highlight = function() {
this.css("background", "yellow");
return this; // 保持链式调用
};
$("p").highlight();性能优化
- 缓存选择器结果：
var $items = $(".long-list li"); - 使用事件委托：
$("table").on("click", "td", function() { // 只在 table 上绑定一个事件 }); - 优先使用原生方法处理简单操作
