<!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. 验证备份集-使用DBVERIFY工具

    DBVERIFY确认备份集是否存在坏块 验证TEST03.DBF 文件的是否存在坏块 C:\Documents and Settings\Administrator>dbv file=D:\or ...

  2. dedecms4张关键表解析之1

    虽然dedecms默认共有87张表,但是只有4张最核心,最最要的表. 1.第一张表:dede_arctype  栏目表 dede设计者认为不管存放什么样的数据(文章,商品,电影)都应该属于某个栏目(类 ...

  3. webpack简短版零工程构建项目（二）

    webpack使用总结 1.初始化一个项目 npm init -y 之后会生成一个package.json配置文件. 2.安装webpack,vue,vue-loader npm install we ...

  4. php八大设计模式之策略模式

    策略模式提供一个虚拟的整体,根据不同的要求(参数)提供不同的"零件"(调用不同的"零件"实现不同的结果). <?php /** * 策略模式 * 跟工厂模 ...

  5. Mysql 主从主主复制总结(详细)

    环境:Centos 6.9,Mysql 8.0 配置准备:1.为Centos配置好网络,使用远程工具连接. 2.安装mysql,途径不限.mysql8.0和5.7区别不大,8.0在配置主从的时候默认开 ...

  6. luoguP1419 寻找段落(二分答案+单调队列）

    题意 给定一个长度为n的序列a1~an,从中选取一段长度在s到t之间的连续一段使其平均值最大.(n<=100000) 题解 二分答案平均值. judge时把每一个a[i]-mid得到b[i] 在 ...

  7. 单调队列&单调栈归纳

    单调队列 求长度为M的区间内的最大(小)值 单调队列的基本操作,也就是经典的滑动窗口问题. 求长度为M的区间内最大值和最小值的最大差值 两个单调队列,求出长度为M的区间最大最小值的数组,分别求最大最小 ...

  8. 用JS中的cookie实现商品的浏览记录

    最近在做一个购物车效果,为了实现商品的浏览记录效果可是让我百般周折,避免以后忘记特写此随笔与大家共享,希望博友们看后有所收获. 第一步:在一个公用的js文件下getCookie(“liulan”),c ...

  9. 题解 P2431 【正妹吃月饼】

    假如做这道题想着用如下朴实的模拟,那肯定要WA至少4个点. #include <iostream> #include <cstdio> using namespace std; ...

  10. Java基础学习总结（19）——Java环境变量配置

    前言 学习java的第一步就要搭建java的学习环境,首先是要安装JDK,JDK安装好之后,还需要在电脑上配置"JAVA_HOME"."path"." ...