<!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. python 3.x 学习笔记4（函数）

    1.编程方式分:面向对象.面向过程.函数式编程 2.区分面向对象---->类---->class面向过程---->过程---->def函数式编程---->函数----&g ...

  2. [USACO08DEC]拍头Patting Heads 水题

    类似素数筛,暴力可过,不需要太多的优化 Code: #include<cstdio> #include<algorithm> #include<string> us ...

  3. tab.py

    vim tab.py #!/usr/bin/env python # #Tab import sys import readline import rlcompleter import atexit ...

  4. 题解 BZOJ4919 【大根堆】

    题面:传送门. 老师说今天要考一道线段树合并,然后...然后这道题我就GG了.(当然可以用线段树合并写,只是比较复杂) 有人赛时想了个贪心,然后被机房巨佬hack了,结果在hack的过程中巨佬想出了正 ...

  5. 题解 UVA10328 【Coin Toss】

    这道题目其实就是说有N张纸牌,问至少连续K张正面朝上的可能性是多少. 可以用递推做.首先我们将题目所求从 至少K张 转化为 总数 - 至多K张 (为什么要这样自己想) 设F[i][j]为前i个纸牌至多 ...

  6. ECNUOJ 2855 贪吃蛇

    贪吃蛇 Time Limit:1000MS Memory Limit:65536KBTotal Submit:480 Accepted:109 Description  相信很多人都玩过这个游戏,当然 ...

  7. Java的几个有用小Util函数（日期处理和http）

    /**      * 依据日期返回当前日期是一年的第几天      * @param date      * @return      */     public static int orderDa ...

  8. iOS 画圆形头像

    demo下载地址:http://pan.baidu.com/s/1mgBf6YG _logoImageView.image = [self getEllipseImageWithImage:[UIIm ...

  9. 在kettle中实现数据验证和检查

    在kettle中实现数据验证和检查 在ETL项目,输入数据通常不能保证一致性.在kettle中有一些步骤能够实现数据验证或检查.验证步骤能够在一些计算的基础上验证行货字段:过滤步骤实现数据过滤:jav ...

  10. nginx 11个过程

    nginx在处理每一个用户请求时,都是按照若干个不同的阶段依次处理的,与配置文件上的顺序没有关系,详细内容可以阅读<深入理解nginx:模块开发与架构解析>这本书,这里只做简单介绍: 1. ...