jQuery学习(2)

imooc学习笔记

jQuery的属性和样式

.attr()与.removeAttr()

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

操作特性的DOM方法有三个----

getAttribute、setAttribute、removeAttribute

就算如此，在实际操作中还是会存在许多问题。而jq中用一个attr()和removeAttr()就可以全部搞定了，包括兼容

attr()方法用来获取和设置属性：

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

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

3.attr(属性名，函数值)：设置属性的函数值

4.attr(attributes)：给指定元素设置多个属性值，比如{属性名1:”属性值1”，属性名2："属性值2"，……}

removeAttr()用来为匹配的元素集合中的每个元素中移除一个属性

优点：

attr、removeAttr都是jq为了属性操作封装的，直接在jq对象中调用这方法，容易对属性操作，也无需特意理解浏览器的属性名不同的问题

attribute就是DOM节点自带的属性

比如html常用的id、class等

propery是这个DOM元素作为对象，其附加的内容，比如tagName，nodeName等，使用.prop()方法直接取值或赋值

总结：获取Attribute就需要attr，获取Property就需要prop

.html()与.text()

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作

.html()

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

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

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

3.html(founction(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个属性的支持，所以可以兼容所有浏览器

.val()

val方法主要用来处理表单元素的值，比如input、select、textarea

1.value方法无参数，获取匹配的元素集合中第一个元素的当前值

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

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

注意：

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

2.val多用来设置表单字段的值

3.如果select元素与多选属性，并且至少一个选项被选中，val方法返回一个数组，这个数组包含每个选中选项的值

和text、html的区别：

1.html是用来读取元素的html内容（包括html标签），text是用来读取元素的纯文本内容，包括其后代元素，val用来读取表单元素（input、select…)的值。html和text都不能使用在表单元素上，val只能用于表单元素上；另外，html方法使用在多个元素上时，只读取第一个元素；val和html相同，如果其应用子啊多个元素上时，只能读取第一个表单元素的值，但是text和他们还有不同，如果text应用在多个元素上时，将会读取所有选择元素的文本内容

2.html(htmlString),text(textString)和val(value)都是用来替换选中元素的内容，如果3种方法同时用在多个元素上时，将会替换所有选择元素的内容

3.他们都可以使用回调函数的返回值来动态改变多个元素的内容

.addClass()

通过动态改变类名，可以让其修改元素呈现出不同效果。在html结构里，多个class以空格分隔，当一个节点（或成为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得麻烦。jq增加了一个addClass方法，用于动态增加class类名

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

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

注意：

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

举例，在p元素增加一个newClass的样式：

<p  class=”orgClass”>

$("p”).addClass(“newClass”)

那么p元素的class实际上是class=”orgClass  newClass”样式只会在原本的类上继续增减，通过空格分隔

.removeClass()

jq提供了一个用于样式之间切换的方法，它的作用是从匹配的元素中删除全部或者指定的class

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

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

注意：

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

.toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在或值切换属性。即：如果存在就删除一个类，如果不存在就增加一个类

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

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

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

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

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

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

注意：

1.toggleClass是一个互斥的逻辑，也就是通过判断对应元素上是否存在指定的class名，如果有就删除，无就增加

2.toggleClass会保留原有的class后新增，通过空格隔开

.css()

获取元素样式属性的计算值或者设置元素的css属性

在js中要动态给元素赋予样式属性，可以先获取dom元素上的style属性。在jq中要动态修改style属性，用css方法可以实现

获取：

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

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

设置：

1. .css(propertyName,value)：设置css

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

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

注意：

1. .css(propertyName,value)：设置css

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

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

注意：

1.浏览器属性获取方式不同，在获取某些值的时候，jq采用统一的处理，比如延时采用RGB，尺寸才有px

2.css方法支持驼峰写法和大小写混搭的写法，内容作了容错的处理

3.当一个数只被作为值（value）的时候，jq会将其转换为一个字符串，并在字符串的末尾处添加px，比如

.css(“width”,50)和.css(“width”,"50px")一样

.css()和.addClass()设置样式的区别

可维护性：

addClass方法的本质是通过定义class类的样式规则，给元素添加一个或多个类。css方法是通过js大量代码进行改变元素的样式

通过addClass我们可以批量给相同的元素设置统一规则，变动麒麟比较方便，可以统一修改删除。如果通过css方法就需要指定每一个元素是一一修改的，日后维护也要一一修改，比较麻烦

灵活性:

通过css方法可以很容易动态去改变一个样式的属性，不需要再去频繁定义多个类的规则。一般来说在不确定开始布局规则，通过动态生成的html代码结构中，都是通过css方法处理的

样式值：

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

样式的优先级：

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

外部样式<内部样式<内联样式

1.addClass方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候再附加到元素上

2.通过css方法处理的是内联样式，直接通过元素的style属性附加到元素上的

通过css方法设置的样式属性优先级要高于addClass方法

总结：

两种方法各有优劣，一般是静态的结构，都确定了布局的规划，可以使用addClass方法，增加统一的类规则

如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般考虑css方式

元素的数据存储

jq提供的存储接口：

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

jQuery.data(element,key)               //静态接口，取数据

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

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

两个方法在使用上存取都是通过同一个接口，传递元素和键值数据，jq官方文档建议使用.data()方法代替

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

jq提供的数据接口可以处理这个问题，用户无需关心底层如何实现，只需要按照对于的data方法使用

同样的也提供2个对应的删除接口，使用上和data方法其实是一致的，只不过一个是增加一个是删除

jQuery.removeData(element[,name]).removeData([name])