真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jsquery簡(jiǎn)單體驗(yàn)

http://www.javaeye.com/topic/34087

目前創(chuàng)新互聯(lián)建站已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、榆陽(yáng)網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。

Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascript框架。對(duì)prototype我使用不多,簡(jiǎn)單了解過(guò)。但使用上jquery之后,馬上被她的優(yōu)雅吸引住了。有人使用這樣的一比喻來(lái)比較prototype和jquery:prototype就像Java,而jquery就像ruby.實(shí)際上我比較喜歡java(少接觸Ruby罷了)但是jquery的簡(jiǎn)單的實(shí)用的確有相當(dāng)大的吸引力啊!在項(xiàng)目里我把jquery作為自已唯一的框架類包。使用其間也有一點(diǎn)點(diǎn)心得,其實(shí)這些心得,在jquery的文檔上面也可能有講,不過(guò)還是記下來(lái),以備忘罷。
一,找到你了!
還記得$()這個(gè)東西吧?prototype還是DWR都使用了這個(gè)函數(shù)代替document.getElementById()。沒錯(cuò),jquery也跟風(fēng)了。為達(dá)到document.getElementById()的目的,jquery是這樣寫的:

代碼
  1. var someElement = $("#myId");

看起來(lái)比其他兩個(gè)框架的要多了一個(gè)#,好,看看下面的用法:

代碼
  1. $("div p");(1)
  2. $("div.container")(2)
  3. $("div #msg");(3)
  4. $("table a",context);(4)

在prototype里看過(guò)這樣的寫法嗎?第一行代碼得到所有
標(biāo)簽下的

元素。第二行代碼得到class為container的

元素,第三行代碼得到
標(biāo)簽下面id為msg的元素。第四行代碼得到context為上下文的table里面所有的連接元素。
如果你熟悉CSS,Xpath,你會(huì)覺得這些寫法很眼熟!對(duì)了。正是??闯鰥W妙了吧。jquery就是通過(guò)這樣的方式來(lái)找到Dom對(duì)象里面的元素。跟CSS的選擇器相類似。
二,Jquery對(duì)象?
jquery提供了很多便利的函數(shù),如each(fn),但是使用這些函數(shù)的前提是:你使用的對(duì)象是Jquer對(duì)象。使一個(gè)Dom對(duì)象成為一個(gè)Jquery對(duì)象很簡(jiǎn)單,通過(guò)下面一些方式(只是一部分):
代碼
  1. vara = $("#cid");(1)
  2. varb = $("

    hello

    ");(2)
  3. varc =document.createElement("table"); vartb = $(c);

三,代替body標(biāo)簽的onload
這個(gè)慣例,也許是除了$()之外,用得最多的地方了。下面一段代碼:
代碼
  1. $(document).ready(function(){
  2. alert("hello");
  3. });(1)
  4. (2)

上面兩段代碼是等價(jià)的。但代碼1的好處是做到表現(xiàn)和邏輯分離。并且可以在不同的js文件中做相同的操作,即$(document).ready(fn)可以在一個(gè)頁(yè)面中重復(fù)出現(xiàn),而不會(huì)沖突?;旧螶qeury的很多plugin都是利用這個(gè)特性,正因?yàn)檫@個(gè)特性,多個(gè)plugin共同使用起來(lái),在初始化時(shí)不會(huì)發(fā)生沖突。
不管怎么說(shuō),這個(gè)慣例可以分離javascript與HTML。推薦使用。
四,事件機(jī)制
我大量使用的事件可能就是button的onclick了。以前習(xí)慣在input 元素上寫onclick = "fn()",使用jquery可以使javascript代碼與html代碼分離,保持HTML的清潔,還可以很輕松地綁定事件,甚至你可以不知道“事件”這個(gè)名詞。
代碼
  1. $(document).ready(function(){
  2. $("#clear").click(function(){
  3. alert("i am about to clear the table");
  4. });
  5. $("form[0]").submit(validate);
  6. });
  7. function validate(){
  8. //do some form validation
  9. }

五,同一函數(shù)實(shí)現(xiàn)set&get
代碼
  1. $("#msg").html();
  2. $("#msg").html("hello");

上面兩行代碼,調(diào)用了同樣的函數(shù)。但結(jié)果卻差別很大。
第一行是返回指定元素的HTML值,第二行則是將hello這串字符設(shè)置到指定元素中。jquery的函數(shù)大部分有這樣的特性。
六,ajax
這是一個(gè)ajax橫行的時(shí)代。多少人,了不了解ajax的都跟著用上一把。呵。使用jquery實(shí)現(xiàn)ajax同樣簡(jiǎn)單異常
代碼
  1. $.get("search.do",{id:1},rend);
  2. function rend(xml){
  3. alert(xml);
  4. } (1)
  5. $.post("search.do",{id:1},rend);
  6. function rend(xml){
  7. alert(xml);
  8. } (2)
  9. $("#msg").ajaxStart(function(){
  10. this.html("正在加載。。。。");
  11. });(3)
  12. $("#msg").ajaxSuccess(function(){
  13. this.html("加載完成!");
  14. });(4)

這些都是較常用的方法,get和post用法一樣。第一個(gè)參數(shù)是異步請(qǐng)求的url,第二個(gè)為參數(shù),第三個(gè)回調(diào)方法。
3,4的方法會(huì)在指定的Dom對(duì)象上綁定響應(yīng)ajax執(zhí)行的事件。當(dāng)然,jquery的AJAX相關(guān)的函數(shù)不僅是這些,有興趣可以去研究再多。
七,漸入淡出
代碼
  1. $("#msg").fadeIn("fast");
  2. $("#msg").fadeOut("slow");

沒錯(cuò),上面兩行代碼已經(jīng)分別實(shí)現(xiàn)了一個(gè)id為Msg的jquery對(duì)象的漸入和淡出。做一個(gè)像Gmail一樣的動(dòng)態(tài)加載通知條,用jquery就那么簡(jiǎn)單。兩個(gè)函數(shù)接受的參數(shù)除了快慢等,還可以接收整型,作為漸入或淡出的完成時(shí)間,單位為MS。
八,plugin
這也是一個(gè)插件的時(shí)代。
jquery插件給我的感覺清一色的清潔,簡(jiǎn)單。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個(gè)重要原因是發(fā)現(xiàn)她已經(jīng)有了很多很好,很精彩的插件。

寫得很爛。可能大家看不出jquery的好處。嗯,光聽是沒用的,試用一下吧。你會(huì)發(fā)覺很有趣。
暫時(shí)告一段落吧。待有新的發(fā)現(xiàn)再來(lái)分享。

[@more@]
本文題目:jsquery簡(jiǎn)單體驗(yàn)
網(wǎng)站路徑:http://weahome.cn/article/gddojd.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部