jQuery之DOM操作
2018-12-17 本文已影响0人
5吖
A、创建元素
只需要把DOM字符串传入 $ 方法即可返回一个jQuery对象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
image.png
B、添加元素
(1) .append(content[,content]) / .append(function(index,html))
- 可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象
- 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值
(2) .prepend(content[,content]) / .prepend(function(index,html))
向对象头部追加内容,用法和append类似,内容添加到最开始
image.png(3) .before([content][,content]) / .before(function)
在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和append类似
image.png(4) .after([content][,content]) / .after(function(index))
和before相反,在对象后面(不是尾部,而是外面,和对象并列同级)插入内容,参数和append类似
image.pngC、删除元素
(1) remove([selector])
删除被选元素(及其子元素),也可以添加一个可选的选择器参数来过滤匹配的元素
image.png(2) empty()
清空被选择元素内所有子元素
image.pngD、包裹元素
(1) html([string])
这是一个读写两用的方法,用于获取/修改元素的innerHTML
- 当没有传递参数的时候,返回元素的innerHTML
- 当传递了一个string参数的时候,修改元素的innerHTML为参数
其中,特别注意:读写两用的方法很多,原理都类似
-
如果结果是多个进行赋值操作的时候会给每个结果都赋值
-
如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值
(2) text()
和html方法类似,操作的是DOM的innerText值