jquery 之节点操作

Posted amandaj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 之节点操作相关的知识,希望对你有一定的参考价值。

一、添加节点

【添加内部子节点方法】:内部节点就是儿子节点

 append()    在被选元素内部的结尾插入内容

appendTo()  将指定内容插入到被选标签内部的结尾

prepend()   在被选元素内部的开头插入内容

prependTo() 将指定内容插入到被选标签内部的开头

 

【添加同级节点方法】:同级就是兄弟关系

 

 after()            在被选元素同级的插入内容

 

 insertAfter()     指定内容添加到被选标签同级的后面

 

 before()           在被选元素同级的插入内容

 

insertBefore()    将指定内容添加到被选标签同级的前面

注意:

1、以上方法作用相同。差异在于语法:内容和选择器的位置,是否能够使用函数来插入内容。

2append、prepend、after、before能使用函数插入内容

二、删除节点

 

remove()  删除被选元素(及其子元素)

 

empty()   从被选元素中删除子元素

三、克隆节点

 

clone(true) 方法生成被选元素的副本,包含子节点、文本和属性。

 

参数:可选。布尔值。规定是否复制元素的所有事件处理。默认false

四、替换节点

 

 replaceWith()  将指定的内容替换被选元素

 

 replaceAll()   

 

 $(selector).replaceWith(content)

 

 $(content).replaceAll(selector)

注意:replaceWith() 能够使用函数进行替换,replaceAll则不能。

五、包裹节点

 wrap()       把匹配的元素用指定的内容或元素包裹起来。

wrapAll()   把所有匹配的元素用指定的内容或元素包裹起来。

wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="添加">
    <p>你好啊!你喜欢吃什么水果</p>
    <ul>
        <li>葡萄</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>


        <span>span标签的内容1</span>
        <span>span标签的内容2</span>

</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
     //【添加内部子节点方法】:内部节点就是儿子节点
     //添加在结尾的
     //$(‘ul‘).append(‘<li>苹果1</li>‘);  //在ul标签内部的结尾添加指定li内容
     //$(‘ul‘).append(function(){return "<li>苹果-函数的</li>"});  //在ul标签内部的结尾添加指定li内容
     //$(‘<li>苹果2</li>‘).appendTo(‘ul‘);//将指定的li内容添加到ul标签内部的结尾

     //添加在开头的
    //$(‘ul‘).prepend(‘<li>梨子1</li>‘);  //在ul标签内部的开头添加指定li内容
    //$(‘ul‘).prepend(function(){return "<li>梨子-函数的</li>"});  //在ul标签内部的开头添加指定li内容
    //$(‘<li>梨子2</li>‘).prependTo(‘ul‘);//将指定的li内容添加到ul标签内部的开头


    //【添加同级节点方法】:同级就是兄弟关系
    //$(‘ul‘).after(‘<div>以上水果都好吃1</div>‘);  //在ul标签同级的后面添加div内容
    //$(‘<div>以上水果都好吃2</div>‘).insertAfter(‘ul‘); //将div内容添加到ul同级的后面

    //$(‘ul‘).before(‘<div>以下水果你喜欢吃什么1</div>‘);  //在ul标签同级的前面添加div内容
    //$(‘<div>以下水果你喜欢吃什么2</div>‘).insertBefore(‘ul‘); //将div内容添加到ul同级的前面

    //删除节点
    //$(‘ul li‘).eq(1).empty();  //清空选中元素的子节点
    //var $li = $(‘ul li‘).eq(2).remove();  //删除选中元素(包括自己和子节点)
    //$(‘ul‘).append($li); //将删除的li元素在ul内部的后面重新添加

    //克隆(复制)方法
    $(input).click(function(){
        var $p = $(p).clone(true); //克隆p标签,true表示把事件也克隆一份
        $(ul).after($p); //将克隆的p标签插入到ul内部的后面
    });

    //替换节点
    //$(‘p‘).replaceWith("<p>你好,请问下面的水果你喜欢吗?</p>");
    //$(‘p‘).replaceWith(function(){return "<p>你好,请问下面的水果你喜欢吗?????</p>"});
    //$("<p>你好,请问下面的水果你喜欢吗?????</p>").replaceAll(‘p‘);

    //包裹节点
    $(input).click(function(){
        //$(‘span‘).wrap(‘<div></div>‘); //用div标签分别包裹每个span标签
        $(span).wrapAll(<div></div>); //用div标签一起包裹所有span标签
        $(span).wrapInner(<b></b>);  //在span标签内部用b标签包裹内容
    });
</script>

 

以上是关于jquery 之节点操作的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

JQuery_DOM 节点操作之创建节点插入节点

jquery 之节点操作

WEB入门之十六 操作DOM节点

jQuery学习笔记DOM操作之包含节点方法

JavaScript之jQuery-3 jQuery操作DOM(查询样式操作遍历节点创建插入删除替换复制)