• 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>
  • 相关阅读:
    佛學概要十四講表
    冰川时代4中英台词全集
    Linux Mysql 每天定时备份
    zabbix拓扑图
    搭建zabbix 3.4
    ★日常工作保养电脑及设备★
    宽带突然断网了,需要做如下应急措施
    预防这几点,可以让你的电脑长久耐用!!!!
    搭建简易的 DISCUZ论坛
    format 的常见用法
  • 原文地址:https://www.cnblogs.com/yaowen/p/6946433.html
Copyright © 2020-2023  润新知