Jquey节点操作
创建添加节点:
创建jquery对象:$("<a href="http://baidu.com" target="_blank">百度请点击我</a>");
append:添加节点到子元素的最后面 $("div").append($("p"));{找到div元素,在div元素的最后面添加一个p元素}
prepend:添加节点到子元素的最前面 $("div").prepend($("p"));{找到div元素,在div元素的最前面添加一个p元素}
appendTO:将子元素添加到父元素的最后面 $("p").appendTo($("div"));{将p元素添加到div元素的最后面}
prependTo:将子元素添加到父元素的最前面 $("p").prependTO($("div")); {将p元素添加到div元素的最前面
after:将一个元素添加到另一个元素的后面,作为同级元素(兄弟元素平级的)
before:将一个元素添加到另一个元素的前面,作为同级元素(兄弟元素平级的)
<div class="box">
我是div中的元素
</div>
<p>我是外面的p1元素</p>
<p>我是外面的p2元素</p>
<p>我是外面的p3元素</p>
<p>我是外面的p4元素</p>
<p>我是外面的p5元素</p>
<script>
//在div元素的后面添加一个a元素并且点击能跳转百度
var $a=$('<a href="www.baidu.com" target="_blank">点击我</a>');
console.log($a)
$("div").append($a); //将p2元素添加到div元素的最后面
$("p").eq().appendTo("div");
//将p3 p4元素添加到div元素的最前面
$("p").eq().prependTo("div");
var $b=$("p").eq();
$("div").prepend($b);
</script>
删除节点与清空节点
empty();清空一个元素中的所有内容包括事件。 html("");也可以清空内容,但是不要这么写,会内容泄露(他会把元素中的元素添加一个”“的内容)
remove();移除元素
clone();克隆元素,不传参数也是深度复制 如果传递true 也是深度复制,元素的事件也会克隆,false则不会 默认为false。
<div class="box">
我是div中的元素
</div>
<p>我是外面的p1元素</p>
<p>我是外面的p2元素</p>
<p>我是外面的p3元素</p>
<p>我是外面的p4元素</p>
<p>我是外面的p5元素</p>
<script>
//删除p5元素节点
$("p").eq().remove();
//克隆p4元素节点到div元素节点的最后面
$("p").eq().clone().appendTo($("div"));
//清空div所有元素节点
$("div").empty(); </script>
Jquey节点操作的更多相关文章
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 第6章 DOM节点操作
一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- ligerui_ligerTree_004_对"ligerTree"节点操作
ligerTree节点操作: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码: json.txt: [ { text ...
- ext 树节点操作
ext 树节点操作 tree :树 node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parent ...
- cocos2d-x 节点操作 -->J2ME
cocos2d-x 的节点操作涉及到以下几点 1. 节点之间的关系 2. 节点的添加操作 3. 节点的删除操作 4. ...
随机推荐
- C#解密退款req_info结果通知
微信支付退款结果通知API地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_16&index=10 static v ...
- WPF 内存泄漏优化经历
最近公司有个CS客户端程序,有个登录界面,有个程序的主界面,程序支持注销功能,但是在注销后,客户端的内存一直以40M-50M的速度递增,因此猜测,应该是WPF程序出现了内存泄漏.下面主要记录优化内存泄 ...
- .Net下EF的简单实现
1.连接SQLServer,创建数据库TestDB; 2.添加EF引用,点击工具-NuGet包管理器-管理解决方案的NuGet程序包, 搜索EntityFramework包,点击安装: 3.在Web. ...
- asp.net mvc+httpclient+asp.net mvc api入门篇
第一步:创建一个ASP.NET MVC API项目 第二步:在api项目里面创建一个类 public class Student { public int Id { get; set; } publi ...
- Python random模块 获取随机数的使用
random.randomrandom.random()用于生成一个0到1的随机符点数: 0 <= n < 1.0 random.uniformrandom.uniform(a, b),用 ...
- Linux学习笔记-基本操作2
1. 压缩包管理2. 进程管理3. 网路管理4. ftp服务器搭建5. nfs服务器搭建6. ssh服务器7. scp命令8. 其他命令9. 关机重启 1. 压缩包管理 1>. 屌丝版:不能对目 ...
- SSH 学习笔记
零.背景 在看 pm2 的 deploy 功能的时候,对 ssh 的不熟悉导致错误频出,包括之前对 github 的配置也用到了 SSH,所以找个机会整理一下. 一.介绍 SSH 是每一台 Linux ...
- tomcat服务的启动与隐藏启动(win)
一: tomcat的启动与隐藏启动 1. 正常启动:D:\apache-tomcat-8.5.24\bin中的 startup.bat 双击启动 2. 启动tomcat服务后,window下方 ...
- 大数据与Hadoop
figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...
- 人工智能_机器学习——pandas - 箱型图
箱型图对数据的展示也是非常清晰的,这是箱型图的一些代码 #导报 机器学习三剑客 import numpy as np import pandas as pd from matplotlib impor ...