文章目录
- 1.节点操作
- 2.节点属性操作
- 3.遍历节点
- 4.元素内容操作
1.节点操作
- 查找节点:
$(function (){
console.log($("ul li"));
})
- 创建新元素：
// 创建新的 < div> 元素并添加到 body 中
$("< div>").appendTo("body");
// 创建带有文本内容的 < p> 元素并添加到指定元素中
$("< p>").text("这是新段落").appendTo("#container");
- 插入和移动元素：
您可以使用 jQuery 将现有元素插入到其他元素中，或者从一个位置移动到另一个位置。例如：
javascript
// 将元素插入到另一个元素的内部最后一个子元素之后
$("div").insertAfter("p");
// 将元素移动到另一个位置
$("p").appendTo("#container");
- 删除元素：
使用 jQuery，您可以轻松地删除文档中的元素。例如：
javascript
// 删除所有 < div> 元素
$("div").remove();
// 删除特定 ID 的元素
$("#myElement").remove();
- 替换元素：
您可以使用 jQuery 将一个元素替换为另一个元素。例如：
// 用一个新的 < div> 元素替换现有的 < p> 元素
$("p").replaceWith("< div>新内容</ div>");
- 包裹元素：
您可以使用 jQuery 将元素包裹在另一个元素中。例如：
// 将所有 < img> 元素包裹在一个 < div> 中
$("img").wrap("< div class='image-wrapper'>< /div>");
- 清空元素内容：
使用 jQuery，您可以清空元素的内容，但保留元素本身。例如：
// 清空所有 < ul> 元素的内容
$("ul").empty();
- 复制节点
$(".click").click(function () {
// 复制 .pc 元素并将其添加到 .container 中
$(".pc").clone().appendTo(".container");
});
2.节点属性操作
获取属性值：您可以使用 .attr() 方法来获取节点的属性值。例如：
// 获取 id 为 myElement 的元素的 title 属性的值
var title = $("#myElement").attr("title");
设置属性值：您可以使用 .attr() 方法来设置节点的属性值。例如：
// 设置 id 为 myElement 的元素的 title 属性的值为 "新标题"
$("#myElement").attr("title", "新标题");
删除属性：您可以使用 .removeAttr() 方法来移除节点的属性。例如：
// 移除 id 为 myElement 的元素的 title 属性
$("#myElement").removeAttr("title");
检查是否存在属性：您可以使用 .hasAttr() 方法来检查节点是否具有特定属性。例如：
// 检查 id 为 myElement 的元素是否具有 title 属性
var hasTitle = $("#myElement").hasAttr("title");
添加类名：您可以使用 .addClass() 方法来添加类名到节点上。例如：
// 添加类名 "active" 到 id 为 myElement 的元素上
$("#myElement").addClass("active");
移除类名：您可以使用 .removeClass() 方法来从节点上移除类名。例如：
// 从 id 为 myElement 的元素上移除类名 "active"
$("#myElement").removeClass("active");
切换类名：您可以使用 .toggleClass() 方法来切换节点上的类名。例如：
// 如果 id 为 myElement 的元素上存在类名 "active"，则移除它；如果不存在，则添加
$("#myElement").toggleClass("active");
3.遍历节点
.each() 方法：.each() 方法用于迭代匹配的元素集合，并为每个元素执行指定的函数。例如：
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});
上述代码将打印出所有 < li> 元素的文本内容和它们在集合中的索引。
.children() 方法：.children() 方法用于获取匹配元素集合中每个元素的子元素。例如：
$("ul").children().css("background-color", "yellow");
上述代码将使所有 < ul> 元素的直接子元素的背景颜色变为黄色。
.find() 方法：.find() 方法用于获取匹配元素集合中每个元素的后代元素。例如：
$("div").find("p").addClass("highlight");
上述代码将为所有 <div> 元素中的 <p> 后代元素添加类名 "highlight"。
.parent() 方法：.parent() 方法用于获取匹配元素集合中每个元素的父元素。例如：
$("li").parent().addClass("parent-highlight");
上述代码将为所有 <li> 元素的父元素添加类名 "parent-highlight"。
.siblings() 方法：.siblings() 方法用于获取匹配元素集合中每个元素的同级兄弟元素。例如：
$("li").siblings().addClass("sibling-highlight");
上述代码将为所有 <li> 元素的同级兄弟元素添加类名 "sibling-highlight"。
.prev() 和 .next() 方法：.prev() 方法用于获取匹配元素集合中每个元素的前一个同级元素，而 .next() 方法用于获取每个元素的后一个同级元素。例如：
$("li").prev().addClass("prev-highlight");
$("li").next().addClass("next-highlight");
4.元素内容操作
.text() 方法：.text() 方法用于设置或获取元素的文本内容。如果不提供参数，则返回匹配元素集合中第一个元素的文本内容；如果提供参数，则设置所有匹配元素的文本内容为指定的文本。例如：
// 获取元素的文本内容
var text = $("#myElement").text();
// 设置元素的文本内容
$("#myElement").text("新的文本内容");
.html() 方法：.html() 方法用于设置或获取元素的 HTML 内容。如果不提供参数，则返回匹配元素集
合中第一个元素的 HTML 内容；如果提供参数，则设置所有匹配元素的 HTML 内容为指定的 HTML。例如：
// 获取元素的 HTML 内容
var htmlContent = $("#myElement").html();
// 设置元素的 HTML 内容
$("#myElement").html("<p>新的 HTML 内容</p>");
.val() 方法：.val() 方法用于获取或设置表单元素的值。如果不提供参数，则返回匹配元素集合中第一
个表单元素的值；如果提供参数，则设置所有匹配元素的值为指定的值。例如：
// 获取表单元素的值
var value = $("input").val();
// 设置表单元素的值
$("input").val("新的值");
.attr() 和 .removeAttr() 方法：.attr() 方法用于获取或设置元素的属性值，.removeAttr() 方法用于移除
元素的属性。例如：
// 获取元素的属性值
var href = $("a").attr("href");
// 设置元素的属性值
$("a").attr("href", "http://www.example.com");
// 移除元素的属性
$("a").removeAttr("href");
