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来 ...
随机推荐
- 常见的dos命令(及抒写方式)
1.dir:列出当前目录下的主体及文件夹. 2.md:创建目录. 3.rd:删除目录.{注意:rd不能删除非空的文件夹,并且只能用于文件夹的删除} 3.cd :进入指定目录. 4.cd . . :退出 ...
- anaconda jupyter
本文主要讲解在Ubuntu系统中,如何在Anaconda下安装TensorFlow以及配置Jupyter Notebook远程访问的过程. 在官方文档中提到,TensorFlow的安装主要有以下五种形 ...
- Dict字典的操作
字典的操作 1.字典新增键值对 已存在内容的字典新增 alient_0 = {"color":"green",position:10} alient_0[&qu ...
- mysql修改配置文件
在Apache, PHP, MySQL的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接影响到论坛的速度和承载量!同 ...
- Introduction to CMMI培训总结
6月3日到5日,用了3天时间,參加了cmmi-dev的简单介绍课程培训,參加培训真的比上班都要累非常多啊!每天早上9点到下午6点.中午吃饭加歇息总共1小时.晚上还有作业要做,每天睡觉都要到11点 ...
- 16进制颜色字符串转为UIColor
//16进制颜色(html颜色值)字符串转为UIColor +(UIColor *) hexStringToColor: (NSString *) stringToConvert { NSS ...
- fgets()函数和sscanf()函数的使用方法
fgets 百度百科:从文件结构体指针stream中读取数据,每次读取一行.读取的数据保存在buf指向的字符数组中.每次最多读取bufsize-1个字符(第bufsize个字符赋'\0'),假设文件里 ...
- fontend-githubs
https://github.com/dypsilon/frontend-dev-bookmarks
- YunOS曙光初现----看好阿里云OS----阿冬专栏!!
阿里云os - YunOS 阿里云OS(YunOS)是阿里巴巴集团的智能手机操作系统,依托于阿里巴巴集团电子商务领域积累的经验和强大的云计算平台,基于LINUX开发. 魅族4阿里yun OS版已上市. ...
- c++中字符输入函数getline、cin.getline区分
1.cin>>s; s能够是:string s.char s[]; 这个是ostream中的函数.遇到' '(空格) , '\n'(换行),就会自己主动结束,因此假设用cin读取字符串, ...