jQuery的css

1、css(name|pro|[,val|fn]) 访问匹配元素的样式属性。

参数name 描述:
取得第一个段落的color样式属性的值。
$("p").css("color");

参数properties 描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({
  "color": "#ff0011", 
 "background": "blue" 
});

参数name,value 描述:
将所有段落字体设为红色
$("p").css("color","red");

参数name,回调函数 描述:
逐渐增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

 

2、offset([coordinates]) 获取匹配元素在当前视口的相对偏移。

无参数描述:
获取第二段的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

结果:
<p>Hello</p><p>left: 0, top: 35</p>


参数coordinates 描述:
获取第二段的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });

 

3、position() 获取匹配元素相对父元素的偏移。

获取第一段的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

结果:
<p>Hello</p><p>left: 15, top: 15</p>

 

4、scrollTop([val])  获取匹配元素相对滚动条顶部的偏移。

获取第一段相对滚动条顶部的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

结果:
<p>Hello</p><p>scrollTop: 0</p>

参数val 描述:
设置相对滚动条顶部的偏移
jQuery 代码:
$("div.demo").scrollTop(300)

 

5、scrollLeft([val])  获取匹配元素相对滚动条左侧的偏移。

无参数描述:
获取第一段相对滚动条左侧的偏移

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

结果:
<p>Hello</p><p>scrollLeft: 0</p>


参数val 描述:
设置相对滚动条左侧的偏移
jQuery 代码:
$("div.demo").scrollLeft(300);

 

6、height([val|fn])  取得匹配元素当前计算的高度值（px）。

无参数描述:
获取第一段的高
$("p").height();

参数val 描述:
把所有段落的高设为 20:
$("p").height(20);

参数function(index, height) 描述:
以 10 像素的幅度增加 p 元素的高度
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

 

7、width([val|fn])  取得第一个匹配元素当前计算的宽度值（px）。

无参数描述:
获取第一段的宽
$("p").width();

参数val 描述:
把所有段落的宽设为 20:
$("p").width(20);

参数function(index, height) 描述:
以 10 像素的幅度增加 p 元素的宽度
  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });

 

8、innerHeight()  获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

获取第一段落内部区域高度。

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

结果:
<p>Hello</p><p>innerHeight: 16</p>

 

9、innerWidth()  获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

获取第一段落内部区域宽度。

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

结果:
<p>Hello</p><p>innerWidth: 40</p>

 

10、outerHeight([options])  获取第一个匹配元素外部高度（默认包括补白和边框）。

获取第一段落外部高度。

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

结果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

 

11、outerWidth([options])  获取第一个匹配元素外部宽度（默认包括补白和边框）。

获取第一段落外部宽度。

HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

结果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>