jQuery使用手冊之三 CSS操作

更新時間：2007年03月24日 00:00:00 作者：

傳統(tǒng)javascript對css的操作相當繁瑣，比如<div id="a" style="background:blue">css</div>取它的background語法是 document.getElementById("a").style.background，而jQuery對css更方便的操作，$("#a").background()，$("#a").background(“red”)
$("#a")得到jQuery對象[ <div id="a" … /div> ]
$("#a").background()將取出該對象的background樣式。
$("#a").background(“red”)將該對象的background樣式設為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是一個hash對象，用于設置大量的css樣式
$("#b").css({ color: "red", background: "blue" });
最終效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" }，hash對象，color為key，"red"為value，

css(key, value) 用于設置一個單獨得css樣式
$("#b").css("color","red");最終效果是<p id="b" style="color:red">test</p>

四：JavaScript處理

$.browser() 判斷瀏覽器類型，返回boolen值

$(function(){
    if($.browser.msie) {
        alert("這是一個IE瀏覽器");}
    else if($.browser.opera) {
        alert("這是一個opera瀏覽器");}
})

當頁面載入式判斷瀏覽器類型，可判斷的類型有msie、mozilla、opera、safari

$.each(obj, fn) obj為對象或數組，fn為在obj上依次執(zhí)行的函數，注意區(qū)分$().each()

$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });

分別將0，1，2為參數，傳入到function(i)中

$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );

{ name: "John", lang: "JS" }為一個hash對象，依次將hash中每組對象傳入到函數中

$.extend(obj, prop) 用第二個對象擴展第一個對象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

執(zhí)行后settings對象為{ validate: true, limit: 5, name: "bar" }
可以用下面函數來測試

$(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 ); });
})

$.grep(array,fn) 通過函數fn來過濾array，將array中的元素依次傳給fn，fn必須返回一個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后數組[0,1,2,3,4]變成[0，1]

$.merge(first, second) 兩個參數都是數組，排出第二個數組中與第一個相同的，再將兩個數組合并

$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})

可以看出arr的結果為[0,1,2,3,4]

$.trim(str) 移出字符串兩端的空格
    $.trim("   hello, how are you?   ")的結果是"hello, how are you?"

                                   五：動態(tài)效果

       在將這部分之前我們先看個例子，相信做網頁的朋友都遇到n級菜單的情景，但點擊某菜單按鈕時，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來，傳統(tǒng)的javascript做法是先用getElementById取出子菜單所在容器的id，在判斷該容器的style.display是否等于none，如果等于則設為block,如果不等于這設為none，如果在將效果設置復雜一點，當點擊按鈕時，不是忽然隱藏和顯示子菜單，而是高度平滑的轉變，這時就要通過setTimeout來設置子菜單的height了，再復雜一點透明度也平滑的消失和顯現(xiàn)，這時顯現(xiàn)下來需要編寫很多代碼，如果js基礎不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery實現(xiàn)上面效果只需要1句話就行，$("#a").toggle("slow"),,學完jQuery后還需要抄襲修改別人的代碼嗎？下面我們逐個介紹jQuery用于效果處理的方法。

hide() 隱藏匹配對象

<p id="a">Hello Again</p><a href="#" onClick=' ("#a").hide()'>jQuery</a>

當點擊連接時,id為a的對象的display變?yōu)閚one。

show() 顯示匹配對象

hide(speed) 以一定的速度隱藏匹配對象，其大?。ㄩL寬）和透明度都逐漸變化到0，speed有3級("slow", "normal", "fast")，也可以是自定義的速度。

show(speed) 以一定的速度顯示匹配對象，其大?。ㄩL寬）和透明度都由0逐漸變化到正常

hide(speed, callback) show(speed, callback) 當顯示和隱藏變化結束后執(zhí)行函數callback

toggle() toggle(speed) 如果當前匹配對象隱藏，則顯示他們，如果當前是顯示的，就隱藏，toggle(speed),其大小（長寬）和透明度都隨之逐漸變化。

<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds) fadeOut(speeds) 根據速度調整透明度來顯示或隱藏匹配對象，注意有別于hide(speed)和show(speed)，fadeIn和fadeOut都只調整透明度，不調整大小

<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>

點擊連接后可以看到圖片逐漸顯示。

fadeIn(speed, callback) fadeOut(speed, callback) callback為函數，先通過調整透明度來顯示或隱藏匹配對象，當調整結束后執(zhí)行callback函數

<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>

點擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框

fadeTo(speed, opacity, callback) 將匹配對象以speed速度調整倒透明度opacity，然后執(zhí)行函數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腳本可能很多代碼！

slideDown(speeds) 將匹配對象的高度由0以指定速率平滑的變化到正常！

<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

slideDown(speeds,callback) 將匹配對象的高度由0變化到正常！變化結束后執(zhí)行函數callback

slideUp("slow") slideUp(speed, callback) 匹配對象的高度由正常變化到0

slideToggle("slow") 如果匹配對象的高度正常則逐漸變化到0，若為0，則逐漸變化到正常

您可能感興趣的文章:

基于jQuery試卷自動排版系統(tǒng)
jQuery試卷自動排版系統(tǒng)，需要的朋友可以參考下。
2010-07-07
jquery使用$(element).is()來判斷獲取的tagName
這篇文章主要介紹了jquery使用$(element).is()來判斷獲取的tagName以及將取到標簽用作到別的地方,需要的朋友可以參考下
2014-08-08
jquery實現(xiàn)拖拽添加元素功能
這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖拽添加元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery內存泄露解決辦法
這篇文章主要為大家詳細介紹了jQuery內存泄露解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery實現(xiàn)菜單式圖片滑動切換
這篇文章主要介紹了jQuery實現(xiàn)菜單式圖片滑動切換效果，主要是依托于jQuery Lightbox插件來實現(xiàn)，非常炫酷，這里推薦給小伙伴們
2015-03-03
jquery 跨域訪問問題解決方法(筆記)
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認真去對待，可能查看過相關資料，但當著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強大的記憶力默哀一下。
2011-06-06
使用Jquery實現(xiàn)每日簽到功能
簽到功能現(xiàn)在算是社交化網站增加網站粘合度的一個普遍做法了，于是也想在自己的項目中添加一個，經過一番度娘，終于完成，這里分享給大家，有需要的小伙伴可以參考下。
2015-04-04
jQuery中empty()方法用法實例
這篇文章主要介紹了jQuery中empty()方法用法,以實例形式分析了empty()方法的功能、定義及將匹配元素中的所有內容移除的使用技巧,需要的朋友可以參考下
2015-01-01
基于JQuery 選擇器使用說明介紹
本篇文章小編為大家介紹，基于JQuery 選擇器使用說明介紹。需要的朋友參考下
2013-04-04
jQuery 實現(xiàn)圖片的依次加載圖片功能
本文分為css和js代碼兩部分給大家詳細介紹了jQuery 實現(xiàn)圖片的依次加載圖片功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-07-07