jQuery交流材料.ppt

1、jQuery是神馬？,jQuery是由美國(guó)人John Resig創(chuàng)建，其宗旨是WRITE LESS，DO MORE(寫最少的代碼，做更多的事情)。jQuery是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架,壓縮后只有21k, 有 許多成熟的插件可供選擇,真正的write less , do more。,jQuery是神馬？,程序員：簡(jiǎn)化JavaScript和Ajax編程，能夠使程序員從設(shè)計(jì)和書寫繁雜的JS應(yīng)用中解脫出來(lái)，將關(guān)注點(diǎn)轉(zhuǎn)向功能需求而非實(shí)現(xiàn)細(xì)節(jié)上，從而提高項(xiàng)目的開發(fā)速度。 用 戶：改善了頁(yè)面視覺(jué)效果，增強(qiáng)了與頁(yè)面的交互性，體驗(yàn)更絢麗的網(wǎng)頁(yè)物資。 跨瀏覽器支持 ：(IE

2、6.0+,IE9.0， FF 2+, Safari 3.0+, Opera 9.0+, Chrome),jquery能做什么,概述,在HTML代碼中，我們經(jīng)常看到類似這樣的代碼： 借助于jquery，頁(yè)面代碼將如下所示： $(“#myform”).submit(function() ),jquery的特點(diǎn)(一)實(shí)現(xiàn)頁(yè)面與腳本的分離,概述,最少的代碼做更多的事情，這是jquery的口號(hào)，而且名副其實(shí)。使用它的高級(jí)selector，開發(fā)者只需編寫幾行代碼就能實(shí)現(xiàn)令人驚奇的效果。開發(fā)者無(wú)需過(guò)于擔(dān)憂瀏覽器差異，它除了還完全支持Ajax，而且擁有許多提高開發(fā)者編程效率的其它抽象概念。jquery把Jav

3、aScript帶到了一個(gè)更高的層次。以下是一個(gè)非常簡(jiǎn)單的示例：$(p.neat).addClass(ohmy).show(slow); 通過(guò)以上簡(jiǎn)短的代碼，開發(fā)者可以遍歷“neat”類中所有的元素，然后向其增加“ohmy”類，同時(shí)以動(dòng)畫效果緩緩顯示每一個(gè)段落。開發(fā)者無(wú)需檢查客戶端瀏覽器類型，無(wú)需編寫循環(huán)代碼，無(wú)需編寫復(fù)雜的動(dòng)畫函數(shù)，僅僅通過(guò)一行代碼就能實(shí)現(xiàn)上述效果。,jquery的特點(diǎn)(二)最少的代碼做更多的事情,在大型JavaScript框架中，jquery對(duì)性能的理解最好。盡管不同版本擁有眾多新功能，其最精簡(jiǎn)版本只有18KB大小，這個(gè)數(shù)字已經(jīng)很難再減少。jquery的每一個(gè)版本都有重大性能

4、提高。本篇文章講的是jquery未經(jīng)過(guò)任何優(yōu)化的原始速度。如果將其與新一代具有更快JavaScript引擎的瀏覽器(如火狐3和谷歌Chrome)配合使用，開發(fā)者在創(chuàng)建富體驗(yàn)Web應(yīng)用時(shí)將擁有全新速度優(yōu)勢(shì)。,概述,jquery的特點(diǎn)(三)性能好,概述,但是業(yè)內(nèi)對(duì)jquery的支持已經(jīng)非常廣泛。谷歌不但自己使用它，還提供給用戶使用。另外戴爾、新聞聚合網(wǎng)站、火狐社區(qū)和許多其它廠商也在使用它。微軟甚至將它整合到Visual Studio中。如此多的重量級(jí)廠商支持該框架，用戶大可以對(duì)其未來(lái)放心，大膽的對(duì)其投入時(shí)間。,jquery的特點(diǎn)(四)它是一個(gè)“標(biāo)準(zhǔn)”,概述,基于jquery開發(fā)的插件目前已經(jīng)有大約

5、數(shù)千個(gè)。開發(fā)者可使用插件來(lái)進(jìn)行表單確認(rèn)、圖表種類、字段提示、動(dòng)畫、進(jìn)度條等任務(wù)。jquery社區(qū)已經(jīng)成長(zhǎng)為一個(gè)生態(tài)系統(tǒng)。這一點(diǎn)進(jìn)一步證明了上一條理由，它是一個(gè)安全的選擇。而且，jquery正在主動(dòng)與“競(jìng)爭(zhēng)對(duì)手”合作，例如prototype。它們似乎在推進(jìn)JavaScript的整體發(fā)展，而不僅僅是在圖謀一己之私。,jquery的特點(diǎn)(五)豐富的插件,概述,當(dāng)然要想真正學(xué)習(xí)jquery，開發(fā)者還是需要投入一點(diǎn)時(shí)間，尤其是如果你要編寫大量代碼或自主插件的話，更是如此。但是，開發(fā)者可以采取“各個(gè)擊破”的方式，而且jquery提供了大量示例代碼，入門是一件非常容易的事情。簡(jiǎn)而言之，學(xué)習(xí)jquery不需要

6、開發(fā)者投入太多，就能夠迅速開始開發(fā)工作，然后逐漸提高技巧。,jquery的特點(diǎn)(六)節(jié)省開發(fā)者學(xué)習(xí)時(shí)間,嵌入JS到你的頁(yè)面中, ,jQueury用法及演示, $(document).ready(function() / Start here ); ,jQueury用法及演示,$(“div”).addClass(“xyz”);,找到DOM節(jié)點(diǎn),進(jìn)行一些操作,jQuery Object,jQuery 使用方法,一個(gè)簡(jiǎn)單的例子, I m a paragraph 1 I m a paragraph 2 I m another paragraph ,一個(gè)簡(jiǎn)單的例子, I m a paragraph 1

7、I m a paragraph 2 I m another paragraph ,選擇一個(gè)段落. $(“p”),一個(gè)簡(jiǎn)單的例子, I m a paragraph -1 I m a paragraph -2 I m another paragraph ,選擇一個(gè)段落. 添加一個(gè)Style. $(“p”).addClass(“red”);,Selector 選擇器基礎(chǔ),傳遞一個(gè) selector 到 $() 什么是 selector? 使用任何CSS選擇器,Selector 選擇器基礎(chǔ),想象一個(gè)簡(jiǎn)單的CSS文件,#header margin : 0 auto; div margin : 0px;

8、padding : 0px ul.menu li . ,Selector 選擇器基礎(chǔ),紅色 的就是選擇器 selectors,#header margin : 0 auto; div margin : 0px; padding : 0px ul.menu li . ,Selector 選擇器基礎(chǔ),通過(guò) ID 選擇 $(“#header”),使用 selector 選擇器,Selector 選擇器基礎(chǔ),通過(guò) ID 選擇 $(“#header”) 通過(guò) Class 選擇 $(“.updated”),使用 selector 選擇器,Selector 選擇器基礎(chǔ),通過(guò) ID 選擇 $(“#header

9、”) 通過(guò) Class 選擇 $(“.updated”) 通過(guò) tag 選擇 $(“table”),使用 selector 選擇器,Selector 選擇器基礎(chǔ),通過(guò) ID 選擇 $(“#header”) 通過(guò) Class 選擇 $(“.updated”) 通過(guò) tag 選擇 $(“table”) 復(fù)雜的選擇 $(“table.user-list”) $(“#footer ul.menu li”),使用 selector 選擇器,Selector 選擇器基礎(chǔ) Example,下面是一個(gè)web頁(yè)面 Logo here user name . logout ,Selector 選擇器基礎(chǔ) Exam

10、ple,$(“#header”) Logo here user name . logout ,Selector 選擇器基礎(chǔ) Example,$(“ul.menu”) Logo here user name . logout ,Selector 選擇器基礎(chǔ) Example,$(“ul.menu li”) Logo here user name . logout ,在選擇時(shí)使用Filter,最基礎(chǔ)的Filter :first, :last, :even, :odd, .,基礎(chǔ) Filters Example,下面是學(xué)生列表，我們將它變?yōu)榘呒y效果,基礎(chǔ) Filters Example,$(“#stu

11、dents tr:even”).css(“background-color”, “#dde”),在選擇時(shí)使用Filter,最基礎(chǔ)的Filters :first, :last, :even, :odd, . 內(nèi)容Filters: :empty , :contains(text), :has(selector), .,內(nèi)容 Filters Example,$(“#students tr:even”).css(“background-color”, “#dde”); $(“#students ment:empty”).text(“No Comment”);,在選擇時(shí)使用Filter,最基礎(chǔ)的Filt

12、ers :first, :last, :even, :odd, . 內(nèi)容Filters: :empty , :contains(text), :has(selector), . 屬性Filters: attribute, attribute=value, attribute!=value, .,屬性 Filters Example,$(“#students tr:even”).css(“background-color”, “#dde”); $(“#students ment:empty”).text(“No Comment”); $(“#students tdalign=center).ad

13、dClass(“ocean”);,Using filters for selecting,最基礎(chǔ)的Filters :first, :last, :even, :odd, . 內(nèi)容Filters: :empty , :contains(text), :has(selector), . 屬性Filters: attribute, attribute=value, attribute!=value, . 表單 :input, :text, :submit, :password, . :enabled, :disabled, :checked, .,表單 Selector Example,$(:sub

14、mit).click(function(e) ); $(input:disabled).val(“You cannot change me); $(“#form-id input:checked”).addClass(“selected”);,現(xiàn)在我們會(huì)用選擇器了,讓我們做一些 操作 吧,jQuery 方法,DOM 操作 before(), after(), append(), appendTo(), .,Dom 操作 Example,將所有的段落移動(dòng)到id是content的div中 $(“p”) jQuery jQuery is good jQuery is better jQuery is

15、 the best ,Dom 操作 Example,將所有的段落移動(dòng)到id是content的div中 $(“p”).appendTo(“#contents”); jQuery jQuery is good jQuery is better jQuery is the best ,Dom 操作 Example,標(biāo)題中增加一段話 $(“p”).appendTo(“#contents”); $(“h1”).append(“ Dom 操作”); jQuery Dom Manipulation jQuery is good jQuery is better jQuery is the best ,jQu

16、ery 方法,DOM 操作 before(), after(), append(), appendTo(), . 屬性 css(), addClass(), attr(), html(), val(), .,屬性 Example,使最后一段變綠 $(“#contents p:last”).css(“color”, “green”); jQuery Dom Manipulation jQuery is good jQuery is better jQuery is the best ,更多屬性的Example,設(shè)置 $(“img.logo”).attr(“align”, “l(fā)eft”); $(“

17、p.copyright”).html(“,更多屬性的Example,設(shè)置 $(“img.logo”).attr(“align”, “l(fā)eft”); $(“p.copyright”).html(“,jQuery 方法,DOM 操作 before(), after(), append(), appendTo(), . 屬性 css(), addClass(), attr(), html(), val(), . 事件 click(), bind(), unbind(), live(), .,事件 Example,當(dāng)Dom加載完成的時(shí)候 $(document).ready(function() $(s

18、elector).eventName(function(); );,事件Example,在事件中綁定所有操作. $(document).ready(function() $(“#message”).click(function() $(this).hide(); ) ); blah blah ,事件 Example,手動(dòng)出發(fā)事件. $(document).ready(function() $(“span#message”).click(function() $(this).hide(); ) $(“#form-id:reset”).click(); );,jQuery 方法,DOM 操作 be

19、fore(), after(), append(), appendTo(), . 屬性 css(), addClass(), attr(), html(), val(), . 事件 click(), bind(), unbind(), live(), . 效果 hide(), fadeOut(), toggle(), animate(), .,效果 Example,當(dāng)點(diǎn)擊 Show-Cart連接時(shí)，滑出Cart Div $(“a#show-cart”).click(function() $(“#cart”).slideToggle(“slow”); ),效果 Example,定制你自己的效果

20、$(“a#show-cart”).click(function() $(“#cart”).slideToggle(“slow”); ) $(#showdown).click(function() $(#my-div).animate( width: 70%, opacity: 0.4, fontSize: 3em“ , 1200 ); );,jQuery 方法,DOM 操作 before(), after(), append(), appendTo(), . 屬性 css(), addClass(), attr(), html(), val(), . 事件 click(), bind(), u

21、nbind(), live(), . 效果 hide(), fadeOut(), toggle(), animate(), . Ajax load(), get(), ajax(), getJSON(), .,Ajax Examples,給一個(gè)容器加載內(nèi)容 $(“#comments”).load(“/get_comments.php”); $(“#comments”).load(“/get_comments.php”, max : 5);,Ajax Examples,發(fā)送異步請(qǐng)求 $.get(“/edit_comment.php, id: 102, comment: “I m edited );,Ajax Examples,發(fā)送序列化結(jié)果 $.get(“/edit_comment.php, $(“#edit-comment”).serialize() ); id=102 );,方法鏈,大多數(shù)jQuery 方法返回jQuery object 你可以連接使用,方法鏈,大多數(shù)jQuery 方法返回jQuery object 你可以連接使用 $(“#deleted”).addClass(“red”).fadeOut(“slow”); $(“:button”