[关闭]
@omg-two 2017-01-10T02:16:59.000000Z 字数 4116 阅读 655

jQuery基础-DOM篇学习笔记

jQuery 学习笔记

浏览器工作原理

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Introduction

1. DOM节点的创建

  1. //传统原生的创建方法：
  3. var body = document.querySelector('body');
  5. document.addEventListener('click',function(){
  7.     //创建2个div元素
  8.     var rightdiv = document.createElement('div')
  9.     var rightaaron = document.createElement("div");
  11.     //给2个div设置不同的属性
  12.     rightdiv.setAttribute('class', 'right')
  13.     rightaaron.className = 'aaron'
  14.     rightaaron.innerHTML = "动态创建DIV元素节点";
  16.     //2个div合并成包含关系
  17.     rightdiv.appendChild(rightaaron)
  19.     //绘制到页面body
  20.     body.appendChild(rightdiv)
  22. },false)
  24. //jQuery方式
  25. var $button = $('button');
  26. var $body = $('body')
  27. $button.on('click', function() {
  28.     //通过jQuery生成div元素节点
  29.     var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
  30.     $body.append(div)
  31. })

2. DOM节点的插入

节点插入的说明如下：
将B、C等插入到A

3. DOM节点的删除

  • .empty():移除指定元素中的所有子节点，无法删除自身,无法删除绑定的方法。
  • .remove():移除指定元素及其内部一切，包括绑定的事件及与该元素相关的jQuery数据。
    1. 当传入选择器表达式时，则根据选择表达式进行过滤，选择性删除指定节点
    2. 下面两个例子等价
  1. //利用remove的传入参数进行过滤
  2. $("p").remove(":contains('3')")
  3. //通过filter进行过滤
  4. $("p").filter(":contains('3')").remove()
  • .detach():移除节点，但保存节点上的数据与事件，append之后，即可恢复。
    1. 移除自身，仅仅是显示效果从web上消失了，但内存中任然存在。
    2. 不接受参数传入。

4. DOM节点的复制与替换

