jQuery基础--样式篇

Posted 2020-07-29 王甘林--小小菜鸟

jQuery的属性与样式

　　（1）.attr()与.removeAttr()：每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。

　　　　attr()有4个表达式　

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

　　　　　　attr(属性名, 属性值)：设置属性的值

　　　　　　attr(属性名,函数值)：设置属性的函数值

　　　　　　attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

　　　　removeAttr()删除方法

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

　　　　优点：

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

　　（2）.html()及.text()

　　　　.html()方法 

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

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

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

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

　　　　.text()方法

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

　　　　　　.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代

　　　　　　.text( textString ) 用于设置匹配元素内容的文本

　　　　　　.text( function(index, text) ) 用来返回设置文本内容的一个函数

　　（3）.val()

　　　　.val()方法

　　　　　　.val()无参数，获取匹配的元素集合中第一个元素的当前值

　　　　　　.val( value )，设置匹配的元素集合中每个元素的值

　　　　　　.val( function ) ，一个用来返回设置值的函数

 　　　注意事项：

　　　通过.val()处理select元素， 当没有选择项被选中，它返回null

　　　　　　.val()方法多用来设置表单的字段的值

　　　如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

　　（4）增加样式.addClass()

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

　　　　.addClass( className )方法

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

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

　　（5）删除样式.removeClass()

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

　　　　.removeClass( )方法

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

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

　　（6）切换样式.toggleClass()

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

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

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

　　　　　　.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

　　　　　　.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

　　　　　　.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

　　　　　　.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和　　　　元素旧的样式类作为参数

　　（7）样式操作.css()

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

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

　　　　获取：

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

　　　　　　.css( propertyNames )：传递一组数组，返回一个对象结果

　　　　设置：

　　　　　　 .css(propertyName, value )：设置CSS

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

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