jQuery學習之七 CSS

2021-08-11 09:52:21 字數 2607 閱讀 3565

這一篇,話不多說,直接來學習吧,我覺得很重要~

1、css(name|pro|[,val|fn])訪問匹配元素的樣式屬性。

引數解析:

name:要訪問的屬性名稱

properties:要設定為樣式屬性的名/值對

name,value:屬性名,屬性值

name,function(index,value):屬性名;函式返回要設定的屬性值。接受兩個引數,index為元素在物件集合中的索引位置,value是原先的屬性值。

$("p").css("color");//取得p標籤的字型顏色

$("p").css();//把p標籤的字型顏色設為red,背顏設為藍色

$("p").css("color","red");//p標籤的字型顏色設為red

//逐漸增加div的大小

$("div").click(function

() ,

height: function

(index, value)

});});

2、offset([coordinates])獲取/設定匹配元素在當前視口的相對偏移。

返回的物件包含兩個整型屬性:top 和 left,以畫素計。此方法只對可見元素有效。

$(

"p").offset();//獲取p標籤的left和top值

$("p:last").offset();//設定最後乙個p標籤的offset偏移量

3、position()

獲取/設定匹配元素相對父元素的偏移。

返回的物件包含兩個整型屬性:top 和 left。為精確計算結果,請在補白、邊框和填充屬性上使用畫素單位。此方法只對可見元素有效。

hello

2nd paragraphp>

var p = $("p:first");

var position = p.position();

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

hellop>

left: 15, top: 15p>

4、scrolltop(val)

獲取/設定匹配元素相對滾動條頂部的偏移。

此方法對可見和隱藏元素均有效。

$(

"p").scrolltop();//獲取p標籤相對於滾動條頂部的偏移

$("div.demo").scrolltop(300);//設定相對滾動條頂部的偏移

5、scrollleft(value)

獲取匹配元素相對滾動條左側的偏移。

此方法對可見和隱藏元素均有效。

$(

"p").scrollleft();//獲取p標籤相對於滾動條左部的偏移

$("div.demo").scrollleft(300);//設定相對滾動條左部的偏移

6、height([val|fn])取得/設定匹配元素當前計算的高度值(px)。

設定css中 『height』 的值,可以是字串或者數字,還可以是乙個函式,返回要設定的數值。函式接受兩個引數,第乙個引數是元素在原先集合中的索引位置,第二個引數為原先的高度。

$("p").height();

$("button").click(function

());

7、width([val|fn])取得/設定第乙個匹配元素當前計算的寬度值(px)。

設定css中 『width』 的值,可以是字串或者數字,還可以是乙個函式,返回要設定的數值。函式接受兩個引數,第乙個引數是元素在原先集合中的索引位置,第二個引數為原先的寬度。

$("p").width();

$("button").click(function

());

});

8、innerheight()獲取第乙個匹配元素內部區域高度(包括補白、不包括邊框)。

此方法對可見和隱藏元素均有效。

var p = $(

"p:first");

$("p:last").text( "innerheight:" + p.innerheight() );

hello

innerheight: 16>

9、innerwidth()獲取第乙個匹配元素內部區域寬度(包括補白、不包括邊框)。

此方法對可見和隱藏元素均有效。

var p = $(

"p:first");

$("p:last").text( "innerwidth:" + p.innerwidth() );

hello

innerwidth: 40>

10、outerheight([options])/outerwidth([options])獲取第乙個匹配元素外部高度/寬度(預設包括補白和邊框)。

此方法對可見和隱藏元素均有效。

options:設定為 true 時,計算邊距在內。

jQuery 學習筆記之七 jQuery 動畫

jquery中的動畫 一 show 和hide 方法 show 方法和hide 方法是jquery中最基本的動畫方。呼叫hide 會將元素的display樣式改為 none element.css display none 通過css方法隱藏元素。呼叫show 方法將元素的dispaly樣式設定為先...

jQuery函式學習之七 Ajax部分

location boston success function msg jquery code var html ajax responsetext jquery code var xmldocument create xml document ajax 函式 ajaxsetup settings...

jQuery零基礎學習筆記(七)CSS的處理

p css color p css color green p css p css height function css方法,可以取得屬性值,獲得單個 多個屬性值。前者獲取匹配元素在當前視窗的相對偏移,返回值為top和left。var offset p first offset alert 便宜量...