jQuery手册中的属性和css部分

属性：

1、attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。

//参数name 描述:返回文档中所有图像的src属性值。

$("img").attr("src");

//参数properties 描述:为所有图像设置src和alt属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });

//参数key,value 描述:为所有图像设置src属性。

$("img").attr("src","test.jpg");

//参数key,回调函数 描述:把src属性的值设置为img1.png , ...
    $(function(){

        //回调函数(index下标)（src1可自定义，是src属性的值）
        $('img').attr('src',function(index,src1){
        this.src = "img"+(index+1)+".png";
        });

    })

//结果：
      src="img1.png"
      src="img2.png"
      src="img3.png"
      ...

2、removeAttr(name)

从每一个匹配的元素中删除一个属性

//将文档中图像的src属性删除
<img src="test.jpg"/>

$("img").removeAttr("src");

3、prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。　

//参数name 描述:
   // 选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");

    //参数properties 描述:
       // 禁用页面上的所有复选框。

    $("input[type='checkbox']").prop({disabled: true});

        //参数key,value 描述:
           // 禁用和选中所有页面上的复选框。

      $("input[type='checkbox']").prop("disabled", false);
      $("input[type='checkbox']").prop("checked", true);

  


          //参数key,回调函数 描述:
              //  通过函数来设置所有页面上的复选框被选中。
    
              <input type="checkbox"  name="" id="" value="" />  //结果，选中勾上
              <input type="checkbox" checked="checked" name="" id="" value="" />    //结果，没勾上
              <input type="checkbox" checked="checked" name="" id="" value="" />    //结果，没勾上

            $("input[type='checkbox']").prop("checked", function( i, val ) {
              return !val;
            });  

　　

4、removeProp(name)

用来删除由.prop()方法设置的属性集

//设置一个段落数字属性，然后将其删除。
<p></p>


var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". "+"<br>");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");


//结果：
The secret luggage code is: 1234. 
Now the secret luggage code is: undefined. 

5、addClass(class|fn)

为每个匹配的元素添加指定的类名。

//参数class 描述:
    为匹配的元素加上 'selected' 类


$("p").addClass("selected");
$("p").addClass("selected1 selected2");

//回调函数 描述:
    给最后一个class加上一个"item-2"的类

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

　　

6、返回值:jQueryremoveClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。

//参数class 描述:
   从匹配的元素中删除 'selected' 类

$("p").removeClass("selected");

//参数class 描述:
    删除匹配元素的所有类

$("p").removeClass();


//回调函数描述:
    删除最后一个元素上与前面重复的class

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

　　　

7、toggleClass(class|fn[,sw])

　如果存在（不存在）就删除（添加）一个类。

//参数class 描述:
    为匹配的元素切换 'selected' 类

$("p").toggleClass("selected");

//参数class,switch 描述:
    每点击三下加上一次 'highlight' 类

    <strong>jQuery 代码:</strong>

  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

//回调函数 描述:
    根据父元素来设置class属性

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

　　

8、html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

//无参数 描述:
    返回p元素的内容。

$('p').html();

//参数val 描述:
    设置所有 p 元素的内容

$("p").html("Hello <b>world</b>!");

回调函数描述:

使用函数来设置所有匹配元素的内容。

jQuery 代码:
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

　

9、text([val|fn])

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

　

//无参数 描述:
    返回p元素的文本内容。

$('p').text();

//参数val 描述:
    设置所有 p 元素的文本内容

$("p").text("Hello world!");

//回调函数 描述:
    使用函数来设置所有匹配元素的文本内容。

$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

　　

10、val([val|fn|arr])

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

//无参数 描述:
    获取文本框中的值

$("input").val();

//参数val 描述:
    设定文本框的值

$("input").val("hello world!");


//回调函数 描述:
    设定文本框的值

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

//参数array 描述:
    选中check2，radio1

<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2

$("input").val(["check2", "radio1"]);

　　

css部分　

11、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({
       function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

　

　

12、jQuery.cssHooks

直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。

$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它来创建新的 cssHooks 用于标准化 CSS3 功能，例如，盒子阴影（box shadows）及渐变（gradients）。

例如，某些基于 Webkit 的浏览器会使用 -webkit-border-radius 来设置对象的 border-radius，然而,早先版本的 Firefox 则使用 -moz-border-radius。cssHook 就可以将这些不同的写法进行标准化，从而让 .css() 可以使用统一的标准化属性名(border-radius 或对应的 DOM 属性写法 borderRadius)。

该方法除了提供了对特定样式的处理可以采用更加细致的控制外，$.cssHooks 同时还扩展了 .animate() 方法上的属性集

　

13、offset([coordinates])

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

//获取第二段的偏移
<p>Hello</p><p>2nd Paragraph</p>


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

　　

14、position()

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

//获取第一段的偏移

<p>Hello</p><p>2nd Paragraph</p>

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

　　

15、scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

//无参数描述:
    // 获取第一段相对滚动条顶部的偏移

<p>Hello</p><p>2nd Paragraph</p>

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

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

//参数val 描述:
      //设置相对滚动条顶部的偏移


$("div.demo").scrollTop(300);

　

16、scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

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

<p>Hello</p><p>2nd Paragraph</p>

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



//参数val 描述:
   // 设置相对滚动条左侧的偏移

$("div.demo").scrollLeft(300);

　　

17、height([val|fn])

取得匹配元素当前计算的高度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

//无参数描述:
    //获取第一段的高


$("p").height();

//参数val 描述:
   // 把所有段落的高设为 20:

$("p").height(20);



//参数function(index, height) 描述:
  //  以 10 像素的幅度增加 p 元素的高度

jQuery 代码:
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

　　

18、width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。

19、innerHeight()

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

此方法对可见和隐藏元素均有效。

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


<p>Hello</p><p>2nd Paragraph</p>


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

　　

20、innerWidth()

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

此方法对可见和隐藏元素均有效。

21、outerHeight([options])

获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

//获取第一段落外部高度。

<p>Hello</p><p>2nd Paragraph</p>


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

　　

22、outerWidth([options])

获取第一个匹配元素外部宽度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。