JQuery知識快覽之四 樣式

2022-02-07 16:32:48 字數 2400 閱讀 7363

前面我們獲取了物件集,本文介紹怎麼控制物件集的樣式

在乙個html頁面中,我們有兩種方式來控制乙個物件的樣式,用html attribute控制,或者用css類來控制,這兩種方法雖然都能控制物件的樣式,但是通過css來控制物件的樣式,將內容和呈現分離開來是更為推薦的一種方法。jquery提供了豐富的控制css樣式的方法。

我們可以通過attr和prop來直接修改物件的css類,但是乙個物件可以有多個css類,我們有時只是想增加或者去掉乙個css類,這時,用attr和prop就不是那麼方便了,jquery提供了如下便利的方法來修改css類

1.增加css類

addclass(classname|function(index, currentclass))

可用空格隔開需要增加的多個css類

2.除去css類

removeclass([classname]|function(index, currentclass))

可用空格隔開需要除去的多個css類,如果不指定css類,則除去所有css類。

3.判斷是否有css類

hasclass(classname)

4.互動增刪css類

toggleclass([classname][,switch]|function(index, class,switch)[,switch])

當提供classname時則增刪指定的css類,當不提供時則增刪所有擁有的css類。

當提供switch,則根據其true或false指,增或者刪,否則,根據css類是否存在增或者刪。

1.css(propertyname|propertynames)

獲取css屬性值,1.9版新增用屬性名陣列來獲取多個css屬性的方法。如

$( elem ).css([ "bordertopwidth", "borderrightwidth", "borderbottomwidth", "borderleftwidth" ])

將獲取乙個包含各屬性值的陣列。

2.css(propertyname,value|propertyname,function(index,value)|properties)

設定css屬性值,1.6版新增用+=和-=在原有值的基礎上設定屬性值的方法,如css("width"."+=100")在原有width值的基礎上加上100.

css函式擁有極為強大的相容性,css和dom的樣式屬性都能用在css函式中,比如background-color和backgroundcolor都能被css用來設定背景。

css看起來如此的強大,我們似乎不需要別的函式來獲採樣式值了,可是jquery為我們想得更多。

我們知道用css('width')來獲取寬度時得到的是'400px'這種帶px的字串,而我們有時候需要用400這個值來做一些算術計算,這時jquery為我們提供了一系列的函式來獲取這些特殊的算術值。

1.獲取長寬算術值

width(),height()

獲取內容的長寬值,這個值不包括padding,border,margin部分

innerwidth(),innerheight()

獲取內部的長寬值,這個值是width()和height()的值加上padding部分。

outerwidth(),outerheight()

獲取外部的長寬值,這個值是width()和height()的值加上padding和border部分。但是不包括margin。

outerwidth(true),outerheight(true)

獲取外部的長寬值,這個值是width()和height()的值加上padding,border和margin部分。

注意:對於window和document物件來說,它們不存在padding,border,margin部分,因此只能對它們使用width()和height()函式。

2.設定長寬值

height(value|function(index,height))

可以設定的值為100px,50%,auto等,當只設定為100,而沒有指定其單位時,px是其預設單位。

注意:我們只能設定內容的長寬值,而不能設定inner或outer長寬值。

3.獲取位置

offset()

獲取物件集中第乙個物件相對於document的位置

position()

獲取物件集中第乙個物件相對於其parent的位置

注意:獲取到的位置資訊為這種形式的資料。

4.設定位置

offset(coords|function(index,coords))

物件集中物件相對於document的位置,用這種形式的資料來進行設定。

5.獲取和設定其滾動屬性

scrollleft([value])

獲取和設定其向右滾動的值

scrolltop([value])

獲取和設定其向下滾動的值

JQuery知識快覽之三 JQuery物件集

jquery物件,和dom物件是兩個不同的東西,jquery物件可以是dom物件的封裝,但是jquery物件不只是dom物件的封裝,它還可以代表其自定義的物件。為什麼要獲取jquery物件而不直接使用dom物件呢?因為jquery物件對dom物件的操作進行了很好的封裝,你可以方便的用jquery物件...

JQuery知識快覽之五 操作屬性和結構

前文提到jquery提供了豐富的內建方法來操作物件集,本文主要介紹jquery中的那些內建操作屬性和dom結構的方法。從jquery1.6版開始,新增了prop方法來獲取和設定jquery物件的屬性,這裡的prop方法和attr方法究竟有什麼區別呢?要弄懂這個問題,我們首先要區別property和a...

vue基礎知識點快覽

本文適合剛學會vue的初學者回憶知識點,小白可能有點不適。一 基礎指令 v text,v html,v show,v if,v else,v for item,index in items v on click v bind,v model 表單 v pre,v cloak,v once,v on等...