首页 > 代码库 > (3)jQuery篇 —— 用jQuery来操作DOM

(3)jQuery篇 —— 用jQuery来操作DOM

1. 获取元素的属性

获取和设置属性使用jQuery的attr方法,移除属性使用removeAttr方法。

语法: $(selector).attr(attribute)

来个例子: $( ‘img‘ ).attr( ‘src‘ )  // 获取img元素下的src属性

2. 设置元素的属性

既然我们都可以获取到元素的属性,那么一般来说,我们都会对获取的元素进行操作。

语法: $(selector).attr(attribute,value)

比如我们可以用设置一个div的title、id等。

 // 设置div的id
 $(‘#div1‘).attr(‘id‘,‘div2‘);

当然,jQuery这么有意思的东西,当然是支持设置多个属性的啦。

 // 设置多个属性
 $(‘#div1‘).attr({
     ‘href‘: ‘http://www.baidu.com‘,
     ‘title‘: ‘百度‘
 });

3. 修改元素内容

有3个方法可以获取元素内容:

(1) text() : 设置或返回所选元素的文本内容

(2) html() : 设置或返回所选元素的内容(包括HTML标记)

(3) val() : 设置或返回表单字段的值

text和html最大的区别就在于text只返回元素的文本内容,而html返回的是将HTML解析后的内容。

而val返回的是表单的内容。

4. 动态创建内容

语法: $(html)

还记得最开始的第一个jQuery吗?那就是动态创建的div。

(3)jQuery篇 —— 用jQuery来操作DOM