1. 操作属性
上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集,对每一个元素进行一个操作。jquery提供的函数是
each(iterator),其中iterator是一个函数,接受一个整数作为参数,表示第几个元素。看一个简单的例子。
复制代码 代码如下:
jquery operation
image gallery
march 13th,2010
结果用firebug查看下:
在上例中,采用了原生javascript的方法存取属性,jquery 提供了一个更加一般的方法来存取属性,attr:
attr(name),如果name是字符串,获得第一个元素的属性的name的值;如果name是一个对象,则对象的属性被作为元素的属性而复制到包装集的所有元素上。
attr(name,value),当name是字符串的时候,就把属性name的值设置为value,当value是一个函数的时候,则对包装集中的每个元素调用此函数,将其name的值设置为函数的返回值。
看一个简单的例子,html代码仍然使用上面的:
复制代码 代码如下:
其中最后两句是为img注册事件,鼠标进入和离开的事件是一样的,使用toggleclass它能自动判断当前的类是否存在从而采取不同的操作。
有时候我们不需要为某个元素加载某个class,只需要改变其css属性中的某一项,可以采用css方法,css方法在前面两篇文章中早已用到,不再介绍。
2. 操作dom节点
要移动一些内容到当前包装集内的元素的内部,可以用append(content)方法,这里的content可以是一个html片段,也可以是元素,或者包装集。看一个例子:
复制代码 代码如下:
jquery operation
$(function() {
$('td:odd').append($('span'));
$('div:first').append($('p')).append('sub title');
});
1
2
hello jquery
title
最终结果如下:
还有一个appendto(target),它和append方法的方向反一反,append把参数添加到调用者内部,appendto把调用者添加到参数的内部。还有几对方法和append,appendto类似:
prepend,prependto:append方法当目的元素内部中有其他元素的时候,添加的元素是在原有的元素的最后,prepend则是在最前。
before,insertbefore:插在目的元素之前一个,而不是内部
after,insertafter:插在目的元素之后。
要删除元素,可以使用remove 或者 empty方法。注意remove会把选中的元素从页面上删除,同时把这些元素作为返回值返回,这些元素不会被垃圾收集,可以对他们进行进一步操作,也可以用append之类的方法重新显示到页面上,而empty方法则彻底删除元素。
3. 操作表单元素的值
操作表单元素的值十分常用,但并不容易。jquery提供了一个val方法来简化操作。不带参数的val()方法返回当前元素的值。val(values)方法用来将当前元素的值设置为values,如果values是一个数组,则更为有趣一点,它用于匹配select元素中的值,包括在values中的值将会变成选中状态。