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. ...
随机推荐
- Crontab有关
AIX下面 0,2,4,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,58 * * * * /usr/s ...
- XML随笔:语法快速入门及当下流行的RSS简析
今天是本人第一次写博客,之前闭门造车闹出过很多笑话,恰巧这几天刚刚重温了一遍XML的知识,决定把XML的知识再来从头到尾的理一遍,感触颇多,今天分享给大家.希望大家能多多注意其中的要点. 1.定义 首 ...
- EFCore2.1中DbFirst和CodeFirst简单使用
EFCore中没有DbFirst了吧,应该都是Code First 先说说第一种,Code First From Database(DbFirst)数据库先行,这种方式就要命令行了...(特不喜欢命令 ...
- C# 使用Google Protocol Buffers
Google Protocol Buffers 使用3.0版本 下载protoc.exe 下载链接 https://github.com/protocolbuffers/protobuf/releas ...
- [HEOI2016/TJOI2016]字符串(后缀数组+二分+主席树/后缀自动机+倍增+线段树合并)
后缀数组解法: 先二分最长前缀长度 \(len\),然后从 \(rnk[c]\) 向左右二分 \(l\) 和 \(r\) 使 \([l,r]\) 的 \(height\geq len\),然后在主席树 ...
- nsurlsessiond - taking up all bandwidth!! Help ?
https://discussions.apple.com/thread/6605949?start=0&tstart=0 #!/bin/sh launchctl unload /System ...
- Django(框架、模板)
day65 参考:https://www.cnblogs.com/liwenzhou/p/8296964.html Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间 ...
- Spark踩坑——java.lang.AbstractMethodError
今天新开发的Structured streaming部署到集群时,总是报这个错: SLF4J: Class path contains multiple SLF4J bindings. SLF4J: ...
- vue教程1-06 v-bind属性、class和style
vue教程1-06 属性.class和style 一.属性 属性: v-bind:src="" width/height/title.... 简写: :src="&quo ...
- odoo开发笔记 -- 模型一对多tree视图弹窗效果实现
实现效果参考: 1. 开发者模式 -- 设置 -- 工作流 -- 编辑 -- 添加项目 2. 会计模块 -- 管理 -- 付款条款 -- 编辑/创建 实现方式,很简单.只要视图界面写个一对多关联字段就 ...