jQuery DOM操作
2024-06-07 14:17:51
1. 创建元素
- $("")
2. 内部插入
- append()
- appendTo()
- prepend()
- prependTo()
demo
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery DOM操作</title><style>#box {width: 800px;padding: 20px;border: 2px dashed orange;}#box img {width: 200px;}</style>
</head>
<body><h1>DOM 操作</h1><hr><div id="box"><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""></div><br><h3>内部插入</h3><button id="appendBtn">append</button><button id="appendToBtn">appendTo</button><button id="prependBtn">prepend</button><button id="prependToBtn">prependTo</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function () {// appendTo 追加$("#appendBtn").click(function () {// // 创建一个新的元素// var $img = $("<img>")// console.log($img);// $img.prop("src", "http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg");//// $("#box").append($img);// 上下相等$("#box").append("<img src='#'>");});$("#appendToBtn").click(function () {$("<img src='#'>").appendTo("#box");});// 前插$("#prependBtn").click(function () {$("#box").prepend("<img src='#'>");});$("#prependToBtn").click(function () {$("<img src='#'>").prependTo("#box");});});</script>
</body>
</html>3. 外部插入
- after()
- insertAfter()
- before()
- insertBefore()
demo
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery DOM操作</title><style>#box {width: 800px;padding: 20px;border: 2px dashed orange;}img {width: 200px;}</style>
</head>
<body>
<h1>DOM 操作 -- 外部插入</h1>
<hr>
<div id="box"><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="afterBtn">after</button>
<button id="insertAfterBtn">insertAfter</button>
<button id="beforeBtn">before</button>
<button id="insertBeforeBtn">insertBefore</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>$(document).ready(function () {$("#afterBtn").click(function () {$("#box").after("<img src='#'>")});// after与insertAfter和append与appendTo的区别一样$("#insertAfterBtn").click(function () {$("<img src='#'>").insertAfter("#box");});$("#beforeBtn").click(function () {$("#box").before("<img src='#'>");});$("#insertBeforeBtn").click(function () {$("<img src='#'>").insertBefore("#box");});});
</script>
</body>
</html>
4. 包裹
- wrap()
- wrapAll()
- wrapInner()
- unwrap()
demo
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery DOM操作</title><style>#box {width: 800px;padding: 20px;border: 2px dashed orange;}img {width: 200px;}</style>
</head>
<body>
<h1>DOM 操作 -- 包裹</h1>
<hr>
<div id="box"><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="wrapBtn">wrap</button>
<button id="wrapAllBtn">wrapAll</button>
<button id="wrapInnerBtn">wrapInner</button>
<button id="unWrapBtn">unWrap</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function () {$("#wrapBtn").click(function () {// 每个img外套一个li标签$("#box img").wrap("<li>");});$("#wrapAllBtn").click(function () {// 所有img标签外套一个li标签$("#box img").wrapAll("<li>");});$("#wrapInnerBtn").click(function () {// 原先子元素的父元素$("#box").wrapInner("<li>");});$("#unWrapBtn").click(function () {// 去掉最外面一层$("#box img").unwrap();})});</script>
</body>
</html>
5. 替换
- replaceWith()
- replaceAll()
demo
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery DOM操作</title><style>#box {width: 800px;padding: 20px;border: 2px dashed orange;}img {box-sizing: border-box;width: 200px;}img.active{border: 2px solid red;}</style>
</head>
<body>
<h1>DOM 操作 -- 替换</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box"><div>点击替换</div><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="replaceWithBtn">replaceWith</button>
<button id="replaceAllBtn">replaceAll</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>$(document).ready(function () {// 选中图片$("#box img").click(function () {$(this).toggleClass("active").siblings("img").removeClass("active");})$("#replaceWithBtn").click(function () {// $("img.active").replaceWith("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>");// 将id为mewImg的图片覆盖选中的图片$("img.active").replaceWith($("#newImg"));});// replaceAll和replaceWith的区别和append与appendTo的区别一样$("#replaceAllBtn").click(function () {$("<img src='https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg'>").replaceAll("img.active");})});
</script>
</body>
</html>
6. 删除
- empty()
- remove()
- detach()
remove和detach的区别，remove删了之后恢复时，原先绑定的事件没有了，而detach删了恢复后，事件还在。
demo
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery DOM操作</title><style>#box {width: 800px;padding: 20px;border: 2px dashed orange;}img {box-sizing: border-box;width: 200px;}img.active{border: 2px solid red;}</style>
</head>
<body>
<h1>DOM 操作 -- 删除</h1>
<hr>
<img id="newImg" src="https://cdn.duitang.com/uploads/item/201507/27/20150727084803_cLrJP.thumb.700_0.jpeg">
<div id="box"><div>点击替换</div><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt=""><img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
</div>
<br>
<button id="emptyBtn">empty</button>
<button id="removeBtn">remove</button>
<button id="detachBtn">detach</button>
<button id="backBtn">恢复到后面</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>$(document).ready(function () {var removeEle = null;// 选中图片$("#box img").click(function () {$(this).toggleClass("active").siblings("img").removeClass("active");});$("#emptyBtn").click(function () {// 清空里面所有内容$("#box").empty();});$("#removeBtn").click(function () {// 清空选中的内容removeEle = $("img.active").remove();});$("#detachBtn").click(function () {removeEle = $("img.active").detach();});$("#backBtn").click(function () {$("#box").append(removeEle);})});
</script>
</body>
</html>
7. 克隆
- clone()
demo
<button id="cloneBtn">clone</button>
<script>$("#cloneBtn").click(function () {// 克隆出来的内容也没有事件绑定$("img.active").clone().appendTo("#box");});
</script>
jQuery DOM操作相关推荐
- jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery DOM操作之查找结点
下面是对jQuery DOM操作中查找结点的整理,希望可以帮助到有需要的小伙伴. 1.查找元素节点 使用jQuery中的选择器用法可以完成查找结点的操作,相对于DOM,jQuery更方便 2.查找属性 ...
- jQuery DOM操作与简单事件
1.1 DOM查询 过滤 eq(index|-index) 选出索引为index 的元素(0开始) ,负号表示可以倒着选(-1开) first() 选出第一个元素 last() 选出最后一个元素 ha ...
- jQuery Dom 操作，动态生成dom，绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
- jquery --- DOM操作、表单元素的初始化
1.获取ul里第2个li节点: var $li_two = $("ul li:eq(1)"); // 获取该节点的内容 var $li_two_txt = $li_two.text ...
- 锋利的JQuery —— DOM操作
图片猛戳链接 转载于:https://www.cnblogs.com/xing901022/p/5034527.html
- 03-老马jQuery教程-DOM操作(上）
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- JQuery(下) DOM操作习题
jQuery DOM 操作文本 常用方法 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
最新文章
- 删除web文本框中的内容需要或者文本框失去焦点，点击“Backspace”键时页面回退，屏蔽页面回退键的方法
- android ptrace注入
- c/c++宏函数的定义与使用（宏定义函数）（macro definition）
- 技术分享：如何避免ajax重复请求？
- EventSource
- Spring系列（八）：Spring生命周期中BeanPostProcessor接口用法介绍
- Android 扫描二维码demo
- 理解Storm Metrics
- ClickOnce Cannot download the application解决方法
- ubuntu换系统下载路径源
- Access操作的注意事项
- 代理模式（自己实现源码）
- 2008年IT产业38个判断(转载)
- 编程代码分析-使用winsock搜索蓝牙设备
- matlab 神经网络工具箱 nntraintool 详解
- 【001】半电池的开路电压测试_#LIB
- Django之发送邮件
- spring-AOP 增强接口Introductions
- 解决在SQLYog中执行SQL语句会提示错误的信息，但数据能查出来
- 喇叭的灵敏度代表什么