01第1节.jQuery删除元素和内容
#JavaScript#在jQuery中，不仅可以在已有Html页面中添加新的Html元素，还可以删除已有的Html元素。
在jQuery中有2个方法可以完成在整个HtmlDOM树中删除指定元素或该元素下的子元素。
.NET全场课程-从0基础到深入学习线上.NET培训课程淘宝￥购买已下架(1).remove()方法：使用该方法可以在HtmlDOM中删除当前选择的元素及期该元素下的所有子元素全部删除。
(2).empty()方法：使用该方法可以在HtmlDOM中将当前所选元素的子元素删除掉。
(3).Remove()即删除选择的元素，也删除子元素，而empty()只删除子元素。
一、remove()方法
在jQuery中，使用封装好的remove()方法可以删除掉当前所选元素及其子元素。也就是将当前所选元素和该元素下的所有子元素全部删除。
举例来说明一下remove()方法的使用：
!DOCTYPEhtmlhtmlheadtitle一都编程/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(#div1);div1.remove();};/script/headbodydivid=div1pid=p1P/ppid=p2P/p/divdivid=div2DIV/divdivinputid=Button1type=buttonvalue=删除onclick=f1()//div/body/html
在此Html代码中，在id=div1的元素上使用了remove()方法，则会将id=div1及其下的所有元素删除。运行结果如下：
jqueryremove()方法在图1中可以看到，id=div1下有2个p子元素。
现在在图1中点击一下“删除”按钮，执行remove()方法，将id=div1的div元素，id=p1和id=p2的两个p元素删除掉。
jqueryremove()方法此时，在图2中，我们看到的元素结构中，id=div1和它的子元素全部删除掉了。
另外，我们还可以使用jQuery的remove()方法以筛选元素的方式删除Html元素。
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.1.1.min.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(div);div1.remove(.yd);};/script/headbodydivid=div1pid=p1P/ppid=p2P/p/divdivid=div2DIV/divdivid=div3class=ydDIV/divdivinputid=Button1type=buttonvalue=删除onclick=f1()//div/body/html
上面的jQuery代码的功能是删除所有class为.yd的div元素。
先查看一下运行结果：
jqueryremove()方法在图3中，我们看到，id=div3的div元素具有class=”yd”的属性，因此，remove(.yd)会将id=div3的元素删除掉。
点击一下按钮，查看删除结果：
jqueryremove()方法此时，我们发现，id=div3的元素已经没有了。
二、empty()方法
在jQuery中，使用empty()方法可以删除当前所选元素的子元素，只删除子元素，选择的元素不被删除。
Html+jQuery的代码如下：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(#div1);div1.empty();};/script/headbodydivid=div1pid=p1P/ppid=p2P/p/divdivid=div2DIV/divdivinputid=Button1type=buttonvalue=删除onclick=f1()//div/body/html
在此代码中，在获取的元素对象中使用了empty()方法，只会删除id=div1的下面的2个子元素。
运行一下结果：
jqueryempty()方法在图5中，我们看到，p1和p2这2个p元素是放在id=div1元素下的。
现在点击一下“删除”按钮：
jqueryempty()方法在图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()方法的使用：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(#div1);alert(宽度为：+div1.width()+高度为：+div1.height());}/script/headbodydivid=div1style=width:px;height:px;background-color:#ff;border:1pxsolid#ddd;/divinputid=Button1type=buttonvalue=提交onclick=f1()//body/html
上面的代码是得到id=div1的宽度和高度，运行结果如下：
jquerywidth()和height()方法二、innerWidth()和innerHeight()方法
在jQuery中，使用了inner来表示包含内边距的宽度和高度。
(1).使用innerWidth()方法得到Html元素包含内边距的宽度。
(2).使用innerHeight()方法得到Html元素包含内边距的高度。
比如：我们给div设置了内边距为20，即padding:20px。则获取的innerWidth()和innerHeight()的值就包括padding设置的值。
Html+jQuery代码如下：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(#div1);alert(内宽度：+div1.innerWidth()+内高度：+div1.innerHeight());}/script/headbodydivid=div1title=style=padding:10px;width:px;height:px;background-color:#ff;border:1pxsolid#ddd;/divinputid=Button1type=buttonvalue=提交onclick=f1()//body/html
在此代码中，获取的是Html元素的内宽度和内高度。
innerWidth()和innerHeight()方法在图8中得到的这个值就是包含内边距的。
三、outerWidth()和outerHeight()方法
在jQuery中，即可以得到内边距，也可以得到边框的宽度和高度，使用如下2个方法：
(1).使用outerWidth()方法得到元素包括内边距和边框的宽度。
(2).使用outerHeight()方法得到元素包括内边距和边框的高度。
现在获取一下包括内边距和边框的宽度和高度：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){vardiv1=$(#div1);alert(outerWidth:+div1.outerWidth()+outerHeight:+div1.outerHeight());}/script/headbodydivid=div1title=style=padding:10px;width:px;height:px;background-color:#ff;border:1pxsolid#ddd;/divinputid=Button1type=buttonvalue=提交onclick=f1()//body/html
outerWidth()和outerHeight()方法在jQuery中，如果想得到的宽度和高度包含了内边距、边框和外边距，则可以使用outerWidth()和outerHeight()方法，但是需要传入true参数值，这样得到的数据比较多，也是经常使用的结果值。