jQuery 学习系列笔记（三）

在前三篇文章中我们实际上还都没怎么用jQuery去做什么让人惊叹的事情，别着急，接下来的几篇中，你将会感叹“哇，jQuery居然还能做这个！”。

好了，废话少说，正题。

一、操作元素的属性和特性

我们之前学的是如何获取HTML页面元素，那获取完元素要做什么呢？当然是操作元素。每个元素都有自己对应的属性和特性，而这些属性和特性便是在HTML页面生成的时候，解析到各个元素上的，并且这些属性和特性可以去动态的修改，所以操作它们对于丰富页面效果是非常的重要。

大家是不是觉得我上面说这个“元素的属性和特性”有点懵圈？其实也不用太较真儿，我给大家大概说一下，不过不理解也没关系，举例说明：

<imgid="myImage"src="p_w_picpath.gif"alt="An p_w_picpath"class="someClass"title="This is an p_w_picpath"/>

大家可以看到这个<img>元素标记了id、src、alt、class、title，我们把这些叫做元素的特性（以前我一直以属性来称呼，当然，纯粹是自己yy)，那什么是元素的属性呢？就是浏览器解析这个<img>的元素标记，并创建了这个元素的javascript对象，然后把它放到DOM里。所谓的属性，就是针对这个javascript对象而言的（想想也是，只有对象才有属性的啊。 ）。而特性与属性之间也几乎是一一对应的，它们之间存在动态关联，改变特性，属性会发生变化，改变属性，特性也会发生变化。

1、操作元素属性

介绍一个我经常用的方法each()，我真的没理解为什么书上把each()放到这小节下面，既然提到了，那我也就说一下这个方法，非常的有用。

each(iterator)：遍历包装集里所有元素，为各元素分别调用传递进来的迭代器函数。

iterator：是一个function()，然后匹配集中的各元素分别调用一次这个function()。如果是function(n)这种形式，即function有个传递进来的参数n，n代表包装集里当前元素的下标(从0开始)，而当前元素用函数this属性就可以获取。

红色部分表示我也从来没这么用过，不过感觉挺好的，还是举个例子：

$("img").each(function(n){
   this.alt = "this is p_w_picpath["+n+"] with an id of " + this.id;
});

大家感觉怎么样呢？这样就把所有的<img>元素加上了一个alt属性，并且每个alt的值是根据当前<img>的位置及id进行赋值的。

2、获取特性值

attr(name)：获取指派到包装集里第一个元素指定特性的值。返回的是包装集里第一个元素指定特性的值。如果包装集为空，或第一个元素没有该特性，就返回undefined。

name：（字符串）特性的名称。该特性的值将被获取。

注意了，用attr()获取特性值的时候，返回的只是匹配元素的第一个元素指定特性的值。另外，attr()不仅能获取标签预定义的属性，甚至还可以获取通过javascipt或HTML标记设置的自定义特性，是不是很爽？

$("img").attr("");

像这样便能获取页面上第一个<img>元素的id值是多少。

3、设置特性值

attr(name, value)：为包装集里所有元素的name特性设置传递进来的值。返回的是原包装集。

name：（字符串）将被设置的特性的名称。

value：（字符串|对象|函数）指定特性的值。可以是有返回值的javascript表达式或者一个函数也行。

对，没错，和获取特性值的方法一样，只是它的另一种重载形式。

针对这个方法，说实话我只用过里面放字符串。书上说如果是表达式的话，就把表达式的已计算值设置为特性值。当是一个函数时，没错，就是针对所有匹配集里的元素调用一次这个函数，就像上面each()一样，就连传入的参数n表达的意思也是一样的。

attr(attributes)：把已传递对象指定的特性和值设置到包装集的所有元素上。返回包装集。

attributes：一个对象。对象属性被作为特性而复制到包装集里所有元素上。

这种形式的重载变体我还真没用过，不过大家也不要觉得害怕，因为看完例子大家会发现，原来这个方法是为了设置多个特性到包装集里所有元素的快速简便的方式罢了。

$("input").attr({value:" ",title:"please enter a value"});

上面的意思就是：把所有的<input>元素的value特性设置成空字符串，把title特性设置成please enter a value。  

书上说“{value:" ",title:"please enter a value"}”这个就对象字面量，可以理解成字面上的对象，格式为{key1:value,key2:value2……}，所以它也算个对象。大家就不要咬文嚼字了。

4、删除特性

删除一个元素的特性也是非常简单的。

removeAttr(name)：从每个已匹配元素删除指定的特性。返回包装集。

name：（字符串）将要删除的特性的名称。

我要说的是不要以为removeAttr()是真的把一个属性给干掉了，只是说它能达到你想要的结果，但是事实可能它只是去修改了一个属性值。

二、修改元素样式

要想使页面更具活力，一定离不开元素的样式，修改元素样式的方法有两种：

