用jQuery来操作DOM
一、修改元素属性
要使用jQuery操纵DOM,必须先使用选择器选中一个或多个元素,由于jQuery是对结果集进行隐式迭代的操作,因此一个jQuery对象可以同时对多个元素进行属性更改。
1、获取元素的属性
获取和设置属性使用jQuery的attr方法,而移除属性使用removeAttr方法,其中获取元素属性的attr语法为:
$(selector).attr(attribute)
相关例子为:
$("img").attr("src");
2、设置元素的属性
要设置元素的属性,同样使用attr函数,语法如下:
$(selector).attr(attribute,value)
其中attribute用来指定属性的名称,value用来指定属性的值。
在使用attr设置属性时使用“属性名称:属性值”匹配的语句,attr还可以同时设置两个以上的属性值。
二、修改元素内容
有3个方法可以用来获取HTML元素的内容,分别是:
- text():设置或返回所选中元素的文本内容。
- html():设置或返回所选元素的内容(包括HTML标记)。
- val():设置或返回表单字段的值。
text和html的明显区别是,tezt只返回元素的文本内容,而html返回的是将HTML解析后的内容。val返回的是表单的内容。
三、动态创建内容
jQuery还允许开发人员动态地为页面添加内容,类似于JavaScript语言中地CreateElement,jQuery动态创建HTML元素使用工厂函数$()实现,
语法如下:
$(html)
其中参数html是要动态创建地HTML标记,它会动态创建一个DOM对象,但是这个DOM对象并没有添加到DOM对象树中,可以使用如下几个jQuery函数来将其添加到DOM对象树:
- append():在被选元素的结尾插入内容。
- prepend():在被选元素的开头插入内容。
- after():在被选元素之后插入内容。
- before():在被选元素之前插入内容。
四、动态插入节点
动态插入节点如果不插入到DOM对象树中,那么是不会在页面上呈现的。
方法名称 | 方法描述 |
---|---|
append() | 方法在被选元素的结尾(仍然在内部)插入指定内容 |
appendTo() | 方法在被选元素的结尾(仍然在内部)插入指定内容 |
prepend() | 方法在被选元素的开头(仍然在内部)插入指定内容 |
prependTo() | 方法在被选元素的开头(仍然在内部)插入指定内容 |
after() | 在被选元素后插入指定的内容 |
before() | 在被选元素前插入指定的内容 |
insertAfter() | 把匹配的元素插入到一个指定的元素集合的后面 |
insertBefore() | 把匹配的元素插入到一个指定的元素集合的前面 |
append和appendTo、prepend和prependTo的不同之处在于内容和选择器的位置。
五、动态删除节点
jQuery提供了两个可以用来从DOM元素树中移除节点的方法:
- remove()方法:用来删除指定的DOM元素,它会将节点从DOM元素树中移除,但是会返回一个指向DOM元素的引用,因此它并不是真正地将jQuery引用到地元素对象删除,而是可以通过这个引用来继续操作元素。
- empty()方法:该方法也不会删除节点,只是清空节点中的内容,DOM元素依然保持在DOM元素树中。
remove()方法会把元素从DOM对象树中移除,但是不会把引用了这些对象的jQuery对象删除,因此还是可以使用jQuery对象来进行一些操作。而empty只是将元素中的内容进行清空。
六、常见问题
1、tagName和attribute的区别
jQuery中使用attr方法来获取或设置元素的属性,而这里的属性指的是attribute,不是tagName,tagName是标签的名称,不是标签的属性。
2、attr方法和prop方法都用于来获取元素的属性吗
使用attr方法来获取或修改元素的属性,但是针对Boolean值的元素,在获取属性时,有一些区别,建议使用prop,尤其是没有为单元按钮或复选框设置初始值的情况下。