jQuery篇 —— 用jQuery来操作DOM

Posted 2020-08-19 Amber丶

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。