慕课网jQuery二

特殊选择器this

DOM中this就是指向了这个html元素，因为this就是DOM元素本身的一个引用

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this），代表的上下文对象是一个jQuery的上下文对象，可以调用jQuery的方法和属性值。

jQuery的属性与样式

.attr()与.removeAttr()

1. attr（传入属性名）：获取属性的值
2. attr（属性名，属性值）：设置属性的值
3. attr（属性名，函数值）：设置属性的函数值
4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一：“属性值一”，属性名二：“属性值二”，……}

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

.html()及.text()

.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()结果返回一个字符串，包含所有匹配元素的合并文本

.val()

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

注意事项：
1. 通过.val()处理select元素，当没有选择项被选中，它返回null
2. .val()方法多用来设置表单的字段的值
3. 如果select元素有multiple(多选)属性，并且至少一个选择项被选中，.val()方法返回一个数组，这个数组包含每个选中选择项的值

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

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

.addClass()

1. .addClass(className)：为每个匹配元素所要增加一个或多个样式名
2. .addClass(function(index,currentClass))：这个函数返回一个或更多用空格隔开的要增加的样式名
   注意：.addClass()方法不会替换一个 样式类名，只是添加。

删除样式.removeClass().

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

切换样式.toggleClass()

如果类中有，则删除，如果没有则添加。

$("").toggleClass("c")

如果某种元素该有此类，保留，不该有此类的元素删除此类

$("").toggleClass("c",true)

样式操作.css()

.css("属性","属性值")设置.css(['width','height'])返回宽高.css("属性")返回属性值.css({        'font-size'        :"15px",        "background-color" :"#40E0D0",        "border"           :"1px solid red"    })css("width",function(index,value){        //value带单位，先分解        value = value.split('px');        //返回一个新的值，在原有的值上，增加50px        return (Number(value[0]) + 50) + value[1];    })

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

可维护性：.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式。通过.addClass()可以批量给相同元素设置统一规则，.css()方法需要指定每一个元素一一修改

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

样式值：

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

样式的优先级：

css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下
外部样式 < 内部样式 < 内联样式
.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上
通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的
通过.css方法设置的样式属性优先级要高于.addClass方法
总结：

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