<!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筛选的更多相关文章

  1. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  2. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  4. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  5. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  6. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  7. JavaScript之Dom操作【删除当前节点】

    //最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原 ...

  8. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  9. OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)

    适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

随机推荐

  1. SQL Server单表已700w+将普通表转换成分区表

    最近项目中,某个表数据量爆发时增长,单表已700w+,读写性能急剧下降,所以考虑加入分区表以解燃眉之急,后续还是要分表分库,当然这是后话.下面简要说一下将普通表转为分区表的步骤.   一.创建文件组 ...

  2. 3.Linux系统信息

    arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI ...

  3. 51Nod 不重叠的线段（贪心）

    X轴上有N条线段,每条线段有1个起点S和终点E.最多能够选出多少条互不重叠的线段.(注:起点或终点重叠,不算重叠). 例如:[1 5][2 3][3 6],可以选[2 3][3 6],这2条线段互不重 ...

  4. 从Chrome源码看audio/video流媒体实现一（转）

    现在绝大多数的网站已经从flash播放器转向了浏览器原生的audio/video播放器,浏览器是如何加载和解析多媒体资源的,这对于web开发者来说是一个黑盒,所以很有必要看一下浏览器是怎么实现的,Ch ...

  5. Studio3T 破解，无需命令计划任务

    最近项目中使用到了MongoDB,苦于命令行不好操作,所以就寻觅了一下MongDB的GUI管理工具,最终找到了Studio3T,功能非常强大,但是苦于只有评估版本30天,最可气的是一时手贱,修改了系统 ...

  6. 常用模块re模块(正则表达式)

    re模块 一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中, ...

  7. Ubuntu下Matlab代码中中文注释乱码解决方案

    环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从windows拷贝到Ubuntu中,打开发现原先的中文注释全部乱码.真正原因是因为windows中.m文件采用的是gbk ...

  8. screen---管理会话

    Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换.GNU Screen可以看作是窗口管理器的命令行界面版本.它提 ...

  9. Java基础学习总结（29）——浅谈Java中的Set、List、Map的区别

    就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是想对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...

  10. Java中四种引用的区分

    强引用(StrongReference) 强引用就是指在程序代码之中普遍存在的,比如下面这段代码中的object和str都是强引用: 1 2 Object object = new Object(); ...