（1）可以添加或删除CSS类。

（2）操作DOM元素，直接应用新样式。

1、添加和删除类名称

addClass(names)：添加指定的一个或多个类名称到包装集的所有元素。返回包装集。

names：一个字符串，包含将要添加的一个类名称，或者包含空格分隔的、将要添加的多个类的名称（因为对于HTML标签的class来说，允许一个标签有多个类，只是类名之间需要用空格区分开来）。

而对应的

removeClass(names)：从包装集各元素里删除指定的一个或多个类名称。返回包装集。

names：如上。

说一下添加类名称的方法，其实昨天我在写一个小程序的时候就突然开窍用了addClass方法，情况是这样的，因为我的HTML页面结构比较复杂，我在选取元素的时候用了一堆parent()，children()这样的方法，所以导致我不确定自己最终选取的元素是否是自己想要的。

要是在以前，我就会在最终所选择的元素集的事件function里加一个alert，这样就能提示我到底选的对不对？啊~现在想想，这种方法是有多傻啊~

昨天我写了一个CSS类，里面大概是红色加粗实线边框的样式，然后我就在选择的元素后面加上了这个addClass()方法，结果效果非常好，我可以在浏览器中很明显的找出我当前的选择语法匹配出的元素集。

另外，有时候我们需要来回切换一组样式，也许是为了表现两个状态之间的变化，或者其他理由。jQuery为我们提供了现成的方法。

toggleClass(name)：如果在元素中指定类名称不存在，则添加指定类名称；如果元素已拥有指定类名称，则从元素中删除指定类名称。返回包装集。

name：如上。

大家觉得难理解吗？就是假如页面上有10张图片，5张是关于钢铁侠（alt=ironman）的，5张是关于绿巨人（alt=hook）的，初始状态下只显示钢铁侠的图片，鼠标下按一次显示另一个隐藏的人物图片，同时把当前显示的人物图片隐藏掉。有一个CSS类appear表示显示图片的样式。

.mousedown(function(){
    $("img[alt=ironman]").toggleClass("appear");
    $("img[alt=hook]").toggleClass("appear");
})

2、获取和设置样式

css(name,value)：设置指定的值到每个已匹配元素的指定的CSS样式属性。返回包装集。

name：（字符串）将要设置的CSS属性名称

value：（字符串|数字|函数）如果传递函数作为参数，则为包装集各元素分别调用函数，以函数返回值作为CSS样式属性值。每次函数调用的this属性，设置为当前正在计算的元素。

大家会问元素一般不都是有class属性吗？那怎么不用attr()的方法去修改class呢？是可以这样修改，但是有时候我们想完全覆盖样式表，直接在元素上应用样式会效果更好一些，这时候就用到了css这个方法，不过css方法使用和attr其实是差不多的，只是单独针对样式而已罢了。

$("div").css("background-color",  "red");

把所有<div>元素的背景颜色变成红色。

css(properties)：为所有已匹配元素设置已传递对象里多个键所指定的CSS属性为相关的值（value）。返回包装集。

properties：（对象）指定一个对象，对象的属性被复制为包装集里所有元素的CSS属性。

这个也没什么说的，就跟上面的attr(abbribute)方法有点一样。

css(name)：获取包装集里第一个元素name所指定CSS属性的已计算样式值。返回已计算样式值。

name：（字符串）指定一个CSS属性名称，返回它的已计算样式值。

这个也没什么好说的，我好像没使用过这个重载变体，有兴趣的朋友自己写练习体会一下。

对于我们经常使用的CSS值，jQuery也直接设计出了方法，更加方便我们的使用，比如width()和height()方法。可以用来设置和获取宽高。

3、对于样式来说，更有用的命令

hasClass(name)：确定匹配集里是否有元素拥有已传递name参数所指定的类名称。有就返回true，否则返回false。

name：（字符串）将要检查的类名称。

大家会不会这个的感觉有点熟悉，我们之前的一篇有讲过is()方法，就是判断某包装集是否包含在另一个包装集的方法。话说jQuery内部正是这样实现hasClass()函数的。

有了hasClass()这个方法，我们就可以在某些时候，比如判断某个元素的样式中有无此类，这样就不会太唐突了。说实话，这个我很难举例，只会在一些特定场合上用到，而且你会发现非常有用。

今天先写到这吧，在家用笔记本边学边写也是非常的费劲的，不像是在公司两个显示屏。哈哈，我有点懒惰啦~~今天学的几乎之前都有用过，但是有些重载方法的使用还是让我长见识的，以前不知道有那么多的重载方法。

本篇剩余内容我会在“jQuery 学习系列笔记（三）（续）”中表出。

关于jQuery的学习系列笔记我写的会比较简洁，更注重的是快速上手使用，当然，非常重要的知识点我还是会专门指出的。

PS：欢迎留言交流，24小时内必有回复。