当前位置：网站首页 > 软件专业 > 前端开发专业 > 正文

Web前端开发|jQuery如何进行节点操作？_惠州前端培训学校

作者：alu发布时间：2022-03-22分类：前端开发专业浏览：695

导读：很多想学前端的同学都会问“jQuery如何进行节点操作？”这个问题，那么下面惠州北大青鸟老师给大家解答一下。

很多想学前端的同学都会问“jQuery如何进行节点操作？”这个问题，那么下面惠州北大青鸟老师给大家解答一下。

<!DOCTYPE html><html><head>

<title>Title</title>

$(function () {

$("button:first").click(function () {

// 追加节点

$("div").append("<P>动态创建的p元素</P>");

});

$("button").eq(1).click(function () {

// 把这个元素追加给后面$("div")元素

$("<p>动态创建的p元素</p>").appendTo($("div"));

});

$("button").eq(2).click(function () {

// 首部添加

$("div").prepend("<P>动态创建的p元素</P>");

});

$("button").eq(3).click(function () {

// 把动态生成的元素添加给div的头部

$("<P>动态创建的p元素</P>").prependTo($("div"));

});

$("button").eq(4).click(function () {

// after 往后面添加兄弟节点

$("div").after("<p>我是div后面的兄弟节点</p>");

});

$("button").eq(5).click(function () {

// before 往前面添加兄弟节点

$("div").before("<p>我是div后面的兄弟节点</p>");

});

$("button").eq(6).click(function () {

// 把前面的元素，放到后面div元素的前面，兄弟节点(顺序不可颠倒)

$("<p>我在哪？</p>").insertBefore("div");

});

$("button").eq(7).click(function () {

// 把前面的元素，放到后面div元素的前面，兄弟节点(顺序不可颠倒)

$("<p>我在哪？</p>").insertAfter("div");

});

// 删除节点元素

$("button").eq(8).click(function () {

$("div").remove();

});

// 删除子节点元素,但留下自己

$("button").eq(9).click(function () {

// $("div").empty();

$("div").html(""); // 效果与empty相同，推荐使用此方法

});

// 复制节点

$("button").eq(10).click(function () {

// clone 参数：

// true ：深度复制,会将被复制元素的事件一同复制

// 默认为flase ：浅层复制，只复制元素

$("div").append($("p").clone());

});

jQuery节点前端

// 包裹节点用后面的元素包裹前面的元素

$("button").eq(11).click(function () {

$("span").wrap($("p"));

});

// 包裹所有节点

$("button").eq(12).click(function () {

$("ul").wrapAll($("div"));

});

// 替换节点

$("button").eq(13).click(function () {

$("ul").replaceWith($("p"));

});

})

</script></head><body><button>append 追加节点</button><button>appendTo 追加节点</button><button>prepend 首部添加</button><button>prependTo 首部添加</button><button>after 往后面添加兄弟节点</button><button>before 往前面添加兄弟节点</button><button>insertBefore 往前面添加兄弟节点</button><button>insertAfter 往后面添加兄弟节点</button><br/><br/><button>remove 删除节点</button><button>empty 删除节点</button><button>clone 复制节点</button><button>wrap 包裹节点</button><button>wrapAll 包裹所有节点</button><button>replaceWith 替换节点</button><div>

<h1>我是h1标题</h1></div><p>我是div外面的p元素，不是动态添加的</p><span>我是一个小span</span><ul>

更多前端资讯关注网站动态，或者来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟

上一篇：Web前端开发|IE事件如何处理函数？_惠州前端培训学校
下一篇：Web前端开发的学习顺序是什么？_惠州前端培训学校

Web前端开发|jQuery如何进行节点操作？_惠州前端培训学校

相关推荐