jQuery文档操作常用方法1
文章目录
- jQuery文档操作常用方法1
- 内部插入
- 1.appendTo( )
- 2.prependTo( )
- 外部插入
- 1.insertAfter( )
- 2.insertBefore( )
- 替换
- 1.replaceWith()
- 2.replaceAll( )
- 删除
- 1.remove( )
- 2.empty( )
jQuery文档操作常用方法1
内部插入
1.appendTo( )
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
语法:
$(content).appendTo(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
selector | 必需。规定把内容追加到哪个元素上。 |
实例:
$("button").click(function(){$("<b>Hello World!</b>").appendTo("p"); //在每个 p 元素结尾处插入粗体内容
});
2.prependTo( )
prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容。
语法:
$(content).prependTo(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
selector | 必需。规定在何处插入内容 |
实例:
$("button").click(function(){$("<b>Hello World!</b>").prependTo("p"); //在每个p元素的开始处插入粗体内容
})
外部插入
1.insertAfter( )
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。(和内部插入不同,这里是插入到被选元素的后面,而不是被选元素内的结尾处)。
如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后
语法:
$(content).insertAfter(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容。可能的值: 选择器表达式 HTML 标记 |
selector | 必需。规定在何处插入内容 |
实例:
$("button").click(function(){$("<b>Hello World!</b>").insertAfter("p"); //在每个p元素的后面插入b元素
})
2.insertBefore( )
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。
如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。
语法:
$(content).insertBefore(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容。可能的值: 选择器表达式 HTML 标记 |
selector | 必需。规定在何处插入内容 |
实例:
$("button").click(function(){$("<b>Hello World!</b>").insertBefore("p"); //在每个p元素的前面插入b元素
})
替换
1.replaceWith()
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
语法:
$(selector).replaceWith(content)
参数 | 描述 |
---|---|
content | 必需。规定替换被选元素的内容。 可能的值: HTML 代码 - 比如 ("") 新元素 - 比如 (document.createElement(“div”)) 已存在的元素 - 比如 ($(".div1")) 。已存在的元素会覆盖被替换的元素,然后起初的元素会消失 |
selector | 必需。规定要被替换的元素 |
实例:
$("button").click(function(){$("p").replaceWith("<b>Hello World!</b>"); //把每个p元素替换成b元素
})
2.replaceAll( )
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
语法:
$(content).replaceAll(selector)
参数 | 描述 |
---|---|
content | 必需。规定替换被选元素的内容。 可能的值: HTML 代码 - 比如 ("") 新元素 - 比如 (document.createElement(“div”)) 已存在的元素 - 比如 ($(".div1")) 。已存在的元素会覆盖被替换的元素,然后起初的元素会消失 |
selector | 必需。规定要被替换的元素 |
实例:
$("button").click(function(){$("<b>Hello World!</b>").replaceAll("p"); //把每个p元素替换成b元素
})
replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。
删除
1.remove( )
remove() 方法移除被选元素,包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。
这一点与 detach() 不同。detach()方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
而empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
语法:
$(selector).remove()
参数 | 描述 |
---|---|
selector | 必需。要删除的元素 |
实例:
$("button").click(function(){$("p").remove(); //移除所有p元素
})
2.empty( )
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
语法:
$(selector).empty()
参数 | 描述 |
---|---|
selector | 必需。要删除内容的元素 |
实例:
$("button").click(function(){$("p").emptye(); //移除所有p元素中的内容
})
jQuery文档操作常用方法1相关推荐
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使 ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
- jQuery Api 学习(六、jQuery 文档 - 操作文档)
文章目录 1. 内部插入 2. 外部插入 3. 清空元素内容 4. 克隆元素 1. 内部插入 将新建元素插入到目标元素的内部 函数名 参数 调用方 描述 append 新建的 DOM 字符串 目标 j ...
- jQuery文档操作之删除操作
remove() 语法: $(selector).remove(); 解释:删除节点后,事件也会删除(简言之,删除了整个标签) $("ul").remove(); detach() ...
- jQuery 文档操作 - replaceWith() 方法
实例 使用新文本替换第一个P元素: $(".btn1").click(function(){$("p").replaceWith("<b> ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
- jQuery 属性,css,文档操作
dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> ...
- day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- JavaScript之jQuery够用即可(查找筛选器、属性操作、jQuery文档处理)
文章目录 一.筛选器补充 二.jQuery属性操作 三.jQuery文档处理 一.筛选器补充 1.过滤筛选器 就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
- 06-jQuery的文档操作***
之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...
最新文章
- Rust基础笔记:Getting input from the console
- React-Native原理及生命周期
- 彩云国物语片头曲_はじまりの風
- sql IFNULL
- python之turtle库(画图)
- POJ - 1041 John's trip(欧拉回路)
- freetextbox java_FreeTextBox3.2.2下载及使用详解(图)
- webstorm前端常用快捷键
- redis命令 举例
- SublimeText3快捷键简要总结
- [转载]jQuery操作Table学习总结
- new mediacontroller(this) this报错_面试官问你JS的this指向,你能跟他聊多少?
- Redis持久化策略AOF、RDB详解及源码分析
- Android短信拦截代码
- FDTD_谐振腔的Q值计算(2D/3D)
- 江苏省普通高校“专转本”选拔考试 计算机专业大类专业综合基础理论考试大纲
- gsoc 任务_gsoc 2020与cern hsf暗物质和深度学习
- 机器学习面试宝典200题!
- Unity Shader-遮挡处理(X-Ray,遮挡描边,遮挡半透,遮挡溶解)
- 微信公众号之刷卡支付