Bringing pages to life with jQuery
当我们按照Chapter 2的引导获取到元素集后,下一步要做的就是对这些页面元素进行处理。常用到的处理无非以下几种:
- 获取和设置元素的属性 - 元素的样式相关属性更特殊,值得单独说明
- 修改元素的内容(提到innerHTML就熟悉了吧,也包括直接操作DOM树)
- 与form元素的值打交道
获取和设置元素的属性都可以用attr()这个函数搞定。获取某元素的某属性:
$("#myImage").attr("title"),如果jQuery返回的是多元素集,可以用each函数做一个循环:
$(".myImage").each(function(item){alert(item.attr("title"))})。attr获取属性的一个好处是jQuery做了一部分通用化的工作,避免了一些ie和ff中属性名不同带来的困扰,如float属性等。注意一点attr取元素的类需要用key"class"不是"className"。
用attr设置元素的属性更显示了jQuery的便捷。最直接的当然是attr(name,value)的形式了,和获取时有相同的通用化定义。value是一个函数的时候就有趣了,他可以让元素集中的每一个元素都执行一遍该函数,函数的返回值就用来设置属性的值,传入的唯一的参数是这个元素在元素集中的index。看例子:
$('*').attr('title',function(index) {
return 'I am element ' + index + ' and my name is ' +
(this.id ? this.id : 'unset');
});
这样相当于少些了一个烦人的循环,很方便吧,在函数内部的this就是元素了。attr设置元素属性也支持attr(attributes)形式:
$('input').attr(
{ value: '', title: 'Please enter a value' }
);
顺便提一句removeAttr(name),看名字自然是删除一个属性了,不过他的意思是删除当前设置的属性值,相当于恢复属性到默认值,而不是在DOM中把这个元素的属性给删掉。
再说设置元素的样式class,这个当然可以通过上面提到的attr方法直接修改class属性,不过当一个元素有多个class时问题就来了,用空格隔开的多个class的名字可就不那么容易处理了。所以这个时候最好还是用jQuery提供的addClass(names), removeClass(names)和toggleClass(name)。参数名names自然预示也可以将多个名字用空格隔开传入函数。
设置元素的样式除了直接设置className外,还可以直接设置单个的css值,使用css()函数。css函数和attr基本用法一样,支持单独的name和value,value也可以是一个函数用来遍历执行,或者接受一个attributes map。用css(name)自然也可以获取元素的css特定属性,这里得到的结果是"计算后的结果" - 意味着页面的所有的样式(外部链接,网页内嵌或是元素inline)都应用后,计算出的这个元素的最终样式值。值得注意的是css方法返回的始终是字符串,即使属性对应数字也需要你自行解析,如果觉得不方便,那你肯定是想到需要下面的几个函数 了:width()和height()。同样传入数字就是设置元素的宽和高,不传就是获取宽和高,都是数字类型。另外这两个函数和直接获取css中的style.wiedth和style.height是不同的,这两个函数返回的仍是"计算后的结果"。最有提一句hasClass(name)函数,完成的就是他的字面意思的功能。
jQuery提供了很多获取和修改元素内容的方便的函数:html()和text(),传入一个字符串就是设置元素的html和text了,不传参数就是获取;append(content)就是在元素的末尾继续添加内容,内容可以是字符串,可以是已有的页面元素,这里需要指出一个jQuery处理页面元素时的基本原则:
当jQuery只匹配到一个元素时,那个元素就会从原来的位置移动到新指定的位置,如果匹配到了多个元素,那么就是将这些元素copy一份添加到新位置。和append相似的还有prepend, before, after和他们对应的appendTo, predpendTo, InsertBefore, InsertAfter();当我们想包装某些元素时可以用wrap(wrapper)函数,wrapper参数可以是html也可以是已有元素,注意,这个方法会把元素集里的每个元素分别包装,自然的,如果wrapper是已有元素,就会将其clone多份。如果想把元素集都wrap到一个元素里,就用wrapAll函数,有时候需要wrap元素的内容而不是元素本身,这时候用wrapInner;最后,用remove()函数将一个元素从DOM树中删除(只是从页面删除,元素本身还可以用,还可以稍后再放在别的地方),用empty()函数清空元素的内容,用clone(copyHandlers)来克隆元素,copyHandlers是一个布尔值,决定是否同时copy事件处理函数来个例子:
$('ul').clone().insertBefore('#here').end().hide();
jQuery如果不用官方的Form Plugin在处理form元素时还是有点儿弱,用val函数来处理简单的设置和获取form元素值,至于radioButton和checkButton等就有点儿不好玩儿了,等本书后面章节有好的方法在详述,倒是可以用jQuery特殊的selector做一些工作如:$('[name=radioGroup]:checked').val()
恩,最后小结:这一章介绍了n多的函数,不过大多遵循jQuery的规范,熟悉了几个其他的都是一样的用法,操作元素应该可以很灵活了,很多方法没有详细写,可以在仔细看原书。