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({      width: 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()

和高相對

 

JQ屬性和CSS