JQ属性和CSS

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

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

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

返回文档中所有图像的src属性值

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

为所有图像设置src和alt属性

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

为所有图像设置src属性

$("img").attr("title", function() { return this.src });

把src属性的值设置为title属性的值

2.removeAttr(name)

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

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

将文档中图像的src属性删除

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

获取在匹配的元素中的第一个元素的值

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

选中复选框为true，没选中为false

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

禁用页面上的所有复选框。

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

禁用和选中所有页面上的复选框

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

通过函数来设置所有页面上的复选框被选中。

4.renmoveProp(name)

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

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

设置一个段落数字属性，然后将其删除

5.addClass()

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

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

为匹配的元素加上 'selected' 类

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

给li加上不同的class

6.removeClass()

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

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

删除最后一个元素上与前面重复的class

7.toggleClass()

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

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

为匹配的元素切换 'selected' 类

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

每点击三下加上一次 'highlight' 类

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

根据父元素来设置class属性

8.html()

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

$('p').html();

返回p元素的内容

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

设置所有 p 元素的内容

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

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

9.text()

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

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

$('p').text();

返回p元素的文本内容

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

设置所有 p 元素的文本内容

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

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

10.value()

获得匹配元素的当前值。

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

$("input").val();

获取文本框中的值

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

设定文本框的值

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

设定文本框的值

<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

设定一个select和一个多选的select的值

CSS

1.css()

访问匹配元素的样式属性。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

$("p").css("color");

取得第一个段落的color样式属性的值。

$("p").css({ "color": "#ff0011", "background": "blue" });

将所有段落的字体颜色设为红色并且背景为蓝色

$("p").css("color","red")

　　将所有段落字体设为红色

  $("div").click(function() {
    $(this).css({
       function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

逐渐增加div的大小

2.offset

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

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

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

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

获取第二段的偏移

3.positoon()

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

返回的对象包含两个整型属性：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 );

结果

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

4.scrollTop()

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

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

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

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

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

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

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

设置相对滚动条顶部的偏移

5.scrollLeft()

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

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

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

设置相对滚动条左侧的偏移

6.height()

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

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

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

以 10 像素的幅度增加 p 元素的高度

$("p").height(20)

把所有段落的高设为 20

7.width()

和高相对

8.innerHeight()

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

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

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

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

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

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

9.innerWidth()

和高相对

10.outHeight()

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

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

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

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.ourWidth()

和高相对