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. ...
随机推荐
- [Proposal]MyTools
[名称]:MyTools [需求分析]:现在市场上常用的移动端工具类APP,要么功能单一,如手电筒,录音机,指南针等,要么虽然有多种功能的整合,但只是单一的堆砌,内部依然是一个个独立的功能模块,并未形 ...
- Swagger ui测试中的验证 apikey
Swagger ui测试中的验证 apikey 我们使用swagger 用来呈现webapi的接口,除了可以看到接口的说明和参数说明,还可以进行测试.但是我们的接口通常是有验证的,不是随便就能调用的, ...
- MariaDB 数据库系统概述(1)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
- Spring Boot log4j多环境日志级别的控制
之前介绍了在<Spring boot中使用log4j>,仅通过log4j.properties对日志级别进行控制,对于需要多环境部署的环境不是很方便,可能我们在开发环境大部分模块需要采用D ...
- VSTO:C#获取文档控件的值
基础知识准备: VSTO入门 创建Excel解决方案 string[] inputfileNames = { @"C:\1.xls", @"C:\2.xls" ...
- 机器学习基石笔记:14 Regularization
一.正则化的假设集合 通过从高次多项式的H退回到低次多项式的H来降低模型复杂度, 以降低过拟合的可能性, 如何退回? 通过加约束条件: 如果加了严格的约束条件, 没有必要从H10退回到H2, 直接使用 ...
- 采用太平洋AI集装箱箱号识别接口实现集装箱箱号识别
识别 示例图片 1 太平洋AI集装箱箱号识别接口(文档下方有详细操作指南) 1.1 接口一:提交base64格式的图片 地址:http://218.1.125.60:88/container_num_ ...
- element UI form 验证
1 form 添加rules,具体属性添加prop, 注意 prop 属性与v-model 子属性一致 2 data 对象添加 rules 3 验证方法调用 验证规则见: https://github ...
- git status的用法
git status 用于查看工作区与暂存区的已tracked及untracked的所有文件status. 以下为help结果. git help status NAME git-status - S ...
- ubuntu图形化配置
安装图形界面 apt-get install ubuntu-desktop 配置用户目录 udo useradd -s /bin/bash -d /home/wykeinstein -m wykein ...