面前的言辞

  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('测试内容');    
    $('.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>

相关文章

网站地图xml地图