前言： 2021WebWeb前端开发jQuery节点操作。前几天小T无意间看到了跟这个相关的知识，觉得很实用，就特意把它整理出来，分
2021WebWeb前端开发jQuery节点操作。前几天小T无意间看到了跟这个相关的知识，觉得很实用，就特意把它整理出来，分享给大家，话不多说，一起来跟小T来看看这篇， 2021WebWeb前端开发jQuery节点操作吧!
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$(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节点 Web前端开发
// 包裹节点 用后面的元素包裹前面的元素
$("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>
<li></li>
<li></li>
<li></li></ul></body></html>
Web教程网是一个专注于技术资讯的综合性门户网站。是Web爱好者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。
文章出自：http://qh.itpxw.cn/peixun/web/202185688.html
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
IT培训网 访问该机构站点 报名留言 加为好友 用户等级:注册会员
用户级别:10
机构名称:IT培训网
联 系 人:罗老师
联系电话:13783581536
联系手机:13783581536
在线客服:
在 线 QQ:
电子邮件:
网站域名:http://www.itpxw.cn
注册时间:2016-07-18 11:07
最后登录:2024-02-20 13:02
今天小T要跟大家分享的文章是关于更适合做Web前端开发的几类...
今天小T要跟大家分享的文章是关于Web前端开发小白必备的学习...
今天小T要跟大家分享的文章是关于0基础小白学Web前端开发的学...
今天小T要跟大家分享的文章是关于Web前端开发工程师必备的排...
