jQuery第三课 修改元素属性及内容的代码_jquery

1. 操作属性
上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集，对每一个元素进行一个操作。jQuery提供的函数是
each(iterator)，其中iterator是一个函数，接受一个整数作为参数，表示第几个元素。看一个简单的例子。

复制代码 代码如下:

Image Gallery
March 13th,2010

结果用Firebug查看下：

在上例中，采用了原生javascript的方法存取属性，jQuery 提供了一个更加一般的方法来存取属性，attr：

attr(name),如果name是字符串，获得第一个元素的属性的name的值；如果name是一个对象，则对象的属性被作为元素的属性而复制到包装集的所有元素上。

attr(name,value),当name是字符串的时候，就把属性name的值设置为value，当value是一个函数的时候，则对包装集中的每个元素调用此函数，将其name的值设置为函数的返回值。

看一个简单的例子，html代码仍然使用上面的：

复制代码 代码如下:

$(function() {
$('body').children().attr('title', function(n) {
return"This is "+ n + "th element";
});
$('img').attr('alt', 'A photo taken by YinZixin');
alert($('h1').attr('title'));
});

结果为：
 
要删除属性，使用removeAttr(name)方法。
要注意，属性中有一个比较特殊的属性class。class属性十分常用，而他恰好又是javascript的关键字。要存取class属性，需要使用className而不是class。例如：
$('img').attr('className', 'photo');class和其他属性不一样，一个元素可以有多个class，它们用空格隔开，例如 class='big strong',正因为class特殊而又常用，jQuery有专门的方法处理class属性。
addClass(names),添加类；
removeClass(names), 删除类；
toggleClass(names),如果元素有该类，则删除，否则添加。
其中的names是一个字符串，可以是由空格分隔的多个类名组成。addClass和removeClass使用简单不再举例，toggleClass尤为简单实用，下面看一个例子,html代码仍然用上面的:

复制代码 代码如下:

其中最后两句是为img注册事件，鼠标进入和离开的事件是一样的，使用toggleClass它能自动判断当前的类是否存在从而采取不同的操作。
有时候我们不需要为某个元素加载某个class，只需要改变其css属性中的某一项，可以采用css方法，css方法在前面两篇文章中早已用到，不再介绍。
2. 操作DOM节点
要移动一些内容到当前包装集内的元素的内部，可以用append(content)方法，这里的content可以是一个html片段，也可以是元素，或者包装集。看一个例子：

复制代码 代码如下:

$(function() {
$('td:odd').append($('span'));
$('div:first').append($('p')).append('sub title');
});

1
2

Hello JQuery

Title