西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → Jquery中是如何對數(shù)組進行操作的?

Jquery中是如何對數(shù)組進行操作的?

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:本站整理時間:2011/1/14 22:16:56字體大。A-A+

作者:佚名點擊:1299次評論:0次標簽: Jquery

  • 類型:編程輔助大。109KB語言:中文 評分:5.0
  • 標簽:
立即下載
 眾所周知,Jquery是對JavaScript的一種高效的封裝,所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組,在JavaScript中我們使用for以及for-in進行數(shù)組的操作,而在Jquery中則使用$.map()、$.each()來操作數(shù)組:

首先是普通的數(shù)組(索引為整數(shù)的數(shù)組):
$.map(arr,fn);
對數(shù)組中的每個元素調(diào)用fn函數(shù)逐個進行處理,fn函數(shù)將處理返回最后得到的一個新的數(shù)組
1 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];

2 var newarr = $.map(arr, function(item) {return item*2 });

3 alert(newarr);





$.each(array,fn)對數(shù)組array每個元素調(diào)用fn函數(shù)進行處理,沒有返回值


1 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];

2 $.each(arr, function(key, value) { alert("key:" + key + "value:" + value); });


還可以省略function的參數(shù),這個時候this可以得到遍歷的當前元素的值

1 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];

2 $.each(arr, function() { alert(this); });


然后是索引為字符串的 鍵值對數(shù)組,針對這類數(shù)組,
一般采用$.each(array,fn)來操作:




view sourceprint?1 var arr = { "jim": "11", "tom": "12", "lilei": "13" };

2 $.each(arr, function(key, value) { alert("姓名:"+key+"年齡:"+value); });



當然也可以使用無參的的function進行遍歷;

當這類數(shù)據(jù)從服務器端獲取時可以如下進行:

服務器端:



01 <%@ WebHandler Language="C#" Class="Handler" %>

02

03 using System;

04 using System.Web;

05 using System.Web.Script.Serialization;

06 using System.Collections.Generic;

07 public class Handler : IHttpHandler {

08

09 public void ProcessRequest (HttpContext context) {

10 context.Response.ContentType = "text/plain";

11 Person p1 = new Person { Age = "22", Name = "tom" };

12 Person p2 = new Person { Age = "23", Name = "jim" };

13 Person p3 = new Person { Age = "24", Name = "lilei" };

14 IList<Person> persons = new List<Person> {p1,p2,p3};

15 JavaScriptSerializer js = new JavaScriptSerializer();

16 string s= js.Serialize(persons);

17 context.Response.Write(s);

18 }

19

20 public class Person

21 {

22 public string Name { get; set; }

23 public string Age { get; set; }

24 }

25 public bool IsReusable {

26 get {

27 return false;

28 }

29 }

30

31 }


先實例化了三個person對象,然后放到一個集合中,最后把這個集合序列化成字符串流到客戶端;



客戶端:


01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02

03 <html xmlns="http://www.w3.org/1999/xhtml">

04 <head>

05 <title></title>

06

07 <script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script>

08 <script type ="text/javascript" >

09 $.get("Handler.ashx", function(data) {

10 var persons = $.parseJSON(data);

11 $.each(persons, function(key, person) {

12 alert("Age:"+person.Age+"Name:"+person.Name) });

13 });

14 </script>

15 </head>

16 <body>

17

18 </body>

19 </html>




客戶端通過$.parseJSON()將后臺傳遞過來的字符串轉(zhuǎn)化為js數(shù)組對象,接下來我們就使用操作普通數(shù)組的方式來操作這個得到的數(shù)組


第三種就是通過標簽選擇器獲取的Jquery對象數(shù)組,




01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02

03 <html xmlns="http://www.w3.org/1999/xhtml">

04 <head>

05 <title></title>

06

07 <script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script>

08 <script type ="text/javascript" >

09 $(function() {

10 $("p").text("這是p標簽");

11 });

12 </script>

13 </head>

14 <body>

15 <p></p>

16 <p></p> <p></p> <p></p> <p></p>

17 <p></p>

18 </body>

19 </html>



在瀏覽器中運行的效果為:



在dom加載完成后為每一個p元素動態(tài)的添加了文本,首先$("p")獲取p標簽的集合,相當于Javascript中的document.getElementByTagName只是這里得到的是Jquery對象的數(shù)組,這樣就有了Jquery固有的隱式迭代的功能,后面的text("這是p標簽")的操作就迭代到了每一個P標簽上,我們也可以顯示的調(diào)用each函數(shù)來顯示的迭代獲得的Jquery對象數(shù)組,下面的代碼同樣可以實現(xiàn)上面的效果:



01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02

03 <html xmlns="http://www.w3.org/1999/xhtml">

04 <head>

05 <title></title>

06

07 <script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script>

08 <script type ="text/javascript" >

09 $(function() {

10 $("p").each(function() {

11 $(this).text("這是p標簽");

12 });

13 });

