jQuery学习笔记（二）样式篇

logo-jquery-20191111489

本文内容有：

1. jQuery的属性与样式之html()及.text()
2. jQuery的属性与样式之增加样式.addClass()
3. jQuery的属性与样式之删除样式.removeClass()
4. jQuery的属性与样式之切换样式.toggleClass()
5. jQuery的属性与样式之样式操作.css()
6. .css()与.addClass()设置样式的区别
7. jQuery的属性与样式之.val()
8. jQuery的属性与样式之元素的数据存储
   
   <h3 align=center> （一）jQuery的属性与样式之html()及.text()</h3>

<code>.html()</code>方法：

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

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

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

<code>.text()</code>方法

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

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

注意事项：
<code>.text()</code>结果返回一个字符串，包含所有匹配元素的合并文本

<code>.html</code>与<code>.text</code>的异同:

1. <code>.html</code>与<code>.text</code>的方法操作是一样，只是在具体针对处理对象不同
2. <code>.html</code>处理的是元素内容，<code>.text</code>处理的是文本内容
3. <code>.html</code>只能使用在HTML文档中，<code>.text</code> 在XML 和 HTML 文档中都能使用
4. 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

<h3 align=center> （二）jQuery的属性与样式之增加样式.addClass()</h3>

  在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。

<code>.addClass(className)</code>方法

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

注意事项：

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

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

1. .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
   注意事项
   如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除

<h3 align=center> （四）jQuery的属性与样式之切换样式.toggleClass()</h3>

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

  <code>.toggleClass()</code>方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,如果存在（不存在）就删除（添加）一个类。

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

注意事项：

1. <code>toggleClass</code>是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加；
2. <code>toggleClass</code>会保留原有的Class名后新增，通过空格隔开。

<h3 align=center> （五）jQuery的属性与样式之样式操作.css()</h3>

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

1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
2. .css( propertyNames )：传递一组数组，返回一个对象结果
   设置：
3. .css(propertyName, value )：设置CSS
4. .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
5. .css( properties )：可以传一个对象，同时设置多个样式
   注意事项：
6. 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
7. .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
   当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

<h3 align=center> （六）.css()与.addClass()设置样式的区别</h3>

  对于样式的设置，我们学了addClass与css方法，那么两者之间有什么区别？

可维护性：

1.   <code>.addClass()</code>的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式。
2.   通过<code>.addClass()</code>我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

灵活性：

  通过<code>.css()</code>方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过<code>.css()</code>方法处理的

样式值：

  .addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下
外部样式 < 内部样式 < 内联样式

1. <code>.addClass()</code>方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上；
2. 通过<code>.css()</code>方法处理的是内联样式，直接通过元素的style属性附加到元素上的
   通过.css方法设置的样式属性优先级要高于.addClass方法。

总结：

1.   <code>.addClass</code>与<code>.css</code>方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
2.   如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

<h3 align=center> （七）jQuery的属性与样式之.val()</h3>

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()都可以使用回调函数的返回值来动态的改变多个元素的内容。

<h3 align=center> （八）jQuery的属性与样式之元素的数据存储</h3>

jQuery提供的存储接口

1. jQuery.data( element, key, value ) //静态接口,存数据
2. jQuery.data( element, key ) //静态接口,取数据

.data( key, value ) //实例接口,存数据

.data( key ) //实例接口,存数据

  2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。

  把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险

  通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了。
  同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData(element [, name])
.removeData([name])

结尾

本文属于学习过程中整理自慕课网jQuery基础：

课程链接：https://www.imooc.com/learn/418；

作者：Aaron艾伦https://www.imooc.com/u/290139/courses?sort=publish

谢谢

---

欢迎关注微信公众号weyoung，记录学习笔记和一些有趣的东西，欢迎交流~~

个人微信公众号weyoung
更多联系方式

平台	链接
个人博客	https://www.wanglixia.top/
预览项目：	https://nelucifer.gitee.io/
个人微信公众号：	weyoung
segmentfault:	https://segmentfault.com/u/nelucifer
CSDN:	https://me.csdn.net/wlx001
简书：	https://www.jianshu.com/u/99211cc23788
掘金：	https://juejin.im/user/59b08c575188250f4850e80e