jquery tag
jQuery 标签基础用法
jQuery 标签通常指通过 jQuery 选择器操作 HTML 元素(如 <div>、<a> 等)。核心方法是 $() 或 jQuery(),通过标签名、类名、ID 等选择元素。
// 选择所有 <p> 标签并修改内容
$("p").text("Hello, jQuery!");
// 选择带有 class="example" 的 <div> 标签
$("div.example").css("color", "red");
// 选择 ID 为 "header" 的 <h1> 标签
$("#header").hide();
动态创建标签
使用 jQuery 可以动态生成 HTML 标签并插入到 DOM 中。
// 创建一个新的 <span> 标签并添加到 body
$("<span>", {
text: "Dynamic content",
class: "highlight"
}).appendTo("body");
// 直接拼接 HTML 字符串
$("body").append("<ul><li>Item 1</li></ul>");
事件绑定与标签交互
jQuery 提供了便捷的事件绑定方法,如 click()、hover() 等。
// 点击按钮时切换 <p> 标签的显示状态
$("button").click(function() {
$("p").toggle();
});
// 鼠标悬停时修改 <a> 标签样式
$("a").hover(
function() { $(this).css("color", "blue"); },
function() { $(this).css("color", "black"); }
);
属性与内容操作
通过 attr()、html() 等方法可修改标签属性或内容。
// 修改所有 <img> 标签的 alt 属性
$("img").attr("alt", "New description");
// 获取或设置 <div> 的 HTML 内容
$("div.container").html("<strong>Updated content</strong>");
// 检查复选框是否被选中
if ($("input[type='checkbox']").is(":checked")) {
console.log("Checked!");
}
链式操作
jQuery 支持链式调用,可在一行代码中完成多个操作。
$("li")
.css("background", "yellow")
.filter(":even")
.css("border", "1px solid red");
以上示例覆盖了 jQuery 操作 HTML 标签的常见场景,包括选择、创建、事件绑定及属性修改。