14 </script>

15 </head>

16 <body>

17 <p></p>

18 <p></p> <p></p> <p></p> <p></p>

19 <p></p>

20 </body>

21 </html>
    html編輯器
    (73)html編輯器
    我們做網(wǎng)頁的時候最難找的就是編輯器,網(wǎng)上找一個吧,要不是圖片上傳錯誤,就是到處都是錯誤,垃圾太多.大家都需要一個簡單,速度快的.西西為您提供最好用的編輯器一站式下載編輯器定義編輯器指的是一類編輯制作工具,可自定義窗囗,編輯主題索引,可選擇添搜索頁,無任何不自由。編輯器哪個好用小編個人比較喜歡使用和,這兩款編輯器軟件都有不錯的表現(xiàn)。至于編輯器哪個好用,這就要根據(jù)你的個人需求去選擇對應的編輯器啦...更多>>
    • UltraEdit-32中文版21.20.1001 中文

      06-29 / 19.5M

      推薦理由:ultraEdit 32 破解版 簡體中文 內(nèi)有安裝說明,完全免費,無試用期的。該軟件功能強大,能打開各種格式的文件
    • pyscripter x642.5.3 官方最新版

      11-10 / 4.7M

      推薦理由:python編輯器,代碼補全、參數(shù)提示補全工具,這個工具其實非常重要,可以大大提高開發(fā)效率,減少出錯。很滿
    • 快手AAuto Studio10.152 綠色中文免

      02-20 / 8.5M

      推薦理由:快手aauto是由一鶴軟件耗時四年開發(fā)新一代編程語言。完美支持靜態(tài)類型、動態(tài)類型,完美支持com、dllapi、re
    • ultraedit64位破解版v22.20.0.49 綠

      03-31 / 37.9M

      推薦理由:UltraEdit是最強大的一款超值文本編輯器!ultraedit64位破解版,適用于Windows64位系統(tǒng)使用,此版為綠色破解
    • Dreamweaver cs6中文版官方原版

      11-19 / 279.7M

      推薦理由:AdobeDreamweaverCS6是AdobeCreativeSuite6系列中的HTML編輯器和網(wǎng)頁設計軟件,是最優(yōu)秀的可視化網(wǎng)頁設計工
    • Adobe Dreamweaver CS5官方簡體中文

      05-15 / 436.8M

      推薦理由:Adobe Dreamweaver CS5 軟件使設計人員和開發(fā)人員能充滿自信地構(gòu)建基于標準的網(wǎng)站。由于同新的 Adobe CS Li
    dreamweaver cs6
    (14)dreamweaver cs6
    新版本使用了自適應網(wǎng)格版面創(chuàng)建頁面,在發(fā)布前使用多屏幕預覽審閱設計,可大大提高工作效率。改善的性能,更高效地傳輸大型文件。實時視圖和多屏幕預覽面板可呈現(xiàn)代碼,更能夠檢查自己的工作。曾經(jīng)風靡一時的網(wǎng)頁三劍客成員之一是目前應用最廣的網(wǎng)頁制作軟件,原本是由公司所開發(fā)的著名網(wǎng)站開發(fā)工具,隨被收購后,改名為。它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具,以及在之后推出的針對專業(yè)網(wǎng)頁圖像設計的,三者...更多>>
    • Dreamweaver cs6中文版官方原版

      11-19 / 279.7M

      推薦理由:AdobeDreamweaverCS6是AdobeCreativeSuite6系列中的HTML編輯器和網(wǎng)頁設計軟件,是最優(yōu)秀的可視化網(wǎng)頁設計工
    • Dreamweaver cc amtlib.dll補丁

      07-05 / 834KB

      推薦理由:Adobe Dreamweaver CC 13.0 build 6390多語言正式版的破解補丁,破解后程序不再提示剩余天數(shù)與激活注冊。關(guān)
    • Dreamweaver CS5 HTML 5 擴展包

      06-22 / 5.7M

      推薦理由:安裝了該擴展后再也不用擔心不記得難記的css3樣式代碼了! 剛裝 Dreamweaver CS5 的時候,發(fā)現(xiàn)新建文檔的時
    • Dreamweaver插件包西西整理

      01-08 / 2.7M

      推薦理由:西西小編整理的一些比較常用的Dreamweaver插件,希望能對大家有所幫助!persistent_layers 不管滾動條如何拉
    • Adobe Dreamweaver CS4中文精簡版

      04-11 / 84.5M

      推薦理由:使用業(yè)界領(lǐng)先的Web 創(chuàng)作工具之一構(gòu)建世界級的網(wǎng)站和應用程序。Adobe® Dreamweaver® CS4 軟件是 W
    • Dreamweaver jQuery智能提示插件1.

      07-31 / 109KB

      推薦理由:1.2.0版本插件在1.0.0插件基礎上進一步修改,版權(quán)信息僅保留致謝信息,刪除作者為了代碼整體提示美觀度,故

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)