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]本文档所含信息适用于所有平台 ...

随机推荐

Persistence
Most of the programs we have seen so far are transient in the sense that they run for a short time a ...
cnmp安装失败，报错npm ERR! enoent ENOENT: no such file or directory,
1.cnmp安装失败 2.提示如下: bogon:node_modules liangjingming$ sudo npm install cnpm -g --registry=https://reg ...
《剑指offer》二叉树的镜像
一.题目描述操作给定的二叉树,将其变换为源二叉树的镜像. 二.输入描述二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 三.输出描述镜像二叉树 8 / \ 10 ...
51Nod 天堂里的游戏
多年后,每当Noder看到吉普赛人,就会想起那个遥远的下午. Noder躺在草地上漫无目的的张望,二楼的咖啡馆在日光下闪着亮,像是要进化成一颗巨大的咖啡豆.天气稍有些冷,但草还算暖和.不远的地方坐着一 ...
函数式JS: 原来promise是这样的monad
转载请注明出处: http://hai.li/2017/03/27/prom... 背景上篇文章函数式JS: 一种continuation monad推导得到了一个类似promise的链式调用, ...
Out-of-Process iframes (OOPIFs)
For Developers‎ > ‎Design Documents‎ > ‎ Out-of-Process iframes (OOPIFs) This page provides an ...
appium使用教程(一环境搭建)-------------2.安装部署
1) 安装appium 2) SDK(不建议使用模拟器,占用内存很大,会造成机器卡顿.另外模拟器还存在兼容性问题:pc为x86架构,绝大多数的手机都是ARM架构,app的兼 ...
POJ1201Intervals(差分约束）
题意给出数轴上的n个区间[ai,bi],每个区间都是连续的int区间. 现在要在数轴上任意取一堆元素,构成一个元素集合V 要求每个区间[ai,bi]和元素集合V的交集至少有ci不同的元素求集合V最 ...
FastDFS学习总结(1)--FastDFS安装和部署
FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站 Fast ...
CSU 1510 Happy Robot
1510: Happy Robot Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 19 Solved: 7 Description Input The ...

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

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

随机推荐

热门专题

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

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