资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

jQuery操作DOM-创新互联

text()、html()是相对粗犷的方法，直接读取或设置元素的内容；

站在用户的角度思考问题，与客户深入沟通，找到泊头网站设计与泊头网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖泊头地区。

另外一些较为细致的操作是对某一个jQuery对象的增加、删除。

后面讲到的替换节点、包裹节点用到的比较少。

1、text(), html()

（1）使用html()方法读取或者设置元素的innerHTML

（2）使用text()方法读取或设置元素的innerText

2、动态创建和添加、删除DOM节点

2.1、创建DOM节点

使用$(html字符串)来创建DOM节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到DOM中。$()创建的就是一个jQuery对象，可以完全进行操作

创建radio，使用$('');，而不要在创建好后通过attr('name','gender')//通过attr()设置name，在IE6下面有问题

2.2、添加和删除DOM节点

append 方法用来在元素的末尾追加元素（最后一个子节点）

prepend，在元素的开始添加元素（第一个子节点）

after 在元素之后添加元素

before 在元素之前添加元素

其他追加方法（将自己追加到某元素）

子元素.appendTo(父元素);

主动追加到最后一个

子元素.prependTo(父元素)

主动追加到第一个

A.insertBefore(B)

将A加到B前面，等同于B.before(A)

X.insertAfter(Y)

将X追加到Y的后面，等同于Y.after(X)

删除节点

        empty() 清空某元素下的所有子节点

    内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}

remove(selector) 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下。

2.3、案例

示例：创建一个层




    
    jQuery测试
    
    
        $(function () {
            $('#btn').click(function () {
                //创建一个层，并把该层添加到body中
                var divObj = $('
').appendTo($('body'));                 //divObj.css('width','300px').css('height','50px').css('border','solid 1px red').css('margin','5px');                 divObj.css({"width":"300px","height":"50px","border":"solid 1px red","margin":"5px"});             });         });          

效果图

jQuery操作DOM

示例：从json中取数据,动态创建表格




    
    jQuery测试
    
    
        var data = {"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"};
        $(function(){
            $('#btn').click(function () {
                //创建table
                var tableObj = $('');

                for(var key in data)
                {
                    var value=data[key];
                    //创建tr
                    var trObj = $(''+key+''+key+'');
                    //将tr添加到table内
                    tableObj.append(trObj);
                }
                //将table添加到body当中
                $('body').append(tableObj);
            });
        });
    


    

效果图

jQuery操作DOM

示例：无刷新评论




    
    jQuery测试
    
    
        $(function () {
            $('#btn').click(function () {
                var uname = $('#txt').val();
                var umsg = $('#msg').val();
                var trObj = $(''+uname+''+umsg+'');
                //$('#tb').append(trObj);//append
                trObj.appendTo($('#tb'));//appendTo
            });
        });
    


    
        小明你好啊
    
    

    

    

    

效果图

jQuery操作DOM

示例：删除元素




    
    jQuery测试
    
    
        .cls{
            width:300px;
            height:200px;
            border:solid 1px red;
        }
    
    
        $(function () {
            $('#btn').click(function () {
//                $('#dv').empty();//清空层中的元素
//                $('#dv').remove();//层没了，相当于自杀
                $('input').remove('.mycls');//移除应用了cls样式的层
            });
        });
    


    
    
        
        
    

效果图

jQuery操作DOM

示例：权限选择案例：一个下拉框中的选项放置另一个下拉列表框选项中




    
    jQuery测试
    
    
        $(function () {
            $('#toRight').click(function () {
                $('#se1 :selected').appendTo($('#se2'));
                $('select option').attr('selected',false);
            });
            $('#toLeft').click(function () {
                $('#se2 :selected').appendTo($('#se1'));
                $('select option').attr('selected',false);
            });
            $('#toAllRight').click(function () {
                $('#se1 option').appendTo($('#se2'));
                $('select option').attr('selected',false);
            });
            $('#toAllLeft').click(function () {
                $('#se2 option').appendTo($('#se1'));
                $('select option').attr('selected',false);
            });
        });
    


    
        
            
            
            
            
            
        
        
            "  id="toRight"/>
            
            >"  id="toAllRight"/>
            
        
             

效果图

jQuery操作DOM

3、替换节点和包裹节点

3.1、替换节点

$("br").replaceWith("

");

用

替换br

$('
').replaceAll('hr');

用
元素替换所有的hr

调用者也得是选择器选择到的元素

3.2、包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹

wrapAll()

wrapInner()//在内部围绕

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：jQuery操作DOM-创新互联
文章地址：http://cdkjz.cn/article/dphdeo.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
服务器机柜移动手机网站制作成都企业网站改版温江网站建设网站设计广告媒介投放品牌网站建设成都封阳台腾讯免备案空间成都网站优化

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图