jQuery的属性与样式

jQuery的属性与样式

每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。

1.jQuery的属性与样式值.attr()与.removeAttr()

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

attr()有4个表达式

（1）attr(传入属性名)：获取属性的值

（2）attr(属性名，属性值)：设置属性的值

（3）attr（属性名，函数值）：设置属性的函数值

（4）attr（attributes）：给指定元素设置多个属性值，即：{属性名一：“属性值一”，属性名二：“属性值二”，......}

 

removeAttr()删除方法

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

 

2.jQuery的属性与样式值.html()及.text()

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

 

.html()方法

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

（1）.html()不传入值，就是获取集合中第一个匹配元素的HTML内容

（2）.html(htmlString)设置每一个匹配元素的html内容

（3）.html(function(index,oldhtml))用来返回设置HTML内容的一个函数

注意事项：

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

 

.text()方法

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

（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个属性的支持，所以可用兼容所有游览器

 

3.jQuery的属性与样式之.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()方法返回一个数组，这个数组包含每个选中选择项的值

 

4.jQuery的属性与样式之增加样式.addClass()

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

.addClass(className)方法

（1）.addClass(className):为每个匹配元素所要增加的一个或多个样式名

（2）.addClass(function(index,currentClass)):这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项：

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

 

5.jQuery的属性与样式之删除样式.removeClass()

jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class

.removeClass()方法

（1）.removeClass([className]):每个匹配元素移除的一个或多个用空格隔开的样式名

（2）.removeClass(function(index,class)):一个函数，返回一个或多个将要被移除的样式名

注意事项：如果一个样式类名作为一个参数，只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除。

 

6.jQuery的属性与样式之切换样式.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名后新增，通过空格隔开。

 

7.jQuery的属性与样式之样式操作.css()

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性，我们只要使用css()方法就可以实现了

.css()方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：（1）.css(propertyName):获取匹配元素集合中的第一个元素的样式属性的计算值

（2）.css(propertyNames):传递一组数组，返回一个对象结果

设置：（1）.css(propertyName,value):设置CSS

（2）.css(propertyName,function):可以传入一个回调函数，返回取到对应的值进行处理

（3）.css(properties):可以传一个对象，同时设置多个样式