StevenBot-Saltsam

          眼睛能裝下世界,為何卻裝不下眼淚? 一只風(fēng)箏一輩子只為一根線冒險(xiǎn)。 那不是一場游戲,為何總有一根線牽著心懷,隱隱作疼? 那不是一段邂逅,為何飄在橋上的影子,總纏進(jìn)夢鄉(xiāng)? 那不是一個(gè)夢境,為何你的溫柔私語,總是不經(jīng)意的響起?

          導(dǎo)航

          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          統(tǒng)計(jì)

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          datas link

          OSChinal Sources codes Library

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          jQuery使用手冊

          官方網(wǎng)站:http://jquery.com

              jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類,特別是對css和XPath的支持,使我們寫js變得更加方便!如果你不是個(gè)js高手又想寫出優(yōu) 秀的js效果,jQuery可以幫你達(dá)到目的!
             下載地址:Starterkit (
          http://jquery.bassistance.de/jquery-starterkit.zip
                                 jQuery Downloads (
          http://jquery.com/src/

             下載完成后先加載到文檔中,然后我們來看個(gè)簡單的例子!

          <script language="javascript" type="text/javascript">   
              $(document).ready(
          function(){
                  $(
          "a").click(function() {
                  alert(
          "Hello world!");
             });
          });
          <script>

               上邊的效果是點(diǎn)擊文檔中所有a標(biāo)簽時(shí)將彈出對話框,$("a") 是一個(gè)jQuery選擇器,$本身表示一個(gè)jQuery類,所有$()是構(gòu)造一個(gè)jQuery對象,click()是這個(gè)對象的方法,同理$(document)也是一個(gè)jQuery對象,ready(fn)是$(document)的方法,表示當(dāng)document全部下載完畢時(shí)執(zhí)行函數(shù)。
               在進(jìn)行下面內(nèi)容之前我還要說明一點(diǎn)$("p")和$("#p")的區(qū)別,$("p")表示取所有p標(biāo)簽(<p></p>)的元素,$("#p")表示取id為"p"(<span  id="p"></span>)的元素.

          我將從以下幾個(gè)內(nèi)容來講解jQuery的使用:
          1:核心部分
          2:DOM操作
          3:css操作
          4:javascript處理
          5:動(dòng)態(tài)效果
          6:event事件 
          7:ajax支持 
          8:插件程序

                                                       一:核心部分
          $(expr)
          說明:該函數(shù)可以通過css選擇器,Xpath或html代碼來匹配目標(biāo)元素,所有的jQuery操作都以此為基礎(chǔ)
          參數(shù):expr:字符串,一個(gè)查詢表達(dá)式或一段html字符串
          例子:
          未執(zhí)行jQuery前:

          <p>one</p>
          <div>
                
          <p>two</p>
          </div>
              <
          p>three</p> 
              <href="#" id="test" onClick="jq()" >jQuery</a>

          jQuery代碼及功能:
          function jq(){  
              alert($(
          "div > p").html());  
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),彈出對話框文字為two,即div標(biāo)簽下p元素的內(nèi)容
          function jq(){
              $(
          "<div><p>Hello</p></div>").appendTo("body");
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),向body中添加“<div><p>Hello</p></div>”

          $(elem)
          說明:限制jQuery作用于一個(gè)特定的dom元素,這個(gè)函數(shù)也接受xml文檔和windows對象
          參數(shù): elem:通過jQuery對象壓縮的DOM元素
          例子:
          未執(zhí)行jQuery前:
          <p>one</p>
            
          <div>
               
          <p>two</p>
            
          </div><p>three</p>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              alert($(document).find(
          "div > p").html());
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),彈出對話框文字為two,即div標(biāo)簽下p元素的內(nèi)容
          function jq(){
             $(document.body).background(
          "black");
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),背景色變成黑色

          $(elems)
          說明:限制jQuery作用于一組特定的DOM元素
          參數(shù): elem:一組通過jQuery對象壓縮的DOM元素
          例子:
          未執(zhí)行jQuery前:
          <form id="form1">
                
          <input type="text" name="textfield">
                
          <input type="submit" name="Submit" value="提交">
          </form>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){ 
             $(form1.elements ).hide(); 
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),隱藏form1表單中的所有元素。

          $(fn)
          說明:$(document).ready()的一個(gè)速記方式,當(dāng)文檔全部載入時(shí)執(zhí)行函數(shù)。可以有多個(gè)$(fn)當(dāng)文檔載入時(shí),同時(shí)執(zhí)行所有函數(shù)!
          參數(shù):fn (Function):當(dāng)文檔載入時(shí)執(zhí)行的函數(shù)!
          例子:
          $( function(){
              $(document.body).background(
          "black");
          })
          運(yùn)行:當(dāng)文檔載入時(shí)背景變成黑色,相當(dāng)于onLoad。

          $(obj)
          說明:復(fù)制一個(gè)jQuery對象,
          參數(shù):obj (jQuery): 要復(fù)制的jQuery對象
          例子:
          未執(zhí)行jQuery前:
          <p>one</p>
          <div>
             
          <p>two</p>
          </div>
          <p>three</p>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              
          var f = $("div"); 
              alert($(f).find(
          "p").html()) 
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),彈出對話框文字為two,即div標(biāo)簽下p元素的內(nèi)容。

          each(fn)
          說明:將函數(shù)作用于所有匹配的對象上
          參數(shù):fn (Function): 需要執(zhí)行的函數(shù)
          例子:
          未執(zhí)行jQuery前:
          <img src="1.jpg"/>
          <img src="1.jpg"/>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
             $(
          "img").each(function(){ 
                  
          this.src = "2.jpg"; });
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),img標(biāo)簽的src都變成了2.jpg。

          eq(pos)
          說明:減少匹配對象到一個(gè)單獨(dú)得dom元素
          參數(shù):pos (Number): 期望限制的索引,從0 開始
          例子:
          未執(zhí)行jQuery前:
          <p>This is just a test.</p>
          <p>So is this</p>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "p").eq(1).html())
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),alert對話框顯示:So is this,即第二個(gè)<p>標(biāo)簽的內(nèi)容

          get() get(num)
          說明:獲取匹配元素,get(num)返回匹配元素中的某一個(gè)元素
          參數(shù):get (Number): 期望限制的索引,從0 開始
          例子:
          未執(zhí)行jQuery前:
          <p>This is just a test.</p>
          <p>So is this</p>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "p").get(1).innerHTML);
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),alert對話框顯示:So is this,即第二個(gè)<p>標(biāo)簽的內(nèi)容
          注意get和eq的區(qū)別,eq返回的是jQuery對象,get返回的是所匹配的dom對象,所有取$("p").eq(1)對象的內(nèi)容用jQuery方法html(),而取$("p").get(1)的內(nèi)容用innerHTML

          index(obj)
          說明:返回對象索引
          參數(shù):obj (Object): 要查找的對象
          例子:
          未執(zhí)行jQuery前:
          <div id="test1"></div>
          <div id="test2"></div>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "div").index(document.getElementById('test1')));
              alert($(
          "div").index(document.getElementById('test2')));
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),兩次彈出alert對話框分別顯示0,1

          size()   Length
          說明:當(dāng)前匹配對象的數(shù)量,兩者等價(jià)
          例子:
          未執(zhí)行jQuery前:
          <img src="test1.jpg"/>
          <img src="test2.jpg"/>
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "img").length);
          }
          運(yùn)行:當(dāng)點(diǎn)擊id為test的元素時(shí),彈出alert對話框顯示2,表示找到兩個(gè)匹配對象
           


                                                             二:DOM操作
          屬性
          我們以<img id="a" scr="5.jpg"/>為例,在原始的javascript里面可以用var o=document.getElementById('a')取的id為a的節(jié)點(diǎn)對象,在用o.src來取得或修改該節(jié)點(diǎn)的scr屬性,在jQuery里$("#a")將得到j(luò)Query對象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多方法來進(jìn)行操作,如$("#a").scr()將得到5.jpg,$("#a").scr("1.jpg")將該對象src屬性改為1,jpg。下面我們來講jQuery提供的眾多jQuery方法,方便大家快速對DOM對象進(jìn)行操作
          herf()   herf(val)
          說明:對jQuery對象屬性herf的操作。
          例子:
          未執(zhí)行jQuery前
          <href="1.htm" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
             alert($(
          "#test").href());
             $(
          "#test").href("2.html");
          }
          運(yùn)行:先彈出對話框顯示id為test的連接url,在將其url改為2.html,當(dāng)彈出對話框后會看到轉(zhuǎn)向到2.html
          同理,jQuery還提供類似的其他方法,大家可以分別試驗(yàn)一下:
          herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name (val)   rel()  rel (val)
          src()    src (val)   title()  title (val)   val()  val(val)

          操作
          after(html)  在匹配元素后插入一段html
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){  
                 $(
          "#test").after("<b>Hello</b>");  
          }
          執(zhí)行后相當(dāng)于:
          <href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

          after(elem)  after(elems)  將指定對象elem或?qū)ο蠼Melems插入到在匹配元素后
          <id="test">after</p><href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能
          function jq(){  
               $(
          "a").after($("#test"));  
          }
          執(zhí)行后相當(dāng)于
          <href="#" onClick="jq()">jQuery</a><id="test">after</p>

          append(html)在匹配元素內(nèi)部,且末尾插入指定html
          <href="#" id="test" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){ 
               $("#test").append("
          <b>Hello</b>");  
          }
          執(zhí)行后相當(dāng)于
          <href="#" onClick="jq()">jQuery<b>Hello</b></a>
          同理還有append(elem)  append(elems) before(html) before(elem) before(elems)請執(zhí)行參照append和after的方來測試、理解!

          appendTo(expr)  與append(elem)相反
          <id="test">after</p><href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能
          function jq(){  
                $(
          "a"). appendTo ($("#test"));  
          }
          執(zhí)行后相當(dāng)于
          <id="test">after<href="#" onClick="jq()">jQuery</a> </p>

          clone() 復(fù)制一個(gè)jQuery對象
          <id="test">after</p><href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){  
               $(
          "#test").clone().appendTo($("a"));  
          }
          復(fù)制$("#test")然后插入到<a>后,執(zhí)行后相當(dāng)于
          <id="test">after</p><href="#" onClick="jq()">jQuery</a><id="test">after</p>

          empty() 刪除匹配對象的所有子節(jié)點(diǎn)
          <div id="test">
            
          <span>span</span>
            
          <p>after</p>
          </div>
          <href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){  
              $(
          "#test").empty();  
          }
          執(zhí)行后相當(dāng)于
          <div id="test"></div><href="#" onClick="jq()">jQuery</a>

          insertAfter(expr)   insertBefore(expr)
               按照官方的解釋和我的幾個(gè)簡單測試insertAfter(expr)相當(dāng)于before(elem),insertBefore(expr)相當(dāng)于after (elem)

          prepend (html)  prepend (elem)  prepend (elems)   在匹配元素的內(nèi)部且開始出插入
          通過下面例子區(qū)分append(elem)  appendTo(expr)  prepend (elem)
          <id="a">p</p>
          <div>div</div>
          執(zhí)行$("#a").append($("div")) 后相當(dāng)于
          <id="a">
            P
            
          <div>div</div>
          </p>
          執(zhí)行$("#a").appendTo($("div")) 后 相當(dāng)于
          <div>
             div
             
          <id="a">p</p>
          </div>
          執(zhí)行$("#a").prepend ($("div")) 后 相當(dāng)于
          <id="a">
             
          <div>div</div>
             P
          </p>

          remove()  刪除匹配對象
          注意區(qū)分empty(),empty()移出匹配對象的子節(jié)點(diǎn),remove(),移出匹配對象

          wrap(htm) 將匹配對象包含在給出的html代碼內(nèi)
          <p>Test Paragraph.</p> <href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){  
                $(
          "p").wrap("<div class='wrap'></div>"); 
          }
          執(zhí)行后相當(dāng)于
          <div class='wrap'><p>Test Paragraph.</p></div>

          wrap(elem) 將匹配對象包含在給出的對象內(nèi)
          <p>Test Paragraph.</p><div id="content"></div>
          <href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){  
                $(
          "p").wrap( document.getElementById('content') );
          }
          執(zhí)行后相當(dāng)于
          <div id="content"><p>Test Paragraph.</p></div>

          遍歷、組合
          add(expr)  在原對象的基礎(chǔ)上在附加符合指定表達(dá)式的jquery對象
          <p>Hello</p><p><span>Hello Again</span></p>
          <href="#" onClick="jq()">jQuery</a>
          jQuery代碼及功能:
          function jq(){
               
          var f=$("p").add("span");    
               
          for(var i=0;i < $(f).size();i++){
               alert($(f).eq(i).html());}
          }
          執(zhí)行$("p")得到匹配<p>的對象,有兩個(gè),add("span")是在("p")的基礎(chǔ)上加上匹配<span >的對象,所有一共有3個(gè),從上面的函數(shù)運(yùn)行結(jié)果可以看到$("p").add("span")是3個(gè)對象的集合,分別是[<p>Hello</p>],[<p><span>Hello Again</span></p>],[<span>Hello Again</span>]。

          add(el)  在匹配對象的基礎(chǔ)上在附加指定的dom元素。
                  $("p").add(document.getElementById("a"));

          add(els)  在匹配對象的基礎(chǔ)上在附加指定的一組對象,els是一個(gè)數(shù)組
          <p>Hello</p><p><span>Hello Again</span></p>
          jQuery代碼及功能:
          function jq(){
               
          var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
               
          for(var i=0;i < $(f).size();i++){
                       alert($(f).eq(i).html());}
          }
          注意els是一個(gè)數(shù)組,這里的[ ]不能漏掉。

          ancestors ()  一依次以匹配結(jié)點(diǎn)的父節(jié)點(diǎn)的內(nèi)容為對象,根節(jié)點(diǎn)除外(有點(diǎn)不好理解,看看下面例子就明白了)
          <div>
              
          <p>one</p>
              
          <span>
              
          <u>two</u>
              
          </span>
          </div>
          jQuery代碼及功能:
          function jq(){
               
          var f= $("u").ancestors();
               
          for(var i=0;i < $(f).size();i++){
                alert($(f).eq(i).html());}
          }
          第一個(gè)對象是以<u>的父節(jié)點(diǎn)的內(nèi)容為對象,[ <u>two</u> ]
          第一個(gè)對象是以<u>的父節(jié)點(diǎn)的父節(jié)點(diǎn)(div)的內(nèi)容為對象,[<p>one</p><span><u>two</u></span> ]
          一般一個(gè)文檔還有<body>和<html>,依次類推下去。

          ancestors (expr)  在ancestors()的基礎(chǔ)上之取符合表達(dá)式的對象
          如上各例子講var f改為var f= $("u").ancestors(“div”),則只返回一個(gè)對象:
          [ <p>one</p><span><u>two</u></span>  ]

          children()  返回匹配對象的子介點(diǎn)
          <p>one</p>
          <div id="ch">   
               
          <span>two</span>
          </div>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "#ch").children().html());
          }
          $("#ch").children()得到對象[ <span>two</span> ].所以.html()的結(jié)果是”two”

          children(expr)  返回匹配對象的子介點(diǎn)中符合表達(dá)式的節(jié)點(diǎn)
          <div id="ch">   
                
          <span>two</span>
                
          <span id="sp">three</span>
          </div>
          jQuery代碼及功能
          function jq(){
              alert($(
          "#ch").children(“#sp”).html());
          }
          $("#ch").children()得到對象[<span>two</span><span id="sp">three</span> ].
          $("#ch").children(“#sp”)過濾得到[<span id="sp">three</span> ]

          parent ()  parent (expr)取匹配對象父節(jié)點(diǎn)的。參照children幫助理解

          contains(str)  返回匹配對象中包含字符串str的對象
          <p>This is just a test.</p><p>So is this</p>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "p").contains("test").html());
          }
          $("p")得到兩個(gè)對象,而包含字符串”test”只有一個(gè)。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]

          end() 結(jié)束操作,返回到匹配元素清單上操作前的狀態(tài).

          filter(expr)   filter(exprs)   過濾現(xiàn)實(shí)匹配符合表達(dá)式的對象 exprs為數(shù)組,注意添加“[ ]”
          <p>Hello</p><p>Hello Again</p><class="selected">And Again</p>
          jQuery代碼及功能:
          function jq(){
              alert($(
          "p").filter(".selected").html())
          }
          $("p")得到三個(gè)對象,$("p").contains("test")只返回class為selected的對象。

          find(expr)  在匹配的對象中繼續(xù)查找符合表達(dá)式的對象
          <p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
          Query代碼及功能:
          function jq(){
              alert($(
          "p").find("#a").html())
          }
          在$("p")對象中查找id為a的對象。

          is(expr)  判斷對象是否符合表達(dá)式,返回boolen值
          <p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
          Query代碼及功能:
          function jq(){
              alert($(
          "#a").is("p"));
          }
          在$("#a ")是否符合jquery表達(dá)式。
          大家可以用$("#a").is("div");  ("#a").is("#a")多來測試一下

          next()  next(expr)  返回匹配對象剩余的兄弟節(jié)點(diǎn)
          <p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
          jQuery代碼及功能
          function jq(){
                  alert($(
          "p").next().html());
                  alert($(
          "p").next(".selected").html());
          }
          $("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]兩個(gè)對象
          $("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一個(gè)對象

          prev ()  prev (expr)  參照next理解

          not(el)  not(expr)  從jQuery對象中移出匹配的對象,el為dom元素,expr為jQuery表達(dá)式。
          <p>one</p><id="a">two</p>
          <href="#" onclick="js()">jQuery</a>
          jQuery代碼及功能:
          function js(){
               alert($(
          "p").not(document.getElementById("a")).html());
               alert($(
          "p").not(“#a”).html());
          }
          $("p")由兩個(gè)對象,排除后的對象為[<p>one</p> ]

          siblings ()  siblings (expr)  jquery匹配對象中其它兄弟級別的對象
          <p>one</p>
          <div>
            
          <id="a">two</p>
          </div>
          <href="#" onclick="js()">jQuery</a>
          jQuery代碼及功能:
          function js(){
                 alert($(
          "div").siblings().eq(1).html());
          }
          $("div").siblings()的結(jié)果實(shí)返回兩個(gè)對象[<p>one</p>,<a href="#" onclick="js()">jQuery</a> ]
          alert($("div").siblings(“a”)返回一個(gè)對象[<a href="#" onclick="js()">jQuery</a> ]

          其他
          addClass(class)   為匹配對象添加一個(gè)class樣式
          removeClass (class)   將第一個(gè)匹配對象的某個(gè)class樣式移出

          attr (name)   獲取第一個(gè)匹配對象的屬性
          <img src="test.jpg"/><href="#" onclick="js()">jQuery</a> 
          jQuery代碼及功能:
          function js(){
               alert($(
          "img").attr("src"));
          }
          返回test.jpg

          attr (prop)   為第一個(gè)匹配對象的設(shè)置屬性,prop為hash對象,用于為某對象批量添加眾多屬性
          <img/><href="#" onclick="js()">jQuery</a>
          jQuery代碼及功能:
          function js(){
               $(
          "img").attr({ src: "test.jpg", alt: "Test Image" }); 
          }
          運(yùn)行結(jié)果相當(dāng)于<img src="test.jpg" alt="Test Image"/>

          attr (key,value)   為第一個(gè)匹配對象的設(shè)置屬性,key為屬性名,value為屬性值
          <img/><a href="#" onclick="js()">jQuery</a>
          jQuery代碼及功能
          function js(){
               $(
          "img").attr(“src”,”test.jpg”); 
          }
          運(yùn)行結(jié)果相當(dāng)于<img src="test.jpg"/>

          removeAttr (name)   將第一個(gè)匹配對象的某個(gè)屬性移出
          <img alt="test"/><href="#" onclick="js()">jQuery</a>
          jQuery代碼及功能:
          function js(){
               $(
          "img"). removeAttr("alt"); 
          }
          運(yùn)行結(jié)果相當(dāng)于<img />

          toggleClass (class)   將當(dāng)前對象添加一個(gè)樣式,不是當(dāng)前對象則移出此樣式,返回的是處理后的對象
          <p>Hello</p><class="selected">Hello Again</p><href="#" onclick="js()">jQuery</a>
          $("p")的結(jié)果是返回對象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
          $("p").toggleClass("selected")的結(jié)果是實(shí)返回對象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]
           

                   :CSS操作

                傳統(tǒng)javascript對css的操作相當(dāng)繁瑣,比如<div id="a" style="background:blue">css</div>取它的background語法是 document.getElementById("a").style.background,而jQuery對css更方便的操作,$("#a").background(),$("#a").background(“red”)
          $("#a")得到j(luò)Query對象[ <div id="a" … /div> ]
          $("#a").background()將取出該對象的background樣式。
          $("#a").background(“red”)將該對象的background樣式設(shè)為red
          jQuery提供了以下方法,來操作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><id="b">test</P>

          css(name)  獲取樣式名為name的樣式 
          $("#a").css("color") 將得到樣式中color值red,("#a").css("background ")將得到blue

          css(prop)  prop是一個(gè)hash對象,用于設(shè)置大量的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)  用于設(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、safari

          $.each(obj, fn)  obj為對象或數(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對象,依次將hash中每組對象傳入到函數(shù)中

          $.extend(obj, prop)  用第二個(gè)對象擴(kuò)展第一個(gè)對象
          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" }
          可以用下面函數(shù)來測試
          $(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)  通過函數(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]

          $.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]

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



                                             :動(dòng)態(tài)效果

                 在將這部分之前我們先看個(gè)例子,相信做網(wǎng)頁的朋友都遇到n級菜單的情景,但點(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()  隱藏匹配對象
          <id="a">Hello Again</p><href="#" onClick=’ ("#a").hide()’>jQuery</a>
          當(dāng)點(diǎn)擊連接時(shí),id為a的對象的display變?yōu)閚one。

          show() 顯示匹配對象

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

          show(speed)  以一定的速度顯示匹配對象,其大小(長寬)和透明度都由0逐漸變化到正常

          hide(speed, callback)  show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback

          toggle()    toggle(speed) 如果當(dāng)前匹配對象隱藏,則顯示他們,如果當(dāng)前是顯示的,就隱藏,toggle(speed),其大小(長寬)和透明度都隨之逐漸變化。
          <img src="1.jpg" style="width:150px"/>
          <href="#" onClick='$("img").toggle("slow")'>jQuery</a>

          fadeIn(speeds)   fadeOut(speeds)  根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對象,注意有別于hide(speed)和show(speed),fadeIn和fadeOut都只調(diào)整透明度,不調(diào)整大小
          <img src="1.jpg" style="display:none"/><href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
          點(diǎn)擊連接后可以看到圖片逐漸顯示。

          fadeIn(speed, callback)  fadeOut(speed, callback)   callback為函數(shù),先通過調(diào)整透明度來顯示或隱藏匹配對象,當(dāng)調(diào)整結(jié)束后執(zhí)行callback函數(shù)
          <img src="1.jpg"/>
          <href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
          點(diǎn)擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框

          fadeTo(speed, opacity, callback)  將匹配對象以speed速度調(diào)整倒透明度opacity,然后執(zhí)行函數(shù)callback。Opacity為最終顯示的透明度(0-1).
          <img src="1.jpg"/><br>
          <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"/>
          <href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

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

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

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


           :事件處理

           hover(Function, Function)    當(dāng)鼠標(biāo)move over時(shí)觸發(fā)第一個(gè)function,當(dāng)鼠標(biāo)move out時(shí)觸發(fā)第二個(gè)function
          樣式:<style>.red{color:#FF0000}</style>
          Html代碼: <div id="a">sdf</div>
          jQuery代碼及效果
          $(function(){
            $(
          "#a").hover(function(){$(this).addClass("red");},
                                      
          function(){ $(this).removeClass("red"); 
                                    });
          })
          最終效果是當(dāng)鼠標(biāo)移到id為a的層上時(shí)圖層增加一個(gè)red樣式,離開層時(shí)移出red樣式

          toggle(Function, Function)    當(dāng)匹配元素第一次被點(diǎn)擊時(shí)觸發(fā)第一個(gè)函數(shù),當(dāng)?shù)诙伪稽c(diǎn)擊時(shí)觸發(fā)第二個(gè)函數(shù)
          樣式:<style>.red{color:#FF0000}</style>
          Html代碼: <div id="a">sdf</div>
          jQuery代碼及效果
          $(function(){
            $(
          "#a"). toggle (function(){$(this).addClass("red");},
                                        
          function(){ $(this).removeClass("red"); 
                                      });
          })
          最終效果是當(dāng)鼠標(biāo)點(diǎn)擊id為a的層上時(shí)圖層增加一個(gè)red樣式,離開層時(shí)移出red樣式

          bind(type, fn)   用戶將一個(gè)事件和觸發(fā)事件的方式綁定到匹配對象上。
          trigger(type)   用戶觸發(fā)type形式的事件。$("p").trigger("click")
          還有:unbind()   unbind(type)    unbind(type, fn)

          Dynamic event(Function)    綁定和取消綁定提供函數(shù)的簡捷方式
          例:
          $("#a").bind("click",function() { 
                                                 $(
          this).addClass("red");
          })
          也可以這樣寫:
          $("#a").click(function() { 
                                  $(
          this).addClass("red");
          });

          最終效果是當(dāng)鼠標(biāo)點(diǎn)擊id為a的層上時(shí)圖層增加一個(gè)red樣式,

          jQuery提供的函數(shù) 
          用于browers事件
          error(fn)    load(fn)     unload(fn)    resize(fn)    scroll(fn)

          用于form事件
          change(fn)    select(fn)    submit(fn)

          用于keyboard事件
          keydown(fn)    keypress(fn)    keyup(fn)

          用于mouse事件
          click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
          mouseout(fn)  mouseover(fn)     mouseup(fn)

          用于UI事件
          blur(fn)    focus(fn)


          以上事件的擴(kuò)展再擴(kuò)展為5類
          舉例,click(fn) 擴(kuò)展 click()  unclick()  oneclick(fn)  unclick(fn)
          click(fn):增加一個(gè)點(diǎn)擊時(shí)觸發(fā)某函數(shù)的事件
          click():可以在其他事件中執(zhí)行匹配對象的click事件。
          unclick ():不執(zhí)行匹配對象的click事件。
          oneclick(fn):只增加可以執(zhí)行一次的click事件。
          unclick (fn):增加一個(gè)點(diǎn)擊時(shí)不觸發(fā)某函數(shù)的事件。
          上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴(kuò)展。


                                                 :Ajax支持

           通用方式:
          $.ajax(prop)    通過一個(gè)ajax請求,回去遠(yuǎn)程數(shù)據(jù),prop是一個(gè)hash表,它可以傳遞的key/value有以下幾種
                   (String)type:數(shù)據(jù)傳遞方式(get或post)。
                   ((String)url:數(shù)據(jù)請求頁面的url
                   ((String)data:傳遞數(shù)據(jù)的參數(shù)字符串,只適合post方式
                   ((String)dataType:期待數(shù)據(jù)返回的數(shù)據(jù)格式(例如 "xml", "html", "script",或 "json")
                   ((Boolean)ifModified: 當(dāng)最后一次請求的相應(yīng)有變化是才成功返回,默認(rèn)值是false
                   ((Number)timeout:設(shè)置時(shí)間延遲請求的時(shí)間。可以參考$.ajaxTimeout
                   ((Boolean)global:是否為當(dāng)前請求觸發(fā)ajax全局事件,默認(rèn)為true
                   ((Function)error:當(dāng)請求失敗時(shí)觸發(fā)的函數(shù)。
                   ((Function)success:當(dāng)請求成功時(shí)觸發(fā)函數(shù)
                   ((Function)complete:當(dāng)請求完成后出發(fā)函數(shù)
          jQuery代碼及說明

          $.ajax({url: "ajax.htm",
                    success:
          function(msg){ 
                                   $(div
          "#a").html(msg);
                          } 
              });
          將ajax.htm返回的內(nèi)容作為id為a的div內(nèi)容
          $.ajax({ url: "ajax.aspx",
                        type:
          "get",           
                       dataType:
          "html",
                       data: 
          "name=John&location=Boston",
                       success:
          function(msg){ 
                                           $(
          "#a").html(msg);
                                        } 
                   });

          用get方式向ajax.aspx頁面?zhèn)鲄?shù),并將返回內(nèi)容負(fù)給id為a的對象。

          $.ajaxTimeout(time) 設(shè)置請求結(jié)束時(shí)間
             $.ajaxTimeout( 5000 )

          其它簡化方式:

          $.get(url, params, callback)  用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù),請求完成后處理函數(shù),除了url外,其它參數(shù)任意選擇

          $.get( "ajax.htm" , function(data){ $("#a").html(data)  })
          $.get(   "ajax.asp"
                      { name: 
          "young", age: "25" },
                      function(data){ alert("Data Loaded: " + data); }
                  ) 
          $.getIfModified(url, params, callback)  用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù),從最后一次請求后如果數(shù)據(jù)有變化才作出響應(yīng),執(zhí)行函數(shù)callback
          $.getJSON(url, params, callback)  用get方式向遠(yuǎn)程json對象傳遞參數(shù),請求完成后處理函數(shù)callback。
          $.getScript(url, callback)  用get方式載入并運(yùn)行一個(gè)遠(yuǎn)程javascript文件。請求完成后處理函數(shù)callback。
          $.post(url, params, callback)  用post方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù),請求完成后處理函數(shù)callback
          load(url, params, callback)  載入一個(gè)遠(yuǎn)程文件并載入頁面DOM中,并執(zhí)行函數(shù)callback
          $("#a").load("ajax.htm"function() { alert("load is done"); } );
          向ajax.htm頁面發(fā)出請求,將返回結(jié)果裝入id為a的內(nèi)容中,然后再執(zhí)行函數(shù)callback。
          loadIfModified(url, params, callback)  用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù),從最后一次請求后如果數(shù)據(jù)有變化才作出響應(yīng),將返回結(jié)果載入頁面DOM中,并執(zhí)行函數(shù)callback
          ajaxStart(callback) 當(dāng)ajax請求發(fā)生錯(cuò)誤是時(shí)執(zhí)行函數(shù)callback
          ajaxComplete(callback)  當(dāng)ajax請求完成時(shí)執(zhí)行函數(shù)callback
          ajaxError(callback)  當(dāng)ajax請求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)callback
          ajaxStop(callback)  當(dāng)ajax請求停止時(shí)執(zhí)行函數(shù)callback
          ajaxSuccess(callback)  當(dāng)ajax請求成功時(shí)執(zhí)行函數(shù)callback

             
                                                 :jQuery插件

               隨著jQuery的廣泛使用,已經(jīng)出現(xiàn)了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,簡單的引用這些源文件就可以方便的使用這些插件。這里我簡單的介紹一些網(wǎng)址供大家參考,這些網(wǎng)站頭提供了大量的demo,并且使用及其簡單,及時(shí)E文不好,也能快速掌握!
              http://jquery.com/plugins     官方推薦
              http://interface.eyecon.ro/demos    效果超級棒,使用更簡單,一定有你喜歡的!
              http://www.dyve.net/jquery/
              http://bassistance.de/jquery-plugins

             還有其它很多插件,大家可以google以下,如果大家發(fā)現(xiàn)好的了,可以留言共享以下!
              

              ——————————————————————————————————————————————


              下面我再推薦一些jQuery的學(xué)習(xí)網(wǎng)站方便大家更好的掌握這項(xiàng)工具!
              http://keel.sike.googlepages.com/jQuery_getting_started.html     中文入門介紹,Keel翻譯
              http://jquery.com/api      jquery提供全部基本方法的介紹及demo,方便大家查詢!

          posted on 2011-10-20 23:00 Steven_bot 閱讀(279) 評論(0)  編輯  收藏 所屬分類: 一些收藏

          主站蜘蛛池模板: 龙陵县| 大洼县| 永州市| 凤翔县| 班玛县| 嘉荫县| 娄底市| 博乐市| 阿尔山市| 华坪县| 康定县| 凤冈县| 盐源县| 西平县| 北票市| 马边| 墨脱县| 夹江县| 绥棱县| 武山县| 台山市| 平乡县| 新兴县| 固安县| 龙川县| 怀柔区| 苍山县| 久治县| 白城市| 师宗县| 博湖县| 怀宁县| 邵阳县| 仁怀市| 白朗县| 施秉县| 自治县| 平昌县| 灌阳县| 诸城市| 潍坊市|