jquery操作DOM 元素(2)
.after()
在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。
.after(content[,content])
content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
.after(function)
function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
结构:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').after('<p>Test</p>');
效果:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
.before()
根据参数设定,在匹配参数的前面插入插入内容。
.after(content[,content])
content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
.after(function)
function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
结构:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').before('<p>Test</p>');
效果:
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>
.insertAfter()
在目标元素的后面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
.insertAfter(target)
target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标后面。
结构:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$("<p>Test</p>").insertAfter('.insertAfter');
效果:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
.insertBefore()
在目标元素的前面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
.insertBefore(target)
target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标前面。
结构:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$("<p>Test</p>").insertBefore('.insertAfter');
效果:
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>
jquery操作DOM 元素(2)的更多相关文章
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- jquery操作DOM 元素(3)
.detach() 从DOM 中去掉所匹配的元素. .detach([selector]) selector 一个选择表达式将需要移除的从匹配的元素中过滤出来. $("p").de ...
- 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素
1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...
- Jquery 操作DOM元素
一.文本输入框: text <input type=”text” value=”99.com” size=12 id=”input1” /> 1.获取文本值: $("#input ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
随机推荐
- [编程题] 小易喜欢的数列 dp
https://www.nowcoder.com/question/next?pid=6291726&qid=112729&tid=12736753 [编程题] 小易喜欢的数列 时间限 ...
- 关于TCP 半连接队列和全连接队列
关于TCP 半连接队列和全连接队列 http://jm.taobao.org/2017/05/25/525-1/ 发表于 2017-05-25 | 作者 蛰剑 | 分类于 网络 ...
- (转)Linux命令:使用dig,nslookup命令解析域名
Linux命令:使用dig命令解析域名 Linux下解析域名除了使用nslookup之外,开可以使用dig命令来解析域名,dig命令可以得到更多的域名信息. dig的全称是 (domain infor ...
- Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks
这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...
- HDU 5360——Hiking——————【贪心+优先队列】
Hiking Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Su ...
- HDU 5336——XYZ and Drops——————【广搜BFS】
XYZ and Drops Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- SpingCloud微服务架构学习(二)之Actuator监控
我们那我们之前编写的服务提供者为例,为项目添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId& ...
- mysql-数据库模式定义语言(DDL)
库的管理 /* 一.库的管理 创建.修改.删除 二.表的管理 创建.修改.删除 创建: create 修改: alter 删除: drop */ #一.库的管理 #.库的创建 /* 语法: creat ...
- 服务器断电后 redis重启后启动不起来
服务器断电后 redis 重启后启动不起来 原因:db持久化失败 1. 先查询redis的进程 ps -ef|grep redis 2. 查询redis的缓存文件在哪 whereis dump.rdb ...
- poj 3140 树形去边差异最小
http://poj.org/problem?id=3140 依然是差异最小问题,不过这次是去边.思路是这样的,先记录每个点的子节点个数,然后遍历每个边. 有两个问题要注意: abs可能会出编译适配问 ...