jQuery系列09
一、CSS属性
1.css()：获取匹配集合中第一个元素的样式属性的值（当指定一个属性时，不支持简写的属性，例如background，font），或者设置一个元素的样式属性。
设置属性通过键值对的方式设置，$(selector).css("name","value"),也可以通过函数来设置，$(selector).css("name",function(){})，当
要设置多个属性时，可以通过对象的形式来设置，$(selector).css({"name1":"value1","name2":"value2",....})。
2.height()：用于获取或者设置匹配的元素集合中第一个元素的高度。
3.width()：用于获取或者设置匹配元素集合中第一个元素的宽度。
4.innerHeight()：用于获取或者设置匹配的元素集合中的第一个元素的计算高度，包含padding。
5.innerWidth()：用于获取或者设置匹配元素集合中第一个元素的计算宽度，包含padding。
6.offset()：在匹配元素集合中，获取第一个元素的当前坐标，坐标相对于文档。或者是设置匹配元素集合中第一个元素的坐标，同样是相对于文档。
7.outHeight()：用于获取或者设置匹配的元素集合中的第一个元素的计算高度，包含padding、border以及margin。
8.outWidth()：用于获取或者设置匹配的元素集合中的第一个元素的计算宽度，包含padding、border以及margin。
9.position()：返回第一个匹配元素相对父元素的位置，包含两个整型属性，top和left，单位是px。
10.scrollLeft()：获取第一个元素的滚动条的水平位置，滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧的时候，位置是0。
11.scrollTop():获取第一个元素的滚动条的垂直位置，指的是滚动条相对其顶部的偏移量。如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移量。
在这里只列举几个比较难以理解的方法。
1.offset()
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> *{ margin:0; padding:0; } p{ position: absolute; left: 100px; top: 100px; } </style> </head> <body> <p>this is p</p> <span id="s1"></span> <span id="s2"></span> </body> <script> $(function () { var offset = $("p").offset(); $("#s1").html("left: "+offset.left + "px" +"<br>"); $("#s2").html("top: "+offset.top + "px"); }) </script> </html>
offset是获取指定的元素距离文档边缘的距离。
2.position()
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> *{ padding:0; margin: 0; } #d1{ display: flex; width: 300px; height: 300px; justify-content: center; align-items: center; background-color: red; } #d2{ width: 100px; height: 100px; background-color: cyan; } </style> </head> <body> <div id="d1"> <div id="d2">this is div2</div> </div> </body> <script> $(function () { var position = $("#d2").position(); console.log("left: "+ position.left + "px"); console.log("top: " + position.top + "px"); }) </script> </html>
position获取的是子元素相对于父元素的位置，在这里使用了弹性布局的方式使子元素在父元素中居中显示，相对于采用margin:0 auto;这种居中方式来讲，采用弹性布局来进行居中更加的准确，justify-content控制子元素在主轴上居中，align-item控制子元素在交叉轴上居中。
3.scrollLeft&scrollTop
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> .divStyle{ width: 130px; height: 100px; border: 1px solid #ccc; overflow: auto; } </style> </head> <body> <div id="d1" class="divStyle"> this is test world this is test world this is test world this is test world this is test world this is test world this is test world </div> <input type="button" id="change" value="设置滚动条顶部距离"/> <input type="button" id="show" value="显示顶端距离"/> <div id="top">0px</div> <br/> <div id="d2" class="divStyle"> this is test world:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <input type="button" id="Lchange" value="设置滚动条左侧距离"/> <input type="button" id="Lshow" value="显示左侧距离"/> <div id="left">0px</div> </body> <script> $(function () { $("#change").on("click", function () { $("#d1").scrollTop(100); }); $("#show").on("click", function () { var top = $("#d1").scrollTop(); $("#top").text(top + "px"); }); $("#Lchange").on("click", function () { $("#d2").scrollLeft(100); }); $("#Lshow").on("click", function () { var left = $("#d2").scrollLeft(); $("#left").text(left + "px"); }) }); </script> </html>
scrollTop和scrollLeft可以设置或者是获取指定的元素的滚动条距离上方（左侧）的距离，单位是像素，即px。
