简单总结jQuery API中的知识点（上篇）之DOM操作

    最近为了学习前端其他新的知识，特意重新复习了一遍jQuery，算是查漏补缺，把之前学习时忽略的知识点补回来顺便也把一些知识点做了总结方便自己理解。

JQ的DOM操作分类
1.遍历
（1）遍历的接口：父级，后代，同胞兄弟（相邻元素），过滤
（2）遍历的结构设计  dir方法   each迭代器


1.1父级遍历（即通过jQuery可以在DOM树中向上遍历）


（1）方法：
.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。


.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找


.parentsUntil() 方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与 .parentsUntil() 选择器


匹配的那个元素。




1.2同级遍历（即通过jq在同级元素之间进行元素查找筛选）


（1）方法：
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
（以上的方法所获得的jq对象都是不少于1个的）


.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
（以上的方法所获得的jq对象只能是一个）


1.3后代遍历（包括直接子代，即允许向下遍历，筛选查找元素）


 （1）方法
.children()获得匹配元素集合中的每个元素的子元素，选择性筛选。（筛选出的是直接子代）
.find()返回被选元素的后代元素（筛选的是符合条件的后代元素）
都可以带参（选择器）指定性筛选。


1.4过滤（遍历方法中包含过滤，如何理解两者关系？遍历是通过jq可以筛选DOM树上所有的元素，而过滤即是查找出符合过滤方法的DOM元素）
（1）方法
.eq()匹配元素的集合，根据指定的索引查找对应的元素。（筛选出的只有一个元素）
.first() 匹配元素集合中的第一个元素
.last()匹配元素集合中的最后一个元素
.gt()匹配大于指定条件的元素集合。
.lt()匹配小与指定条件的元素集合。
.filter()筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。
.map()通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
.slice()根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。
.not()从匹配的元素集合中移除指定的元素。即移除不满足条件的元素并生成一个新的元素集合。
.has()判断是否存在符合条件的元素.
.is()判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。


1.5其他遍历（较少用到）
.add()添加元素到匹配的元素集合中。
.addBck() 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
.andSelf()添加先前的堆栈元素集合到当前组合。
contents()获得匹配元素集合中每个元素的子元素，包括文字和注释节点.
.end()终止在当前链的最新过滤操作并返回匹配元素以前的状态。


2.节点操作（即通过jq可以对DOM树进行“增（插入），删（移除），改（属性操作）”等行为）


2.1插入（增加，通过jq提供的方法在DOM树上不同位置插入节点）


方法：


（1）插入并包裹现有内容：
.unwrap() 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 注意：unwrap()与remove()一样，使用时都不带参。
.wrap() 与unwrap()作用相反，在每个匹配的元素外层包上一个html元素。
.wrapAll()在所有匹配元素外面包一层HTML结构。
.wrapInner()在匹配元素里的内容外包一层结构。


（2）插入现有内容里
.append() 在每个匹配元素里面的末尾处插入参数内容。
.appendTo()将匹配的元素插入到目标元素的最后面（译者注：内部插入）。
.prepend()将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo()将所有元素插入到目标前面（元素内）。


注意区分append 、appendTo、prepend、prependTo
假设有A、B两个元素（A为原本DOM结构中的节点，B为要插入的元素）


append :表示的在A的后面插入B。（$("A").append("B");）
appendTo：表示的将B插入到A的后面 。（$("B").appendTo("A");）
prepend：表示在A的前面插入B，A、B在同一个大的盒子中，属于内部插入。（$("A").prepend("B");）
prependTo：表示将B插入到A 的前面 （$("B").prenpendTo("A");）




html():有两个作用，获取html内容以及设置html内容 
(1)当html()作为获取html内容时，此时的html()不带任何参数   获取集合中第一个匹配元素的HTML内容。
(2)当html()作为设置html内容方法时，此时的html() 此时的参数可以是html结构、js创建的dom节点、在页面创建好的元素的类。




text() 有两个作用，获取文本内容以及设置文本内容 
（1）当text()作为获取文本内容时，此时text()不接受任何参数 得到匹配元素集合中每个元素的合并文本，包括他们的后代。
（2）当text()作为设置文本内容时，此时的text()可以接受任何形式的参数 （html结构，用js创建的dom节点等）




（3）插入到现有内容外
.before()根据参数设定，在匹配元素的前面插入内容（外部插入）.
.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
在jQuery 1.4中, .before()和.after()同样对脱离文档的DOM节点（注：脱离文档的DOM节点，即，可能时javascript动态创建的，还没被插入到html文档中）有效。


.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
<script>$("p").insertBefore("#foo"); // check before() examples</script> (此处代码的作用是将P元素插入到div元素前面作为div元素的兄弟节点)


.insertAfter()在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
<script>$("p").insertAfter("#foo"); // check after() examples</script>  (此处代码的作用是将P元素插入到div元素后面作为div元素的兄弟节点)


2.2移除（删除dom节点操作）
.detach()从DOM中去掉所有匹配的元素。
.empty()从DOM中移除集合中匹配元素的所有子节点。
.remove()将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
.unwrap()将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。


