1、.css（）:
获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性
添加一个样式
css（属性，属性值）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> .container{ border: 1px solid red; } </style> </head> <body> <div class="container"> <p class="p1" >haha</p> <p>haha</p> <p>haha</p> <p>haha</p> <span>我是span</span> </div> </body> <script> $(document).ready(function(){ $("div").css("color","red"); }) </script> </html>
添加多个样式
$("div").css({
"color" : "red",
"background-color":"green"
});
获取样式
console.log($("div").css("color"));
2、height（）:
获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
获取元素值
值为本身的值，与margin、padding、border无关
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> .container{ border: 1px solid red; } div{ width: 100px; height: 100px; } </style> </head> <body> <div class="container"> <p class="p1" >haha</p> <p>haha</p> <p>haha</p> <p>haha</p> <span>我是span</span> </div> </body> <script> $(document).ready(function(){ $("div").css({"color":"red","background-color":"green"}); console.log($("div").height()); // console.log($("div").css("color")); }) </script> </html>
设置高度
console.log($("div").height(50));
3、.width（）:
为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度
console.log($("div").width());
设置宽度
console.log($("div").width(50));
4、.innerHeight（）:
为匹配的元素集合中获取第一个元素的当前计算高度值包括padding，但是不包括border..
console.log($("div").innerHeight());
5、innerWidth（）:
为匹配的元素集合中获取第一个元素的当前计算宽度值包括padding，但是不包括border
console.log($("div").innerWidth());
6、.ofset（）:
在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。设置匹配的元素集合中每
一个元素的坐标 ，坐标相对于文档。
没有参数为获取，添加参数为设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> *{ margin: 0px; padding: 0px; } /* 初始化 */ div{ width: 100px; height: 100px; margin: 100px ; padding: 20px; border: 2px solid red; } </style> </head> <body> <div class="container"> <p class="p1" >haha</p> <p>haha</p> <p>haha</p> <p>haha</p> <span>我是span</span> </div> </body> <script> $(document).ready(function(){ var div=$("div"); var zuobiao={ top:300, left:500 }; console.log(div.offset()); console.log(div.offset(zuobiao)); }) </script> </html>
7、outerHeight（）:
获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整
数(不包含“px”)表示的值，或如果在一个空集合上调用该方法，则会返回 null。
8outerWidth（）:
获取元素集合中第一个元素的当前计算宽度值包括padding，border和选择性的margin。 (注:返回
一个整数(不包含“px”)表示的值，或如果在一个空集合上调用该方法，则会返回 null。)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> *{ margin: 0px; padding: 0px; } /* 初始化 */ div{ width: 100px; height: 100px; margin: 100px ; padding: 20px; border: 2px solid red; } </style> </head> <body> <div class="container"> <p class="p1" >haha</p> <p>haha</p> <p>haha</p> <p>haha</p> <span>我是span</span> </div> </body> <script> $(document).ready(function(){ console.log($("div").outerHeight()); console.log($("div").outerWidth()); }) </script> </html>
参数（布尔类型）
默认值为false，为true时包含margin
9、.position（）:
获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(译者注fset parent指离该元
素最近的而且被定位过的祖先元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> *{ margin: 0px; padding: 0px; } /* 初始化 */ div{ padding: 20px; background-color: antiquewhite; } p{ margin-left: 10px; background-color: aqua; } </style> </head> <body> <div class="container"> <p>haha</p> <p>haha</p> <p>haha</p> <span>我是span</span> </div> </body> <script> $(document).ready(function(){ var po=$("p").position(); console.log(po); }) </script> </html>
改变div位置不影响
注意：
position是相对于父元素的坐标
outside是相对于文档的位置
10、.scrolLeft（）:
获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置
11、.scrolTop（）:
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位
置。设置每个匹配元素的垂直滚动条位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> .demo{ width: 200px; height: 100px; overflow: auto; margin: 5px; padding: 5px; position: relative; border: 3px solid #666666; background-color: #cccccc; } p{ width: 1000px; height: 1000px; margin: 10px; padding: 5px; border: 2px solid #666666; } </style> </head> <body> <div class="demo"> <h1>lalala</h1> <p>hello</p> </div> </body> <script> $(document).ready(function(){ $(".demo").scrollTop(300); console.log($(".demo").scrollTop()); $(".demo").scrollLeft(300); console.log($(".demo").scrollLeft()); }) </script> </html>
