js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
一、总结
一句话总结：jquery里面多是方法啊，比如jquery对象的宽高。所以取值是方法，赋值就是方法里面带参数。
1、百度富文本编辑器ueditor如何设置宽高？
jquery对象的width()和height()方法
37 $('#btn2').click(function(){ 38 $("#div1").width(50) 39 $('#div1').height(50) 40 })
2、juqery对象的宽高对应的三个方法是什么，分别表示什么意思？
元素的宽度高度
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。innerWidth() 方法返回元素的宽度（包括内边距）outerWidth() 方法返回元素的宽度（包括内边距和边框）height()、innerHeight()、outerHeight()与宽度类似
3、juqery对象如何设置一个表示全副武装的宽度（包括相关的一切）？
outerWidth()方法加true参数
34 //outerWidth() width + padding + border+margin35 alert($("#div1").outerWidth(true))
4、juqery对象的innerWidth()方法包括的是哪个边距？
内边距 padding
5、jquery的匿名函数中的index参数表示什么意思？
因为jquery对象多是集合，所以index就是表示所选元素的下标
43 $("#main div").width(function(index,oldWidth){ 44 //alert(index) 45 return oldWidth*(index+1)/5 46 })
二、jquery如何获取和设置元素的宽高
1、相关知识
元素的宽度高度
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。innerWidth() 方法返回元素的宽度（包括内边距）outerWidth() 方法返回元素的宽度（包括内边距和边框）height()、innerHeight()、outerHeight()与宽度类似
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6<meta charset="UTF-8"> 7<title>演示文档</title> 8<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9<style>10 #main{11 background: #ccc;padding: 10px;float: left;12 }13 #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}14</style>15 </style>16 </head>17 <body>18<div id="main">19 <div id="div1"></div>20 <div id="div2"></div>21 <div id="div3"></div>22</div>23<input id="btn1" type="button" value="获取">24<input id="btn2" type="button" value="设置"> 25<input id="btn3" type="button" value="设置2">26<script type="text/javascript">27 $(function(){28 $('#btn1').click(function(){29 alert($("#div1").width())30 //width + padding31 alert($("#div1").innerWidth())32 //outerWidth() width + padding + border33 alert($("#div1").outerWidth())34 //outerWidth() width + padding + border+margin35 alert($("#div1").outerWidth(true))36 })37 $('#btn2').click(function(){38 $("#div1").width(50)39 $('#div1').height(50)40 })41 42 $('#btn3').click(function(){43 $("#main div").width(function(index,oldWidth){44 //alert(index)45 return oldWidth*(index+1)/546 })47 })48 })49</script>50 </body>51 </html>