注意区分：（1）detach、empty、remove三者之间的区别（从删除操作执行之后dom结构。以及jquery数据角度来说）
detach：删除了dom结构，但是jquery数据会保留。下次回调数据仍然可以被调取。
empty：仅删除元素节点，dom结构仍然保留。jquery数据也保留。
remove：dom结构连同jquery数据一并删除。


（2）注：其中remove()常与append()方法成对出现（元素、数据插入之后再移除插入的元素、数据）
          unwrap()场与wrap()成对出现，也是插入之后再移除插入的数据、元素


2.3替换（修改）


方法：
（1）.replaceAll()用集合的匹配元素替换每个目标元素。
（2）.replaceWith()用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
注：replaceAll与replaceWitch的用法差不多，只是目标和源的位置不一样。
假设A是源，B是目标
replaceAll：$("B").replaceAll ("A")
replaceWith：$("A").replaceWith("B")


2.4 class（类）属性操作


方法：
.addClass() 为每个匹配的元素添加指定的样式类名
.removeClass() 移除集合中每个匹配元素上一个，多个或全部样式。
.toggleClass()在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.hasClass()确定任何一个匹配元素是否有被分配给定的（样式）类。


2.5 通用属性操作
方法：


.attr()
  作用：（1）作为获取元素的作用时，获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。书写为：.attr(attributeName 属性名)
（2）设置每一个匹配元素的一个或多个属性。设置元素时可以设置一个或者多个。.attr(attributeName,value)
.prop()获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）。
  作用：（1）作为获取元素的作用时，获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。书写为：.prop(attributeName 属性名)
（2）设置每一个匹配元素的一个或多个属性。设置元素时可以设置一个或者多个。.prop(attributeName,value)
.removeAttr()为匹配的元素集合中的每个元素中移除一个属性（attribute）。
.removeProp()为集合中匹配的元素删除一个属性（property）。


.val()获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。 


 作用：（1）用作获取作用时，获取匹配的元素集合中第一个元素的当前值。不匹配任何参数。
       （2）用作设置作用时，设置匹配的元素集合中每个元素的值。接收参数的形式 .val(value)或者.val(function(index,value))


注意：
（1）当attr用作取第一个匹配的元素时，只能取到一个，如果要取每个元素的属性值时，应用循环的each()或者map().attr()方法只获取第一个匹配元素的属性值。要获取每个单独


的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法循环。


（2）若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。


(3).attr()用作设置元素属性的方法时。
.attr(attributeName,value) 可以分为3中种形式
.attr( attributeName, value )<属性名，属性值> eg：$('#greatphoto').attr('alt', 'Beijing Brush Seller');
.attr(attributes)<属性-值的集合> 
 eg：$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});
.attr( attributeName, function(index, attr) )<属性名，回调函数>
eg：$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});


(4).attr()与.prop()作用，性质类似，主要的区别是.attr()获取或者设置的是元素的属性，prop()获取或者设置元素特性
元素的attribute只能用attr()获取或设置，proprietary只能用prop()获取或者设置




(5).val()一般用作获取或者设置表单元素（input、textare、radio。checkbox等值，因为像p、div等元素一般没有value这个属性，要获取div、p当中的值、文字一般用text()或者


html()）




2.6样式操作
方法：
.css()获取或者设置一个或多个元素的样式（css属性）
作用：（1）用做获取  .css（proprtyName  一个css属性） .css(proptyNames 一个或多个css属性数组)
      （2）用做设置  用做设置  设置一个css属性 .css("background","red");  设置多个css样式 .css({"color":"green","border":"1px solid #dbdbdb"})


.width()
作用：（1）获取元素宽度 不带参
      （2）设置元素宽度 带参 .width（value）/.width(function(index,width){})


.height
作用：（1）获取元素高度 不带参
      （2）设置元素高度 带参 .height（value）/.height(function(index,width){})


同理.innerWidth、outerWidth、innerHeight、outerHeight  注意各自包括的范围 （padding、margin、border）


.offset()
作用：
（1）.offset()获取:在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。注意，此方法不接受任何参数
 (2).offset()设置:设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。带参数 .offset( coordinates )/.offset( function(index, coords) )


.position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 ) 不带参数。


注意：（1）.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。当通过全局操作


（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。.offset()返回一个包含top 和 left


属性的对象 。
（2）.position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于documet的当前坐标 当把一个新元素放在同一个容器里面另一个元


素附近时，用.position()更好用。


.position()返回一个包含 top 和 left属性的对象.


.scrollTop()被卷进去的文档  常用与实现“页面中某个div滑动到顶部固定的效果”
作用：
（1）获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。 不带参
（2）设置每个匹配元素的垂直滚动条位置。.scrollTop(value)


.scrollLeft()被卷进去的文档 
作用:
(1)获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的垂直滚动条位置。 不带参
（2）设置每个匹配元素的水平滚动条位置。.scrollLeft(value)

以上的总结大都是自己的理解。错误之处还望有各位一起学习前端的小伙伴们指出。