元素的克隆

  • .clone()
    1. 复制所有匹配的元素集合，包括匹配元素的下级元素，文字节点。
    2. 克隆的同时，可以修改克隆后元素。如$(this).clone().css('color','red')
    3. 当传入true参数时，则将附带的事件以及数据一起克隆。如下例：
  1. $("div").on('click', function() {//执行操作})
  3. //clone处理一
  4. $("div").clone()   //只克隆了结构，事件丢失
  6. //clone处理二
  7. $("div").clone(true) //结构、事件与数据都克隆

元素的替换

  • .replaceWith()
    1. 对$(A).replaceWith(B)，则表示用新的内容B(HTML字符串/DOM元素/jQuery对象)来替换选中的A。
    2. replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点。
    3. 该方法会删除与节点相关联的所有数据和事件处理程序。
  1. //后面的css()增加的内容实际上没有显示出来，因为返回值是替换前的对象。
  2. $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>').css('border','4px solid blue')
  • replaceAll()
    1. 用集合的匹配元素替换每个目标元素。与replaceWith()的目标和源相反。
    2. 该方法会删除与节点相关联的所有数据和事件处理程序
    3. replaceAll()方法返回的jQuery对象引用的是替换后的节点。
  1.  //后面的css()增加的内容实际上显示出来了，因为返回值是替换后的对象。
  2.  $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last').css('border','4px solid blue');

元素的包裹

  • wrap()
    1. wrap(wrappingElement):在匹配集合的每个元素周围包裹一个HTML结构
    2. wrap(function):一个回调函数，返回用于包裹匹配元素的HTML内容或jQuery 对象。使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已。
  1.  //给所有p元素，增加父容器div
  2.  //传入HTML字符串
  3. $('p').wrap('<div></div>')
  4. //传入函数方法
  5. $('a').wrap(function() {
  6.     return '<div class="' + $(this).text() + '" />';
  7. })

  • unwrap()
    删除匹配元素集合的父元素保留自身在原来的位置。

  • wrapAll()

    1. wrapAll(wrappingElement):给集合中匹配的元素增加一个外面包裹HTML结构。
    2. wrapAll(function):一个回调函数，返回用于包裹匹配元素的HTML内容或jQuery对象。
  1. //---------------样例-----------------------
  2. <p>p元素</p>
  3. <p>p元素</p>
  4. //---------------wrapAll方法一---------------
  5. $('p').wrapAll('<div></div>')
  6. //方法一结果
  7. <div>
  8.     <p>p元素</p>
  9.     <p>p元素</p>
  10. </div>
  12. //---------------wrapAll方法二---------------
  13. $('p').wrapAll(function() {
  14.     return '<div><div/>'; 
  15. })
  16. //方法二结果
  17. <div>
  18.     <p>p元素</p>
  19. </div>
  20. <div>
  21.     <p>p元素</p>
  22. </div>
  • wrapInner()
    1. wrapInner(wrappingElement)：给集合中匹配的元素的内部，增加包裹的HTML结构。
    2. wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。
  1. //---------------样例---------------
  2. <p>p元素</p>
  3. <p>p元素</p>
  4. //---------------wrapInner方法一---------------
  5. $('p').wrapInner('<div></div>')
  6. //方法一结果
  7. <div>
  8.     <p>p元素</p>
  9. </div>
  10. <div>
  11.     <p>p元素</p>
  12. </div>
  14. //---------------wrapInner方法二---------------
  15. $('p').wrapInner(function() {
  16.     return '<div><div/>'; 
  17. })
  18. //方法二结果
  19. <div>
  20.     <p>p元素</p>
  21. </div>
  22. <div>
  23.     <p>p元素</p>
  24. </div>

5. jQuery遍历

  • children()

    1. $(A).children(),无参数的时候，查找A条件下匹配的所有元素的子元素（父子关系）。
    2. $(A).children(B),有参数的时候，查找A条件下匹配的元素经过B条件筛选后的集合的子元素（父子关系）。

  • find()

    1. 后代关系查找（包括父子关系），必须传入筛选参数。若匹配所有元素，传入 * 。
    2. $(A).find(B),表示满足匹配条件A的所有元素，再对其后代元素进行筛选满足B条件的元素集合。

  • parent()

    1. $(A).parent(),父元素查找，有序的查找匹配集合A元素的父元素。
    2. $(A).parent(B),有序的查找匹配集合A元素的父元素，并根据条件B进行筛选。

  • parents()

    1. $(A).parents(),无参数传入的时候，查找A条件匹配元素集合的所有祖辈元素（包括父辈）。
    2. $(A).parents(B),有参数传入的时候，首先查找A条件匹配元素集合的所有祖辈元素，然后过滤出满足条件B的元素集合。

  • closest()

    1. 该方法接受一个匹配元素的选择器字符串，如$(A).closest(B)匹配条件A的元素集合中每个元素从自己向上查找满足条件B的第一个元素结果的集合，

  • next()

    1. 无参数接受，返回匹配集合中每一个元素的下一个兄弟元素。
    2. 有参数接受，利用接受参数对1中无参数返回结果进行筛选。

  • prev()

    1. 无参数接受，返回匹配集合中每一个元素的上一个兄弟元素。
    2. 有参数接受，利用接受参数对1中无参数返回结果进行筛选。

  • siblings()

    1. 无参数接受，返回匹配集合中每一个元素的同辈（上一个和下一个两个）兄弟元素。
    2. 有参数接受，利用接受参数对1中无参数返回结果进行筛选。

  • add()

    1. 在既有的jQuery对象中插入新的元素，从而构成一个新的包含更多元素的jQuery对象。
    2. add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

  • each()

    1. each是一个for循环的包装迭代器。
    2. each通过回调的方式处理，并且会有2个固定的实参，索引与元素。如下所示。
    3. each回调方法中的this指向当前迭代的dom元素。
  1. //示例，each的回调函数及参数。
  2. $("li").each(function(index, element) {
  3.     //index 索引 0,1
  4.     //element是对应的li节点 li,li
  5.     //this 指向的是li
  6. })
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注