jQuery 文档操作
一.插入操作
1. 父元素.append(子元素)
追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$("ul").append("<li>haha</li>");
$("ul").append("oli");
$("ul").append($("#app"));
如果追加的是jquery对象那么这些元素将从原位置上消失, 简言之,就是一个移动操作
2. 子元素.appendTo(父元素)
追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
3. 父元素.prepend(子元素);
前置添加, 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
4. 子元素.prependTo(父元素)
前置添加, 添加到父元素的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
5. 兄弟元素.after(要插入的兄弟元素)
要插入的兄弟元素.inserAfter(兄弟元素);
在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
6. 兄弟元素.before(要插入的兄弟元素)
要插入的兄弟元素.innserBefore(兄弟元素)
二. 克隆操作
$(选择器).clone()
克隆匹配的DOM元素
$('button').click(function() { // 1.clone():克隆匹配的DOM元素
// 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
三.修改操作
1. $(selector).replaceWith(content)
将所有匹配的元素替换成指定的string, js对象, jquery对象
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
2. $("<p>哈哈哈</p>")replaceAll("h2")
替换所有, 将所有的h2标签替换成p标签.
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
四,删除操作
1. $(select).remove()
删除节点后, 事件也会删除(删除 了整个标签)
$('ul').remove();
2. $(select).datach()
删除节点后,事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
3. $(select).empty()
清空选中元素中的所有后代节点
//清空掉ul中的子元素,保留ul
$('ul').empty()
4. $(select).html("")
$(select).text("")
用空的内容替换
jQuery 文档操作的更多相关文章
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery 文档操作 - prependTo() ,appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- 前端之JQuery:JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
- jQuery文档操作--append()、prepend()、after()和before()
append(content|fn) 概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数 content 要追 ...
- jQuery文档操作--empty()和remove()
empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="U ...
- jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法
这个方法跟prependTo()和appendTo()不一样的地方在于,一个是仍然插入到元素内部,而insertAfter和insertBefore是插入到元素外部. 这里拿insertBefore来 ...
随机推荐
- Java 超类引用子类对象的示例代码
动态方法分配 dynamic method dispatch 一个被重写的方法的调用会在运行时解析,而不是编译时解析 Java 会根据在调用发生时引用的对象的类型来判断所要执行的方法 public c ...
- 《黑白团团队》第八次团队作业:Alpha冲刺 第五天
项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第五天 日期:2019/6/19 成员 ...
- C和C++ const的声明差异
当在C源代码文件中将变量声明为const时,可以通过以下方式实现: const int i = 2; 然后,可以在另一个模块中使用此变量,如下表示: extern const int i; 但若要获取 ...
- spring 整合freemarker 实现模板继承
<!--freemarker 配置--> <bean id="freemarkerConfig" class="org.springframework. ...
- BA--关于江森的学习笔记
机房功率密度:“每机架”功耗 数据中心效率:平均 PUE 2.5,百度是1.36,苹果是1.06 绿色数据中心:PUE<1.58 机房环境:空气质量,配电,UPS,空气处理系统,发电机,江森OD ...
- BA-风阀水阀执行器接线图
220水阀执行器接线图 24V风阀执行器接线图
- Linux安装vmtools
unbantu下,先把DVD的Vmwarew.gz,文件拷贝到tmp文件.然后 tar zxf VMware Tools-0....... ls cd ./intall.pl 有个文件,先拷贝到roo ...
- java.lang.NoClassDefFoundError: org/apache/xmlbeans/XmlException
http://blog.csdn.net/you23hai45/article/details/70197502
- sql不显示反复列
在报表里,基本上都能够把反复的资料不显示,在SQL里怎么才干做到例如以下情况呢? a 10 a 20 b 30 b 40 b 50 显示为: a 10 20 b 30 40 50 SQL 例如以下: ...
- 婚礼上的谎言(C++实现)
#include<iostream> using namespace std; void main(void) { int a,b,c; char DD,EE,FF; for (a=1;a ...