JQuery之三: 操作元素的properties和attributes

在前面两节,终于可以选定所需要的元素集合了。那么是时候操作这些元素,这节介绍操作元素的properties and attributes。或许可以搞些好看的例子演示这些操作。

properties和attributes有什么区别?

properties是DOM中的概念,attributes是html的概念。两者可以对应起来,也有不同。如下面的tag: 

<img id="myImage" src="image.gif" alt="An image" class="someClass"

title="This is an image"/>

id, src, alt, class, title 都是img的attributes,它们在DOM中被赋予attributes的一个属性里。这个attributes属性是一个NamedNodeMap。如attribute class对应DOM NameNodeMap中的className property。

引用XML DOM中的定义:The attributes property returns a NamedNodeMap (attribute list) containing the attributes of the selected node.

这样看来,操作properties和attributes的区别就是操作DOM还是操作HTML本身。

使用each()方法

each(iterator)方法传入一个函数,以遍历的方式操作wrapped set中的每一个元素。传入的函数参数为元素在wrapped set中的序号,并可在函数中使用this关键字引用元素本身。还要注意this指向的是一个标准DOM元素而不是JQuery封装的元素对象。

举个例子:

$('img').each(function(n){
    this.alt='This is image['+n+'] with an id of '+this.id;

});

这个表达式给每个img指定了alt属性值。

鉴于DOM为我们提供了丰富的HTMLElement properties,我们可以使用他们直接操作properties. 再给个例子:

$('img')[0].alt = 'the first img element'; //注意到[n]以及get(n)方法都返回标准DOM element.

使用attr()方法

注意JQuery中方法参数的个数往往决定了方法的作用,attr就是这样。

1. 一个字符串参数attr(name),返回由name指定的attribute值;

2. 两个参数attr(name, value),将value设置给由name指定的attribute为值。强大的地方在value可以是一个字符串,或者是一个Javascript表达式,甚至是一个函数。返回的是所操作的wrapped set,用以进行JQuery链操作。

value是一个函数时,操作起来很强大哦。比如上面那个例子也可以这样实现:

 $('img').attr('alt', function(n){
    return 'This is image['+n+'] with an id of '+this.id;

});

3. 一个对象参数attr(attributes),使用object的属性名和值分别设置同名attribute的值。比如:

$('input').attr(
    { value: '', title: 'Please enter a value' }

);

这个对象的强大地方在于可以在对象内使用函数,这样属性值就是函数的返回值了。比如:

$('input').attr({

    value : '',

    title : function(n){

        return  'Please enter the ' + n + 'th value: ';

    }

});

这里函数的使用方法同上面。

使用removeAttr()方法

removeAttr(name) 移除字符串name指定attribute,并返回原先的wrapped set以便进行JQuery链式操作。

容易理解的是,移除attribute不会移除property,很明显一个存在于HTML,一个存在于DOM中。但有可能引起property的变化,如移除readonly attribute,会引起相应property由true变为false。比如:

$('#sometext').removeAttr('readonly'); 假设原先input text不可输入,移除会导致其可输入。

一个应用的例子

为防止用户在form提交期间连续点击,可以将sumbit按钮disable掉:

$("form").submit(function() {
    $(":submit",this).attr("disabled", "disabled");
});

注意其中的this关键字,在事件绑定中,this指向被绑定的元素,这里this就指向form表单。$(":submit", this)则选择了当前form中的submit按钮(关于:sumbit请参阅JQuery之一)。

 

posted @ 2008-10-23 00:04  sayo.net  阅读(...)  评论(... 编辑 收藏