jquery中的屬性和css

jQuery中的屬性用於獲取或設置元素的屬性

1.attr(),獲取或設置所有相匹配的元素的屬性值；removeAttr("attr")，移除所有相匹配的元素的屬性

//html
<img src="1.jpg" alt=""/>

//jquery
$("img").attr("src")//"1.jpg"獲取img的src屬性值
$("img")attr({src:"2.jpg",alt:"this is a img"})//<img src="2.jpg" alt="this is a img"/> img的src值變為了"2.jpg",alt屬性值變為了"this is a img"
$("img").removeAttr("alt")//<img src="2.jpg" /> 移除了img的alt屬性，此時再次訪問alt屬性值會返回undefined。

 2.prop(),獲取或設置相匹配的元素中第一個元素的屬性值;removeprop("attr"),移除相匹配的元素中第一個元素的屬性

//html
<p title="first">first</p>
<p title="last">last</p>

//jquery
$("p").prop("title","lucky")//<p title="lucky">first</p>只改變了第一個p的title值
$("p").attr("title","lucky")//<p title="lucky">first</p>,<p title="lucky">last</p>兩個p的title值都改變了
$("p").removeProp("title")//<p>first</p>只移除了第一個p的title值
$("p").removeAttr("title","lucky")//<p>first</p>,<p>last</p>兩個p的title值都移除了

 3.addClass(“”),給元素增加類名，即class的屬性值；removeClass(""),移除元素的類名；toggleClass（“”）元素有該類名移除，沒有該類名則增加

//html
<div class="box">box1</div>
<div class="two">box2</div>

//jquery
$("div").addClass("do")//<div class="box do">box1</div>,<div class="two do">box2</div>div元素都增加了do的類名
$("div").removeClass("do")//<div class="box">box1</div>,<div class="two">box2</div>div元素都移除了do的類名
$("div").toggleClass("box")//<div class="">box1</div>,<div class="two box">box2</div>第一個div移除了box類名，第二個div增加了box類名

 4.html(),獲取或設置元素中的內容，包括html標簽。等同於js中的innerHTML；text（），獲取或改變元素標簽中的文本內容。等同於js中的textContent；val()獲取元素的value值，等同於js中的value

//html
<div class="box">box<p>it's a p</p></div>
<div class="text">text<p>it's a p</p></div>
<input type="text" value="text"/>

//jquery
//獲取
$(".box").html()//“box it's a p”  div標簽中的內容以html方式獲取
$(".box").text()//“box <p>it's a p</p>” div標簽中的內容以text方式獲取
$("input[type='text']").val（）//"text" 獲取input元素中的value值
//設置
$(".box").html("<u>aaa</ul>")// "aaa" div標簽中的內容以html格式顯現
$(".text").text("<u>aaa</ul>")//<u>aaa</ul> div標簽中的內容以html格式顯現
$("input[type='text']").val("noval")//<input type="text" value="noval"/>將input元素中的value值改為了noval

 jquery中的css用於設置元素的css樣式

1.css（）設置元素的css樣式

//html
<div class="box">it's a box</div>

//jquery
$(".box").css({width:"100px",height:"100px",border:"1px solid #f00"})//div元素的寬變為了100px，高變為了100px，邊框為紅色的1px寬度的實線

 2.jQuery.cssHook.直接向 jQuery 中添加鈎子，用於覆蓋設置或獲取特定 CSS 屬性時的方法，目的是為了標准化 CSS 屬性名或創建自定義屬性。$.cssHooks 對象提供了一種通過定義函數來獲取或設置特定 CSS 值的方法。可以用它來創建新的 cssHooks 用於標准化 CSS3 功能，例如，盒子陰影（box shadows）及漸變（gradients）。

(function($) {
   //判斷是否存在cssHooks方法
    if ( !$.cssHooks ) {
      throw("jQuery 1.4.3 or above is required for this plugin to work");
      return;
    }
    //元素是否有borderRadius屬性
      if ( borderRadius && borderRadius !== "borderRadius" ) {
      $.cssHooks.borderRadius = {
    //獲取元素的borderRadius屬性
        get: function( elem, computed, extra ) {
          return $.css( elem, borderRadius );
        },
   //設置元素的borderRadius屬性
        set: function( elem, value) {
          elem.style[ borderRadius ] = value;
        }
      };
    }
  })(jQuery);  

 3.offset({coordinates}):獲取或設置元素在當前視口中的位移，單位為px；position()：獲取元素相對於父元素的位移

//html
<div class="box">
  <p>this is a p</p>
</div>

//jquery
$(".box").offset({top:50,left:100})//div元素處於窗口距離左邊100px，上邊50px的位置
$(".box p").position()//返回p元素在div中的位置對象，該對象有left，top兩個屬性

 4.scrollTop():獲取或設置匹配元素相對滾動條頂部的偏移；scrollLeft():獲取或設置匹配元素相對滾動條左邊的偏移。這兩種方法對可見和隱藏元素均有效。

//html
<div class="box">box</box>

//jquery
$(".box").scrollTop(50).scrollLeft(100)//div元素處於距離滾動條上邊50px，左邊100px的位置。

 5.height():獲取或設置元素的高度；width():獲取或設置元素的寬度；innerHeight():獲取元素的高度（不包括元素的邊框及外邊距）；innerWidth():獲取元素的寬度（不包括元素的邊框及外邊距）；outerHeight([option]):獲取元素的高度，option為true時包括元素的邊框及外邊距；outerWidth():獲取元素的寬度，option為true時包括元素的邊框及外邊距。

//html
<div class="box">this is a box</div>

//style
.box{ width:100px;height:100px;border:1px solid #000;margin:50px 20px 0 0}

//jquery
$(".box").width(200)//寬度變為200px
$(".box").height(300)//高度變為300px
$(".box").innderWidth()//200px
$(".box").innderHeight()//300px
$(".box").outerWidth(true)//222px
$(".box").outerHright(true)//352px