深入学习jQuery节点操作

×

目录

[1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点

前面的话

　　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>
时间： 2024-10-10 01:02:07

深入学习jQuery节点操作的相关文章

jQuery 节点操作 筛选二

节点操作 $(content).method( target ) $(content).method( target ) 操作 before() insertBefore() 在目标元素前面插入内容 after() insertAfter() 在目标元素后面插入内容 append() appendTo() 在目标元素开始处插入内容 prepend() preppendTo() 在目标元素结尾处插入内容 replaceWidth() replaceAll() 在目标元素替换为内容 clone()克

jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; 2 $('body').append(box); //将节点插入到<body>元素内部 二．插入节点jQuery 提供了好几种个方法来插入节点:1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(fu

深入学习jQuery样式操作

× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表.动态样式和伪元素这六部分.而jQuery也实现了脚本化CSS的功能,提供了更为简单易用的方法 设置样式 前面介绍过jQuery的特性操作,可以通过attr()方法进行样式设置 <style> .cB{color: blue;} </style> <script src="

深入学习jQuery特性操作

× 目录 [1]获取特性 [2]设置特性 [3]删除特性 前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttribute()方法.setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题.本文将介绍jQuery中的特性操作 获取特性 jQuery中用attr()方法来获取和设置特性,attr是attri

轻松学习JavaScript二十二：DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!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.

深入学习jQuery节点关系

× 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.下图表示了DOM间的节点关系,而jQuery也存在类似的方法来描述节点关系 后代元素 [children()] jQuery是一个集合对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法 children()方法允许通过在DOM树中对这些元素的直接子元素进行搜索,并且

jQuery节点操作

1.查找元素节点 $("ul li:eq()"); 2.查找属性节点 $("selector").attr("title") 3.创建节点 var $li_1=$("<li></li>"); var $li_2=$("<li></li>"); $("ul").append($li_1); 4.创建文本节点.创建属性节点 5.插入节点 app

jQuery学习笔记（三）——DOM节点操作

一.创建节点 var box = $(<div></div>) 二.插入节点 1.内部插入 $('#box').append(box) 将box插入内部后面 $('#box').appendTo(box) 移入到box内部后面 $('#box').prepend(box) 将box插入内部前面 $('#box').prependTo(box) 移入到box内部前面 2.外部插入 $('#box').after(box) 将box插入到外部后面 $('#box').before(bo

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元