jquery17 DOM操作 : 添加删除获取包装 DOM筛选

<!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('back ...
jquery16 DOM操作 : 添加删除获取包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
js 表格操作----添加删除
js 表格操作----添加删除书名:<input type="text" id="name"> 价格:<input type="t ...
JavaScript学习 - 基础(八) - DOM 节点添加/删除/修改/属性值操作
html代码:  <div id="a1"> <button id="a2" onclick=&q ...
jQuery 源码分析(二十一) DOM操作模块删除元素详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
JavaScript之Dom操作【删除当前节点】
//最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原 ...
前端性能优化--为什么DOM操作慢？浅谈DOM的操作以及性能优化问题-重绘重排为什么要减少DOM操作为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

随机推荐

springboot shiro配置
导入相关包(这里配合使用Ehcache缓存) <dependency> <groupId>org.apache.shiro</groupId> <artifa ...
Traversing a list
The most common way to traverse the elements of a list is with a for loop. The syntax is the same as ...
TYVJ 1340 折半暴搜+二分
思路: 1. 这题不卡常过不去啊-- (先加一个random_shuffle) 首先我们可以折半搜这一半可以到达的重量 sort一遍然后搜另一半对于路程中每一个解我们可以二分前一半中加这 ...
SecondaryNameNode合并元信息过程
Vuejs componet
Vuejs componet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
[SDOI2012]Longge的问题欧拉反演_欧拉函数
Code: #include<cstdio> #include<algorithm> #include<cmath> #include<string> ...
who---显示目前登录系统的用户信息
who命令是显示目前登录系统的用户信息.执行who命令可得知目前有那些用户登入系统,单独执行who命令会列出登入帐号,使用的终端机,登入时间以及从何处登入或正在使用哪个X显示器. 语法 who(选项) ...
python supper()函数
参考链接:https://www.runoob.com/python/python-func-super.html super() 函数是用于调用父类(超类)的一个方法. class Field(ob ...
使用npm上传npm包
npm是一个node的包管理仓库,一个网站,也是一条命令.如何给node里增加npm包呢?只需三步就搞定. 第一步:在开始里边打开cmd进入自己的项目中,在项目目录中输入 npm init 回车会有一 ...
绿色版SecureCRT启动崩溃，遇到一个致命的错误且必须关闭
百度搜了半天,大家都是说删除注册表的VanDyke就能解决问题,但是我用的是绿色版的,删除VanDyke后还不行. 然后试了一下重新解压出一个绿色版的SecureCRT,发现能用. 但之前我配置了很多 ...

jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选的更多相关文章

随机推荐

热门专题

jquery17 DOM操作 : 添加删除获取包装 DOM筛选

jquery17 DOM操作 : 添加删除获取包装 DOM筛选的更多相关文章