jQuery的属性、遍历和HTML操做

一.属性操做

  一、.attr()与.removeAttr()

每一个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。

操做特性的DOM方法主要有3个，getAttribute方法、 setAttribute方法和removeAttribute方法，就算如此在实际操做中仍是会存在不少问题，这里先不说。而在jQuery中用一个 attr()与removeAttr()就能够所有搞定了，包括兼容问题

jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操做中会常常用到attr()

attr()有4个表达式

1. attr(传入属性名)：获取属性的值            $(selector).attr(attribute)
2. attr(属性名, 属性值)：设置属性的值            $(selector).attr(attribute,value)
3. attr(属性名,函数值)：设置属性的函数值               $(selector).attr(attribute,function(index,oldvalue))
4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }$(selector).attr({attribute:value, attribute:value ...})

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每一个元素中移除一个属性（attribute）

优势：

attr、removeAttr都是jQuery为了属性操做封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操做，也不须要去特地的理解浏览器的属性名不一样的问题

注意的问题：

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性

例如：html中经常使用的id、class、title、align等：

<div id="immooc" title=""></div>

而Property是这个DOM元素做为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

获取Attribute就须要用attr，获取Property就须要用prop
二、html()及.text()

读取、修改元素的html结构或者元素的文本内容是常见的DOM操做，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

.html()方法 

获取集合中第一个匹配元素的HTML内容 或 设置每个匹配元素的html内容，具体有3种用法：

1. .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
2. .html( htmlString )  设置每个匹配元素的html内容
3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注意事项：

.htm()方法内部使用的是DOM的innerHTML属性来处理的，因此在设置与获取上须要注意的一个最重要的问题，这个操做是针对整个HTML内容（不只仅只是文本内容）

.text()方法

获得匹配元素集合中每一个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每一个元素的文本内容为指定的文本内容。，具体有3种用法：

1. .text() 获得匹配元素集合中每一个元素的合并文本，包括他们的后代
2. .text( textString ) 用于设置匹配元素内容的文本
3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

注意事项：

.text()结果返回一个字符串，包含全部匹配元素的合并文本

    .html与.text的异同:

1. .html与.text的方法操做是同样，只是在具体针对处理对象不一样
2. .html处理的是元素内容，.text处理的是文本内容
3. .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
4. 若是处理的对象只有一个子文本节点，那么html处理的结果与text是同样的
5. 火狐不支持innerText属性，用了相似的textContent属性，.text()方法综合了2个属性的支持，因此能够兼容全部浏览器

三、.val()

jQuery中有一个.val()方法主要是用于处理表单元素的值，好比 input, select 和 textarea。

.val()方法

1. .val()无参数，获取匹配的元素集合中第一个元素的当前值
2. .val( value )，设置匹配的元素集合中每一个元素的值
3. .val( function ) ，一个用来返回设置值的函数

 注意事项：

1. 经过.val()处理select元素， 当没有选择项被选中，它返回null
2. .val()方法多用来设置表单的字段的值
3. 若是select元素有multiple（多选）属性，而且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每一个选中选择项的值

 

.html(),.text()和.val()的差别总结：  

1. .html(),.text(),.val()三种方法都是用来读取选定元素的内 容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是 用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另 外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，若是其应用在多个元素上时，只能读取第一个表单元素 的"value"值，可是.text()和他们不同，若是.text()应用在多个元素上时，将会读取全部选中元素的文本内容。
2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，若是三个方法同时运用在多个元素上时，那么将会替换全部选中元素的内容。
3. .html(),.text(),.val()均可以使用回调函数的返回值来动态的改变多个元素的内容。

四、增长样式.addClass()

经过动态改变类名（class），可让其修改元素呈现出不一样的效果。在HTML结构中里，多个class以空格 分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的 字符串，这就使得多class操做变得很麻烦。一样的jQuery开发者也考虑到这种状况，增长了一个.addClass()方法，用于动态增长 class类名

.addClass( className )方法

1. .addClass( className ) : 为每一个匹配元素所要增长的一个或多个样式名        $(selector).addClass(class)
2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增长的样式名     $(selector).addClass(function(index,oldclass))

注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

简单的描述下：在p元素增长一个newClass的样式

<p class="orgClass">
$("p").addClass("newClass")

那么p元素的class其实是 class="orgClass newClass"样式只会在本来的类上继续增长，经过空格分隔

五、删除样式.removeClass()

jQuery经过.addClass()方法能够很便捷的增长样式。若是须要样式之间的切换，一样jQuery提供了一个很方便的.removeClass()，它的做用是从匹配的元素中删除所有或者指定的class

.removeClass( )方法

1. .removeClass( [className ] )：每一个匹配元素移除的一个或多个用空格隔开的样式名     $(selector).removeClass(class)
2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名     $(selector).removeClass(function(index,oldclass))

注意事项

若是一个样式类名做为一个参数,只有这样式类会被从匹配的元素集合中删除 。 若是没有样式名做为参数，那么全部的样式类将被移除

六、切换样式.toggleClass()

在作某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，好比隔行换色效果

jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，经过toggleClass方法动态添加删除Class，一次执行至关于addClass，再次执行至关于removeClass

.toggleClass( )方法：在匹配的元素集合中的每一个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：若是存在（不存在）就删除（添加）一个类

1. .toggleClass( className )：在匹配的元素集合中的每一个元素上用来切换的一个或多个（用空格隔开）样式类名
2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
3. .toggleClass( [switch ] )：一个用来判断样式类添加仍是移除的 布尔值
4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每一个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类做为参数

注意事项：

1. toggleClass是一个互斥的逻辑，也就是经过判断对应的元素上是否存在指定的Class名，若是有就删除，若是没有就增长
2. toggleClass会保留原有的Class名后新增，经过空格隔开

2、HTML操做

函数	描述
$(selector).html(content)	改变被选元素的（内部）HTML
$(selector).append(content)	向被选元素的（内部）HTML 追加内容
$(selector).prepend(content)	向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content)	在被选元素以后添加 HTML
$(selector).before(content)	在被选元素以前添加 HTML

3、遍历

 

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

 

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中以前的元素集添加到当前集合中。
.children()	得到匹配元素集合中每一个元素的全部子元素。
.closest()	从元素自己开始，逐级向上级元素匹配，并返回最早匹配的祖先元素。
.contents()	得到匹配元素集合中每一个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每一个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操做，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	得到当前匹配元素集合中每一个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，若是存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每一个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	得到匹配元素集合中每一个元素紧邻的同辈元素。
.nextAll()	得到匹配元素集合中每一个元素以后的全部同辈元素，由选择器进行筛选（可选）。
.nextUntil()	得到每一个元素以后全部的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	得到用于定位的第一个父元素。
.parent()	得到当前匹配元素集合中每一个元素的父元素，由选择器筛选（可选）。
.parents()	得到当前匹配元素集合中每一个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	得到当前匹配元素集合中每一个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	得到匹配元素集合中每一个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	得到匹配元素集合中每一个元素以前的全部同辈元素，由选择器进行筛选（可选）。
.prevUntil()	得到每一个元素以前全部的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	得到匹配元素集合中全部元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。