深入学习jQuery节点操作

Posted 2020-08-12 小火柴的蓝色理想

tags:

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

前面的话

　　DOM节点操作包括创建节点、插入节点、移除节点、替换节点和复制节点。jQuery也有类似的方法，此外，还扩展了包裹节点。本文将详细介绍jQuery节点操作

创建节点

　　创建节点的流程比较简单，包括创建节点、添加属性和添加文本。若应用原生方法，一般地，包括document.createElement()、setAttribute()和innerhtml

var ele = document.createElement(\'div\');
ele.innerHTML = \'测试内容\';
ele.setAttribute(\'id\',\'test\');

　　在jQuery中，创建元素节点、属性节点和文本节点的过程，只需要一步即可

$(\'<div id="test">测试内容</div>\')

插入节点

　　jQuery关于插入节点有多达8个方法

【append()】

　　使用append(content[,content])方法在每个匹配元素里面的末尾处插入参数内容，参数可以是DOM元素，DOM元素数组，HTML字符串，或者jQuery对象

　　如果插入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。类似于原生的appendChild()方法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">Greetings</div>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'#box\').append(\'<span id="test">测试内容</span>\');    
    $(\'.inner\').append($(\'#box\'));
})
</script>

　　append()方法可以接受多个参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    var $ele1 = $(\'<i>1</i>\');
    var $ele2 = $(\'<i>2</i>\');
    $(\'#box\').append($ele1,$ele2);    
})
</script>

append(function(index,html))

　　append()方法可接受一个函数作为参数。该函数的index参数表示元素在匹配集合中的索引位置，html参数表示元素上原来的HTML内容。this指向元素集合中的当前元素，返回HTML字符串，DOM元素或jQuery对象　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">123</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'#box\').append(function(index,html){
        return \'<i>\' + (index+1+html/1) + \'</i>\';
    });    
})
</script>

【appendTo(target)】

　　appendTo()方法的参数可以是一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象

　　appendTo()方法与append()方法正好相反，append()方法前面是要选择的对象，参数是要在对象内插入的元素内容；而appendTo()方法前面是要插入的元素内容，而参数是要选择的对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    var $ele1 = $(\'<i>1</i>\');
    $ele1.appendTo($(\'#box\'))
})
</script>

【insertBefore()】

　　javascript存在原生的insertBefore()方法。jQuery也存在insertBefore()方法，但用法不同

insertBefore(target)

　　insertBefore(target)方法接受一个选择器，元素，HTML字符串或者jQuery对象作为参数，匹配的元素将会被插入在由参数指定的目标前面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'<i>Test</i>\').insertBefore(\'.inner\')
})
</script>

【insertAfter(target)】

　　insertAfter(target)方法与insertBefore()方法相反，该方法接受一个选择器，元素，HTML字符串或者jQuery对象作为参数，匹配的元素将会被插入在由参数指定的目标后面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'<i>Test</i>\').insertAfter(\'.inner\')
})
</script>

【before(content[,content])】

　　before()和insertBefore()实现同样的功能。主要的不同是语法——内容和目标的位置不同。对于before(), 选择器表达式在方法的前面，参数是将要插入的内容。对于insertBefore()刚好相反，内容在方法前面，选择器表达式作为参数　　

　　before(content[,content])方法可以接受一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象作为参数，插在集合中每个匹配元素前面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'.inner\').before(\'<i>Test</i>\')
})
</script>

　　类似地，before()方法也支持多个参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    var $ele1 = $(\'<i>1</i>\');
    var $ele2 = $(\'<i>2</i>\');    
    $(\'.inner\').before($ele1,$ele2);
})
</script>

before(function(index,html))

　　before()方法可以接受一个函数作为参数。该函数的index参数表示元素在匹配集合中的索引位置，html参数表示元素上原来的HTML内容。函数中this指向元素集合中的当前元素，返回HTML字符串，DOM元素或jQuery对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<divid="box">123</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'#box\').before(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【after()】

　　after()和insertAfter()实现同样的功能。主要的不同是语法——特别是内容和目标的位置。对于after()，选择表达式在函数的前面，参数是将要插入的内容；对于insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面

after(content[,content])

　　after(content[,content])方法可以接受一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象作为参数，插在集合中每个匹配元素后面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'.inner\').after(\'<i>Test</i>\')
})
</script>

　　类似地，after()方法也支持多个参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    var $ele1 = $(\'<i>1</i>\');
    var $ele2 = $(\'<i>2</i>\');    
    $(\'.inner\').after($ele1,$ele2);
})
</script>

after(function(index,html))

　　after()方法可以接受一个函数作为参数。该函数的index参数表示元素在匹配集合中的索引位置，html参数表示元素上原来的HTML内容。函数中this指向元素集合中的当前元素，返回HTML字符串，DOM元素或jQuery对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<divid="box">123</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'#box\').after(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【prepend()】

　　与append()方法相反，prepend()方法将参数内容插入到匹配元素内部的最前面，作为第一个子元素

prepend(content[,content])

　　prepend()方法接收一个或多个DOM元素，元素数组，HTML字符串，或者jQuery对象作为参数，然后插入到匹配元素前的内容

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'.inner\').prepend(\'<i>123</i>\')
})
</script>

　　类似地，prepend()方法也支持多个参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    var $ele1 = $(\'<i>1</i>\');
    var $ele2 = $(\'<i>2</i>\');
    $(\'.inner\').prepend($ele1,$ele2);
})
</script>

prepend(function(index,html))

　　prepend()方法可以接受一个函数作为参数。该函数的index参数表示元素在匹配集合中的索引位置，html参数表示元素上原来的HTML内容。函数中this指向元素集合中的当前元素，返回HTML字符串，DOM元素或jQuery对象　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">123</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'#box\').prepend(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【prependTo()】

　　prepend()和prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同。对于prepend()而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而prependTo()正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数

prependTo(target)

　　prependTo()方法的参数是一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，插入到匹配元素前的内容

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加内容</button>
<script>
$(\'#btn\').click(function(){
    $(\'<i>123</i>\').prependTo(\'.inner\')
})
</script>

删除节点

　　如果文档中某一个元素多余，那么应将其删除。jQuery提供了三种删除节点的方法，包括detach()、empty()、remove()

【detach()】

　　如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach()方法来处理。detach()方法所绑定的事件、附加的数据等都会保留下来

detach()

　　当detach()方法没有参数时，将直接删除节点元素。该方法返回被删除的元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn1">删除元素</button>
<button id="btn2">恢复元素</button>
<script>
var $div;
$(\'.inner\').click(function(){
    alert(1);
})
$(\'#btn1\').click(function(){
    $div = $(\'.inner\').detach();
})
$(\'#btn2\').click(function(){
    $div.prependTo(\'body\');
})
</script>

detach([selector])

　　detach()方法可以接受一个选择表达式作为参数，将需要移除的元素从匹配的元素中过滤出来

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<p class="inner">Goodbye</p>
<button id="btn1">删除元素</button>
<button id="btn2">恢复元素</button>
<script>
var $div;
$(\'.inner\'深入学习jQuery节点关系
 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
 Jquery学习笔记：删除节点的操作
 深入学习jQuery样式操作
 深入学习jQuery特性操作
 深入学习jQuery元素尺寸和位置操作