前面我們獲取了物件集,本文介紹怎麼控制物件集的樣式
在乙個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等...