• 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>
  • 相关阅读:
    【318】C# 学习笔记
    【317】python 指定浏览器打开网页 / 文件
    【316】python.requests 读取网页信息
    【315】Windows 之间代码自动传文件
    多线程经典问题-----乘客做公交车问题解答3
    VS2013/2012 下无法打开 源 文件“stdafx.h”的解决方法
    [课堂实践与项目]手机QQ客户端--4期(SQLite的加入,注册,找回,登录界面的修改):建立关于QQ注册类,使用SQLite进行存储,
    《Effective C++》学习笔记条款13 以对象管理资源
    抛弃编程语言的偏见——对话百度架构师
    IOS开发之UINavigationBar
  • 原文地址:https://www.cnblogs.com/yaowen/p/6946433.html
Copyright © 2020-2023  润新知