深入学习jQuery节点操作

2022-05-13 00:24:54

前面的话

　　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').click(function(){

    alert(1);

})

$('#btn1').click(function(){

    $div = $('.inner').detach('div');

})

$('#btn2').click(function(){

    $div.prependTo('body');

})

</script>

【empty()】

　　empty()方法不接受任何参数。严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点，但并不删除自身节点。为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素

<style>

.inner{height: 30px;width: 100px;background-color: lightblue;}

</style>

<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').empty();

})

</script>

【remove()】

　　remove()方法会将元素自身移除，同时也移除元素内部的一切，包括绑定事件及与该元素相关的jQuery数据

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

<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').remove();

})

$('#btn2').click(function(){

    $div.prependTo('body');

})

</script>

remove([selector])

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

<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').click(function(){

    alert(1);

})

$('#btn1').click(function(){

    $div = $('.inner').remove('div');

})

$('#btn2').click(function(){

    $div.prependTo('body');

})

</script>

复制节点

clone()

　　clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

　　出于性能方面的考虑，表单元素动态的状态(例如，用户将数据输入到input和textarea，或者用户在select中已经选中某一项)不会被复制到克隆元素。克隆操作将设置这些字段为HTML中指定的默认值

　　当clone()方法没有参数(相当于参数为false)，表示不会复制元素上的事件处理函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="test"><i>测试</i></div>

<button id="btn">复制节点</button>

<script>

$('.test').click(function(){

    alert(1);

})

$('#btn').click(function(){

    $('.test').clone().appendTo('body')

})

</script>

　　当clone()方法参数为true时，会复制元素上的事件处理函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="test"><i>测试</i></div>

<button id="btn">复制节点</button>

<script>

$('.test').click(function(){

    alert(1);

})

$('#btn').click(function(){

    $('.test').clone(true).appendTo('body')

})

</script>

替换节点

　　如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()

【replaceWith()】

　　replaceWith()方法用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceWith(newContent)

　　replaceWith(newContent)方法可以接受一个HTML字符串，DOM元素，或者jQuery对象作为参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="container">

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

<button id='btn'>替换内容</button>

<script>

$('#btn').click(function(){

    alert($('.inner').replaceWith('<div>div</div>').html())

})

</script>

　　当一个元素是被替换的内容时，替换的元素从老地方移到新位置，而不是复制

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="container">

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

<button id='btn'>替换内容</button>

<script>

$('#btn').click(function(){

    alert($('.third').replaceWith($('.first')).html())

})

</script>

replaceWith(function(index,content))

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

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="container">

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

<button id='btn'>替换内容</button>

<script>

$('#btn').click(function(){

    $('.inner').replaceWith(function(index,content){

        return '<div>' + index + content + '</div>';

    })

})

</script>

【replaceAll(target)】

　　replaceAll()方法与replaceWith()功能一样，但是目标和源相反

　　replaceAll()方法接受一个选择器字符串，jQuery对象，DOM元素，或者元素数组为参数，用集合的匹配元素替换每个目标元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div class="container">

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

<button id='btn'>替换内容</button>

<script>

$('#btn').click(function(){

    alert($('<div>div</div>').replaceAll('.inner').html())

})

</script>

包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，包括wrap()、unwrap()、wrapAll()、wrapInner()

【wrap()】
　　wrap()方法可以在每个匹配的元素外层包上一个html元素。它有以下两种使用方法

wrap(wrappingElement)　

　　wrap()方法中的参数可以是一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<i>123</i>

<button id="btn">包裹元素</button>

<script>

$('#btn').click(function(){

$('i').wrap('<div style="height:20px;background:lightblue;"></div>')

})

</script>

wrap(function(index))

　　wrap()方法的参数可以是一个函数，返回用于包裹匹配元素的HTML内容或jQuery对象。index参数表示匹配元素在集合中的集合。该函数内的this指向集合中的当前元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<i>123</i>

<button id="btn">包裹元素</button>

<script>

$('#btn').click(function(){

    $('i').wrap(function(index){

        return '<div style="height:20px;background:lightblue;">' +  index+ '</div>'

    })

})

</script>

【unwrap()】

　　unwrap()方法不接受任何参数，与wrap()方法的功能相反，unwrap()方法将匹配元素集合的父级元素删除，保留自身(和兄弟元素，如果存在)在原来的位置

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div style="height:20px;background:lightblue"><i>123</i></div>

<button id="btn">删除父元素</button>

<script>

$('#btn').click(function(){

    $('i').unwrap();

})

</script>

【wrapAll()】

　　与wrap()方法不同，wrapAll()方法在所有匹配元素外面包一层HTML结构。参数可以是用来包在外面的HTML片段，选择表达式，jQuery对象或者DOM元素

　　[注意]如果被包裹的多个元素有其他元素，其他元素会被放到包裹元素之后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<i>1</i><i>2</i><b>3</b><i>4</i><i>5</i>

<button id="btn">包裹元素</button>

<script>

$('#btn').click(function(){

    $('i').wrapAll('<div></div>');

})

</script>

【wrapInner()】

　　wrapInner()可以在匹配元素里的内容外包一层结构。它有以下两种使用方法

wrapInner(wrappingElement)

　　wrapInner()方法中的参数可以是用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div>123</div>

<button id="btn">包裹元素</button>

<script>

$('#btn').click(function(){

    $('div').wrapInner('<i></i>');

})

</script>

wrapInner(function(index))

　　wrapInner()方法的参数可以是一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中，this指向集合中当前的元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<div>123</div>

<button id="btn">包裹元素</button>

<script>

$('#btn').click(function(){

    $('div').wrapInner(function(index){

        return '<i>' + index +'</i>'

    });

})

</script>

码农公寓