jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选
2024-04-23 13:40:11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>$(function(){$('div').remove();//删除节点
$('div').remove('.box');//删除节点
$('div').detach();$('div').click(function(){alert(123);});var $div = $('div').detach();$('body').append( $div );//删除再添加，添加回来后，可以点击var $div = $('div').remove();$('body').append( $div );//删除再添加，不能点击了
------------------------------------------------------------------------------ $('div').empty();//div里面清空，div不清空
console.log($('div').html());//文本节点和所有节点
console.log($('div').text());//文本节点
$('div').html('<h1>标题</h1>');//会被解析成标签
$('div').text('<h1>标题</h1>');//不会被解析成标签
------------------------------------------------------------------------------ $('div').click(function(){alert(123);});$('span').click(function(){alert(456);});var cloneDiv1 = $('div').clone();//副本var cloneDiv2 = $('div').clone(true);//有点击事件var cloneDiv3 = $('div').clone(true,true);//子元素有点击事件var cloneDiv = $('div').clone(true,false);//子元素没有点击事件
$('body').append( cloneDiv );});</script>
</head><body>
<div>div<span>span<p>p</p></span>
</div></body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){$('input').prop('checked',true);$('input').clone().appendTo( 'body' );//jQuery克隆过去也是选中的，但是原生的是没有选中的，
$('div').clone().appendTo('body');$('span').get(0).innerHTML = '<script>alert(1)<\/script>';//get(0)转成原生的span，script不会执行
$('span').html('<script>alert(1)<\/script>');//html()类似于原生的innerHTML，script会执行
$('span').get(0).innerHTML = '<tr></tr>';$('span').html('<tr></tr>');$('span').html('<div/>');$('span').append( oDiv );$('span').append( $('div') );//div添加到span里面的最后
$('span').append( '<div></div>' );$('div').prepend( $('span') );//sopan添加到div里面的最前面//<div><span></span>div</div>
$('div').before( $('span') );//span添加到了div前面
$('div').after( $('span') );//span添加到了div后面var tr = document.createElement('tr');//IE会自动添加tbody
table.appendChild(tr);$('span').append(function(){return 'hello';});$('span').append('<h1>hello</h1>');$('span').append( $('div') );$('span').append('<h1>hello</h1><p>p</p>');//jQuery.buildFragment() --> '<h1>hello</h1><p>p</p>' --> oFrag对象 : <h1>hello</h1><p>p</p>
$('span').append('<script>alert(123)<\/script>');$('span').append('<script src="a.js"><\/script>');$('span').append( oDiv );$('span').append( $('div') );$('span').append( 'hello' );$('span').append( '<h1>hello</h1><h1>hello</h1><h1>hello</h1>' );$('span').replaceWith( $('div') );});</script>
</head><body>
<input type="checkbox">
<div><script>alert(1)</script></div><span><div>div</div></span>
<span><div>div</div></span>
<span><div>div</div></span>
<script type="true">
alert(123);
</script>
<span>span1<span>span2</span></span>
<div>div</div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>$(function(){$('div').append( $('span') ).css('border','1px red solid');//div变红
$('span').appendTo( $('div') ).css('border','1px red solid');//span变红
$('span').appendTo( 'div' ).css('border','1px red solid');----------------------------------------------------------------------- $('span').wrap('<div>');//每个span包一个div
$('span').wrapAll('<div>');//所有span只包一个div，如果span里面有其他标签会把这个标签移出来
$('span').wrapInner('<div>');//每个span里面包一个div
$('span').unwrap();//删除父级
$('span').wrapAll(function(){return '<div>';});$('span').wrapAll('<div><p></p></div>');
});</script>
</head><body>
<span>span</span>
<div>div</div><span>span</span>
<span>span</span>
<span>span</span>
</body>
</html>jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选相关推荐
- jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
jQuery.fn.extend({//$('ul').find('li').css('background','red');//$('ul').find( $('li') ).css('backgr ...
- 【MOS】OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
[MOS]OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1) 文档内容 目标 解决方案 准备磁盘 1. 磁盘大小 2. 裸设备或者块设备 ...
- DOM—操作元素（获取属性值、设置属性值、 移除属性）
1. 自定义属性的操作 1.1 获取属性值 element . 属性 获取属性值:(元素本身自带的属性) element . getAttribute( ' 属性 ' ):(主要获取自定义的属 ...
- html保存table并刷新,js操作 添加删除table行，并进行刷新
添加行的js如下 table 的id为myTable 添加table的一行内容 function insertRow() { var rowValue = document.getElementBy ...
- SQL2K数据库开发七之表操作添加删除和修改列
1.在已有的表中添加.删除和修改列可以使用Transact-SQL中的ALTER TABLE语句,使用ALTER TABLE语句的语法为: 2.在SQL Server查询分析器中输入如下语句,往Pro ...
- 使用jquery 动态操作添加/删除tr td
2019独角兽企业重金招聘Python工程师标准>>> $("#add_5").click(function(){ var str_1="<tr& ...
- day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、 正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- 为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
最新文章
- SAP CV02N 审批一个文档
- Python Module_os_操作系统
- Microsoft-Office-Professional-Plus-2007
- VS2017 无法连接到Web服务器“IIS Express”终极解决方案
- 非 GUI 模式运行 JMeter 压力测试
- ubuntu18.04升级python_Ubuntu18.04一次性升级Python所有库的方法步骤
- python的打开_记录
- bootstrap表格插件php,深入了解Bootstrap table表格插件（一）
- Spring Boot 集成 WebSocket，轻松实现信息推送！
- 如何做好招生讲座-----转载 （四）
- Mybatis框架中${}和#{}的区别
- C语言大小端转换问题
- php水印文字方向,ppt文本框文字方向为所有文字旋转的设置方法
- Exception: ROM is missing for pong, see https://github.com/openai/atari-py#roms for instructions
- 怎么计算机械连接的工程量,传力杆套筒工程量怎么算
- 移动2G/4G物联网卡、流量卡资费，13位物联网专用卡，专为智能设备而生，全国通用无漫游
- GNSS差分码偏差（DCB）文件下载
- Tomcat 9下载安装及配置
- 麒麟子Cocos Creator 3D研究笔记十：【qfw】开源的Extension Pack for Cocos Creator 3D
- STFT短时傅里叶变换的实现