jQuery 节点操作(创建 插入 删除 复制 替换 包裹)
一,创建元素节点:
第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:
$(html);
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素
二,插入元素节点:
1.append()
//<p>我是一个p标签</p>
//append()向每个匹配的元素内部追加内容
$('p').append('<p>您好!</p>');
//结果;<p>我是一个p标签<p>您好!</p></p> $('<p>您好!</p>').appendTo('p');
//结果;<p>我是一个p标签<p>您好!</p></p>
2.prepend()
//<p>我是一个p标签</p>
//prepend()向每个匹配的元素内部的前面 追加内容
$('p').prepend('<p>您好!</p>');
//结果;<p><p>您好!</p>我是一个p标签</p> $('<p>您好!</p>').prependTo('p');
//结果;<p><p>您好!</p>我是一个p标签</p>
3.after()
//<p>我是一个p标签</p>
//after()向每个匹配的元素之后添加内容
$('p').after('<p>您好!</p>');
//结果;<p>我是一个p标签</p><p>您好!</p> $('<p>您好!</p>').insertAfter('p');
//结果;<p>我是一个p标签</p><p>您好!</p>
4.before()
//<p>我是一个p标签</p>
//before()向每个匹配的元素之前添加内容
$('p').before('<p>您好!</p>');
//结果;<p>您好!</p><p>我是一个p标签</p> $('<p>您好!</p>').insertBefore('p');
//结果;<p>您好!</p><p>我是一个p标签</p>
三,删除元素节点:
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
//1、 remove() 方法
//当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将同时被删除。
//这个方法的返回值是一个指向已被删除的节点的引用, 因此可以在以后再使用这些元素。
//该节点所有绑定的事件、 附加的数据都会被删除
var $li = $("ul li:eq(0)").remove();//
$li.appendTo("ul"); //2、 detach() 方法
//detach () 和remove() 一样, 也是从DOM中去掉所有匹配的元素。
//但需要注意的是, 这个方法不会把匹配的元素从jQuery对象中删除, 因而可以在将来再使用这些匹配的元素。
//与remove() 不同的是, 所有绑定的事件、 附加的数据都会保留下来。
var $li = $("ul li:eq(0)").detach();
$li.appendTo("ul"); //3、 empty() 方法
//严格地讲, empty() 方法并不是删除节点, 而是清空节点, 它能清空元素中的所有后代节点。
var $li = $("ul li:eq(0)").empty();
$li.appendTo("ul");
四,复制元素节点:
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
$("ul li:eq(0)").click(function () {
console.log(this);
$(this).clone().appendTo('ul');//复制当前单击的节点,并将它追加到ul元素中
})
五,替换元素节点:
<body>
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$('p').click(function () {
$('p').replaceWith('<span>你最不喜欢的水果是?</span>') //span元素替换p元素
$("<span>你最不喜欢的水果是?</span>").replaceAll('p') //span元素替换p元素
})
});
</script>
</body>
六,包裹元素节点:
<body>
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$('p').click(function () {
$('p').wrap('<span></span>');//用<span>标签是包裹住p标签
//<span><p title="选择你最喜欢的水果?">你最喜欢的水果是?</p></span>
})
});
</script>
</body>
jQuery 节点操作(创建 插入 删除 复制 替换 包裹)的更多相关文章
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇)
ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [ http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- 第四章 jQuery节点操作
1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...
- 51 jquery 节点操作和 bootstrapt
jquery 和 bootstrapt1.jquery each 函数 1.each 循环方式一: 可循环对象: var arr =["alex","deng" ...
- JQuery --- 第五期 (JQuery节点操作)
学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- jQuery——节点操作
创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...
- MySQL进阶11--DDL数据库定义语言--库创建/修改/删除--表的创建/修改/删除/复制
/*进阶 11 DDL 数据库定义语言 库和表的管理 一:库的管理:创建/修改/删除 二:表的管理:创建/修改/删除 创建: CREATE DATABASE [IF NOT EXISTS] 库名; 修 ...
随机推荐
- ubuntu开机执行指令或脚本
vi /etc/rc.d/rc.localz 将指令添加到exit 0之前,保存.
- ubuntu下安装最新的nodejs
# apt-get update # apt-get install -y python-software-properties software-properties-common # add-ap ...
- marioTcp
https://github.com/nicholaszj/marioTcp MarioTCP MarioTCP 是使用libevent模型来建立的一个性能强大的TCP服务器. 1:Getting S ...
- 本周MySQL官方verified/open的bug列表(11月15日至11月21日)
本周MySQL verified的bug列表(11月15日至11月21日) 1. Bug #70923 Replication failure on multi-statement INSERT ...
- 16 Finding a Protein Motif
Problem To allow for the presence of its varying forms, a protein motif is represented by a shorthan ...
- PMP项目管理笔记
项目管理三重制约:时间.成本.范围.结果:质量(结果质量和过程质量)四个层次:复杂事情简单化:分解简单事情量化:临界值量化的事情专业化:规律专业的事情模板化:框架模板 工作分日常运作和项目.日常运作为 ...
- 【转】java遍历实体类的属性和数据类型以及属性值
和同学接了个外包的活,由于项目中很多地方要用到poi导出excel,而每次导出都要写很多相同的代码,因为poi的cell.setCellValue();每次设置的都是不同实体bean的属性值,导致代码 ...
- 转 org.aspectj.lang.JoinPoint-中文简要API
AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用org.aspectj.lang.ProceedingJoinPoint表示连接点 ...
- Android UI 之 ListView
一.在代码中创建(不适用XML布局文件) 1.创建一个项目:ListViewLearn 2.修改MainActivity,继承于ListActivity 3.创建一个String数组,用来保存List ...
- EBS通过SQL查找所有的定时请求
--查找所有定时请求. --也可以登录系统,在系统管理员下查找特定请求,状态设置为Scheduled进行查询SELECT DISTINCT USER_CONCURRENT_PROGRAM_NAME,B ...