jQuery使用手冊(cè)之三 CSS操作
更新時(shí)間:2007年03月24日 00:00:00 作者:
傳統(tǒng)javascript對(duì)css的操作相當(dāng)繁瑣,比如<div id="a" style="background:blue">css</div>取它的background語法是 document.getElementById("a").style.background,而jQuery對(duì)css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到j(luò)Query對(duì)象[ <div id="a" … /div> ]
$("#a").background()將取出該對(duì)象的background樣式。
$("#a").background(“red”)將該對(duì)象的background樣式設(shè)為redjQuery提供了以下方法,來操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)
這里需要講解一下css(name) css(prop) css(key, value),其他的看名字都知道什么作用了!
css(name) 獲取樣式名為name的樣式
$("#a").css("color") 將得到樣式中color值red,("#a").css("background ")將得到blue
css(prop) prop是一個(gè)hash對(duì)象,用于設(shè)置大量的css樣式
$("#b").css({ color: "red", background: "blue" });
最終效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" },hash對(duì)象,color為key,"red"為value,
css(key, value) 用于設(shè)置一個(gè)單獨(dú)得css樣式
$("#b").css("color","red");最終效果是<p id="b" style="color:red">test</p>
四:JavaScript處理
$.browser() 判斷瀏覽器類型,返回boolen值
$.each(obj, fn) obj為對(duì)象或數(shù)組,fn為在obj上依次執(zhí)行的函數(shù),注意區(qū)分$().each()
$.extend(obj, prop) 用第二個(gè)對(duì)象擴(kuò)展第一個(gè)對(duì)象
可以用下面函數(shù)來測(cè)試
$.grep(array,fn) 通過函數(shù)fn來過濾array,將array中的元素依次傳給fn,fn必須返回一個(gè)boolen,如fn返回true,將被過濾
$.merge(first, second) 兩個(gè)參數(shù)都是數(shù)組,排出第二個(gè)數(shù)組中與第一個(gè)相同的,再將兩個(gè)數(shù)組合并
$.trim(str) 移出字符串兩端的空格
$.trim(" hello, how are you? ")的結(jié)果是"hello, how are you?"
五:動(dòng)態(tài)效果
在將這部分之前我們先看個(gè)例子,相信做網(wǎng)頁的朋友都遇到n級(jí)菜單的情景,但點(diǎn)擊某菜單按鈕時(shí),如果它的子菜單是顯示的,則隱藏子菜單,如果子菜單隱藏,則顯示出來,傳統(tǒng)的javascript做法是先用getElementById取出子菜單所在容器的id,在判斷該容器的style.display是否等于none,如果等于則設(shè)為block,如果不等于這設(shè)為none,如果在將效果設(shè)置復(fù)雜一點(diǎn),當(dāng)點(diǎn)擊按鈕時(shí),不是忽然隱藏和顯示子菜單,而是高度平滑的轉(zhuǎn)變,這時(shí)就要通過setTimeout來設(shè)置子菜單的height了,再復(fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn),這時(shí)顯現(xiàn)下來需要編寫很多代碼,如果js基礎(chǔ)不好的朋友可能只能從別人寫好的代碼拿過來修改了!jQuery實(shí)現(xiàn)上面效果只需要1句話就行,$("#a").toggle("slow"),,學(xué)完jQuery后還需要抄襲修改別人的代碼嗎?下面我們逐個(gè)介紹jQuery用于效果處理的方法。
hide() 隱藏匹配對(duì)象
show() 顯示匹配對(duì)象
hide(speed) 以一定的速度隱藏匹配對(duì)象,其大?。ㄩL寬)和透明度都逐漸變化到0,speed有3級(jí)("slow", "normal", "fast"),也可以是自定義的速度。
show(speed) 以一定的速度顯示匹配對(duì)象,其大?。ㄩL寬)和透明度都由0逐漸變化到正常
hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback
toggle() toggle(speed) 如果當(dāng)前匹配對(duì)象隱藏,則顯示他們,如果當(dāng)前是顯示的,就隱藏,toggle(speed),其大小(長寬)和透明度都隨之逐漸變化。
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對(duì)象,注意有別于hide(speed)和show(speed),fadeIn和fadeOut都只調(diào)整透明度,不調(diào)整大小
fadeIn(speed, callback) fadeOut(speed, callback) callback為函數(shù),先通過調(diào)整透明度來顯示或隱藏匹配對(duì)象,當(dāng)調(diào)整結(jié)束后執(zhí)行callback函數(shù)
fadeTo(speed, opacity, callback) 將匹配對(duì)象以speed速度調(diào)整倒透明度opacity,然后執(zhí)行函數(shù)callback。Opacity為最終顯示的透明度(0-1).
slideDown(speeds) 將匹配對(duì)象的高度由0以指定速率平滑的變化到正常!
slideDown(speeds,callback) 將匹配對(duì)象的高度由0變化到正常!變化結(jié)束后執(zhí)行函數(shù)callback
slideUp("slow") slideUp(speed, callback) 匹配對(duì)象的高度由正常變化到0
slideToggle("slow") 如果匹配對(duì)象的高度正常則逐漸變化到0,若為0,則逐漸變化到正常
$("#a")得到j(luò)Query對(duì)象[ <div id="a" … /div> ]
$("#a").background()將取出該對(duì)象的background樣式。
$("#a").background(“red”)將該對(duì)象的background樣式設(shè)為redjQuery提供了以下方法,來操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)
這里需要講解一下css(name) css(prop) css(key, value),其他的看名字都知道什么作用了!
<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
css(name) 獲取樣式名為name的樣式
$("#a").css("color") 將得到樣式中color值red,("#a").css("background ")將得到blue
css(prop) prop是一個(gè)hash對(duì)象,用于設(shè)置大量的css樣式
$("#b").css({ color: "red", background: "blue" });
最終效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" },hash對(duì)象,color為key,"red"為value,
css(key, value) 用于設(shè)置一個(gè)單獨(dú)得css樣式
$("#b").css("color","red");最終效果是<p id="b" style="color:red">test</p>
四:JavaScript處理
$.browser() 判斷瀏覽器類型,返回boolen值
$(function(){
if($.browser.msie) {
alert("這是一個(gè)IE瀏覽器");}
else if($.browser.opera) {
alert("這是一個(gè)opera瀏覽器");}
})
當(dāng)頁面載入式判斷瀏覽器類型,可判斷的類型有msie、mozilla、opera、safariif($.browser.msie) {
alert("這是一個(gè)IE瀏覽器");}
else if($.browser.opera) {
alert("這是一個(gè)opera瀏覽器");}
})
$.each(obj, fn) obj為對(duì)象或數(shù)組,fn為在obj上依次執(zhí)行的函數(shù),注意區(qū)分$().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
分別將0,1,2為參數(shù),傳入到function(i)中
$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );
{ name: "John", lang: "JS" }為一個(gè)hash對(duì)象,依次將hash中每組對(duì)象傳入到函數(shù)中$.extend(obj, prop) 用第二個(gè)對(duì)象擴(kuò)展第一個(gè)對(duì)象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
執(zhí)行后settings對(duì)象為{ validate: true, limit: 5, name: "bar" }var options = { validate: true, name: "bar" };
$.extend(settings, options);
可以用下面函數(shù)來測(cè)試
$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})
$.grep(array,fn) 通過函數(shù)fn來過濾array,將array中的元素依次傳給fn,fn必須返回一個(gè)boolen,如fn返回true,將被過濾
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
我們可以看待執(zhí)行$.grep后數(shù)組[0,1,2,3,4]變成[0,1]var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
$.merge(first, second) 兩個(gè)參數(shù)都是數(shù)組,排出第二個(gè)數(shù)組中與第一個(gè)相同的,再將兩個(gè)數(shù)組合并
$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
可以看出arr的結(jié)果為[0,1,2,3,4]var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
$.trim(str) 移出字符串兩端的空格
$.trim(" hello, how are you? ")的結(jié)果是"hello, how are you?"
五:動(dòng)態(tài)效果
在將這部分之前我們先看個(gè)例子,相信做網(wǎng)頁的朋友都遇到n級(jí)菜單的情景,但點(diǎn)擊某菜單按鈕時(shí),如果它的子菜單是顯示的,則隱藏子菜單,如果子菜單隱藏,則顯示出來,傳統(tǒng)的javascript做法是先用getElementById取出子菜單所在容器的id,在判斷該容器的style.display是否等于none,如果等于則設(shè)為block,如果不等于這設(shè)為none,如果在將效果設(shè)置復(fù)雜一點(diǎn),當(dāng)點(diǎn)擊按鈕時(shí),不是忽然隱藏和顯示子菜單,而是高度平滑的轉(zhuǎn)變,這時(shí)就要通過setTimeout來設(shè)置子菜單的height了,再復(fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn),這時(shí)顯現(xiàn)下來需要編寫很多代碼,如果js基礎(chǔ)不好的朋友可能只能從別人寫好的代碼拿過來修改了!jQuery實(shí)現(xiàn)上面效果只需要1句話就行,$("#a").toggle("slow"),,學(xué)完jQuery后還需要抄襲修改別人的代碼嗎?下面我們逐個(gè)介紹jQuery用于效果處理的方法。
hide() 隱藏匹配對(duì)象
<p id="a">Hello Again</p><a href="#" onClick=' ("#a").hide()'>jQuery</a>
當(dāng)點(diǎn)擊連接時(shí),id為a的對(duì)象的display變?yōu)閚one。show() 顯示匹配對(duì)象
hide(speed) 以一定的速度隱藏匹配對(duì)象,其大?。ㄩL寬)和透明度都逐漸變化到0,speed有3級(jí)("slow", "normal", "fast"),也可以是自定義的速度。
show(speed) 以一定的速度顯示匹配對(duì)象,其大?。ㄩL寬)和透明度都由0逐漸變化到正常
hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback
toggle() toggle(speed) 如果當(dāng)前匹配對(duì)象隱藏,則顯示他們,如果當(dāng)前是顯示的,就隱藏,toggle(speed),其大小(長寬)和透明度都隨之逐漸變化。


fadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對(duì)象,注意有別于hide(speed)和show(speed),fadeIn和fadeOut都只調(diào)整透明度,不調(diào)整大小
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
點(diǎn)擊連接后可以看到圖片逐漸顯示。fadeIn(speed, callback) fadeOut(speed, callback) callback為函數(shù),先通過調(diào)整透明度來顯示或隱藏匹配對(duì)象,當(dāng)調(diào)整結(jié)束后執(zhí)行callback函數(shù)
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
點(diǎn)擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對(duì)話框<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
fadeTo(speed, opacity, callback) 將匹配對(duì)象以speed速度調(diào)整倒透明度opacity,然后執(zhí)行函數(shù)callback。Opacity為最終顯示的透明度(0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
大家可以看一下自己看看效果,如果不用jQuery,編寫原始javascript腳本可能很多代碼!<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
slideDown(speeds) 將匹配對(duì)象的高度由0以指定速率平滑的變化到正常!
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
slideDown(speeds,callback) 將匹配對(duì)象的高度由0變化到正常!變化結(jié)束后執(zhí)行函數(shù)callback
slideUp("slow") slideUp(speed, callback) 匹配對(duì)象的高度由正常變化到0
slideToggle("slow") 如果匹配對(duì)象的高度正常則逐漸變化到0,若為0,則逐漸變化到正常
相關(guān)文章
jQuery的三種bind/One/Live/On事件綁定使用方法
jQuery是 一款優(yōu)秀的JavaScript框架,在舊版里主要用bind()方法,在新版里又多了兩種One(),Live(),下面介紹這幾種方法的使用2017-02-02Treegrid的動(dòng)態(tài)加載實(shí)例代碼
這篇文章主要介紹了Treegrid的動(dòng)態(tài)加載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04jQuery+json實(shí)現(xiàn)的簡易Ajax調(diào)用實(shí)例
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)的簡易Ajax調(diào)用,結(jié)合實(shí)例形式分析了jQuery基于ajax實(shí)現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下2015-12-12從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對(duì)其進(jìn)行操作. 本章首先講解如何動(dòng)態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯(cuò)誤的解決方法
這篇文章主要介紹了jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯(cuò)誤的解決方法的相關(guān)資料,需要的朋友可以參考下2016-11-11利用jqprint插件打印頁面內(nèi)容的實(shí)現(xiàn)方法
qprint是一個(gè)基于jquery編寫的頁面打印的一個(gè)小插件,但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害,下面這篇文章主要給大家介紹了關(guān)于利用jqprint插件如何打印頁面內(nèi)容的實(shí)現(xiàn)方法,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01jquery使用append(content)方法注意事項(xiàng)分享
append(content)函數(shù)的功能向每個(gè)匹配的元素內(nèi)部追加內(nèi)容,在使用方法上需要引起大家的注意,詳細(xì)看下面示例2014-01-01