jquery 删除html属性值,使用jQuery的remove()和empty()方法删除Html元素及子元素和内容...

01第1节. jQuery删除元素和内容

#JavaScript#在jQuery中，不仅可以在已有Html页面中添加新的Html元素，还可以删除已有的Html元素。

在jQuery中有2个方法可以完成在整个Html DOM树中删除指定元素或该元素下的子元素。

(1). remove()方法：使用该方法可以在Html DOM中删除当前选择的元素及期该元素下的所有子元素全部删除。

(2). empty()方法：使用该方法可以在Html DOM中将当前所选元素的子元素删除掉。

(3). Remove()即删除选择的元素，也删除子元素，而empty()只删除子元素。

一、remove()方法

在jQuery中，使用封装好的remove()方法可以删除掉当前所选元素及其子元素。也就是将当前所选元素和该元素下的所有子元素全部删除。

举例来说明一下remove()方法的使用：

一都编程

P0001

P0002

DIV0002

在此Html代码中，在id=div1的元素上使用了remove()方法，则会将id=div1及其下的所有元素删除。运行结果如下：

jquery remove()方法

在图1中可以看到，id=div1下有2个p子元素。

现在在图1中点击一下“删除”按钮，执行remove()方法，将id=div1的div元素，id=p1和id=p2的两个p元素删除掉。

jquery remove()方法

此时，在图2中，我们看到的元素结构中，id=div1和它的子元素全部删除掉了。

另外，我们还可以使用jQuery的remove()方法以筛选元素的方式删除Html元素。

P0001

P0002

DIV0002

DIV0003

上面的jQuery代码的功能是删除所有class为.yd的div元素。

先查看一下运行结果：

jquery remove()方法

在图3中，我们看到，id=div3的div元素具有class=”yd”的属性，因此，remove(".yd")会将id=div3的元素删除掉。

点击一下按钮，查看删除结果：

jquery remove()方法

此时，我们发现，id=div3的元素已经没有了。

二、empty()方法

在jQuery中，使用empty()方法可以删除当前所选元素的子元素，只删除子元素，选择的元素不被删除。

Html+jQuery的代码如下：

P0001

P0002

DIV0002

在此代码中，在获取的元素对象中使用了empty()方法，只会删除id=div1的下面的2个子元素。

运行一下结果：

jquery empty()方法

在图5中，我们看到，p1和p2这2个p元素是放在id=div1元素下的。

现在点击一下“删除”按钮：

jquery empty()方法

在图6中，我们发现，id=div1这个元素还在，只是2个p子元素没有了。

02第2节. jQuery尺寸操作

通过 jQuery技术，可以更好的操作Html元素和浏览器窗口的尺寸。

在Html元素中，使用padding表示内边距，使用border表示边框，使用margin表示外边距。

一、width()和height()方法

在jQuery中，对Html元素的高度和宽度也封装了方法：

(1). 使用width()方法不仅可以获取Html元素的宽度，还可以修改宽度，调整元素的宽度。

Width()方法不包含内边距、边框和外边距，要注意这种情况。

(2). 使用height()方法可以修改和获取Html元素的高度，这个高度不包含内边距、边框或外边距。

现在，我们编写一段代码，测试一下width()和height()方法的使用：

上面的代码是得到id=div1的宽度和高度，运行结果如下：

jquery width()和height()方法

二、innerWidth()和innerHeight()方法

在jQuery中，使用了inner来表示包含内边距的宽度和高度。

(1). 使用innerWidth()方法得到Html元素包含内边距的宽度。

(2). 使用innerHeight()方法得到Html元素包含内边距的高度。

比如：我们给div设置了内边距为20，即padding:20px。则获取的innerWidth()和innerHeight()的值就包括padding设置的值。

Html+jQuery代码如下：

在此代码中，获取的是Html元素的内宽度和内高度。

innerWidth()和innerHeight()方法

在图8中得到的这个值就是包含内边距的。

三、outerWidth()和outerHeight()方法

在jQuery中，即可以得到内边距，也可以得到边框的宽度和高度，使用如下2个方法：

(1). 使用outerWidth()方法得到元素包括内边距和边框的宽度。

(2). 使用outerHeight()方法得到元素包括内边距和边框的高度。

现在获取一下包括内边距和边框的宽度和高度：

outerWidth()和outerHeight()方法

在jQuery中，如果想得到的宽度和高度包含了内边距、边框和外边距，则可以使用outerWidth()和outerHeight()方法，但是需要传入true参数值，这样得到的数据比较多，也是经常使用的结果值。

举报/反馈