JQuery攻略（三）數組與字符串

時間 2019-11-20

標籤 jquery 攻略數組字符串欄目 JQuery 简体版

原文原文鏈接

　　在上兩章，JQuery攻略（一）基礎知識——選擇器與 DOM 和 JQuery攻略（二） Jquery手冊咱們爲後面的章節打好了基礎，在這一章節中，咱們繼續。javascript

　　在這一章節中，咱們記錄的是JQuery 數組與字符串的學習html

此章節有

　　3.0 一不當心就忽略了的$符號java

　　3.1 數組的輸出　　用到的函數有：text() , join() , html() , each() , append() , get()正則表達式

　　3.2 數組元素的操做　　用到的函數有：map() , toUpperCase()json

　　3.3 數組元素的篩選　　用到的函數有：grep() , match()數組

　　3.4 數組元素的排序　　用到的函數有：sort()app

　　3.5 數組的拆分與合併　　用到的函數有：splice() , concat()框架

　　3.6 字符串的切割　　用到的函數有：substr()ide

　　3.7 對象數組的建立與遍歷，排序　　用到的函數有：each() , sort()函數

3.0 一不當心就忽略了的$符號

　　有人可能會奇怪的問道，jQuery裏的 $ 這個符號，究竟是幹嗎的，怎麼處處都用到，有什麼意義？不用這個可不能夠？

　　有的人也許沒去追究，我纔想到，很很差意思，原本在第一章就應該寫明的。下面是個人自行解說，說的很差，千萬不要拍死我，拍個半死就好了，畢竟還需起來敲代碼的。好了，請看下面的解釋先。

　　回到上面的問題，不用這個固然也是能夠的，不過你本身必須自定義一個，或者寫全稱也行。

　　$ 符號其實就是 jQuery 的簡寫。

　　若是，不用這個$符號，那麼你寫延遲函數的時候，你就必須這樣寫了。

jQuery(document).ready(function () { });

　　可是利用$不是方便不少了嗎。我只需

$(document).ready(function () { });

　　省略了好幾個字呢！是吧！

　　用了$符號，又有一個新問題，那就是若是其餘 JavaScript 框架也使用 $ 符號做爲簡寫怎麼辦？

　　若是你在用的兩種不一樣的框架正在使用相同的簡寫符號，有可能致使腳本中止運行。這個如何是好呢？

　　其實這個問題是能夠解決的！

　　你可使用如下解決方案

　　1. 使用jQuery核心函數 noConflict() 這個方法能夠jQuery變量規定新的名稱，或者清空已定義的jQuery變量。

　　清空 noConflict() 方法會釋放會 $ 標識符的控制，這樣其餘腳本就可使用$符號了。

$.noConflict();
jQuery(document).ready(function () {
    jQuery("button").click(function () { });
});

　　2. 從新規定jQuery變量的新名稱。

var Ljs = $.noConflict();
Ljs(document).ready(function () {
    Ljs("button").click(function () { });
});

　　3. 若是你的方法裏面有不少地方使用了$符號，改起來太多太麻煩，你能夠將$符號傳入方法函數中。就像這樣。

$.noConflict();
jQuery(document).ready(function ($) {
    $("button").click(function () {
        var ptext = $("p").text();
        var divtext = $("div").text();
    });
});

　　固然，出了方法以後，你仍是得繼續使用全稱 jQuery,區分大小寫！這個是要注意的！是jQuery！jQuery！jQuery！jQuery！

3.1 數組的輸出

1. 例子：數組成員的輸出主要函數 text()

html：

<body>
    <h3>數組成員有：</h3>
    <p></p>
</body>

js：

$(document).ready(function () {
    var members = ["張三", "李四", "王老五", "趙老六", "王二麻子"];
    $("p").text(members.join(", "));
});

效果：

說明：

　　首先利用函數 join(), 函數將數組中的全部元素放入一個字符串，並以「, 」隔開。

　　在利用在前面的章節中，咱們已經講過了函數 text() ，設置匹配p元素的內容，給p元素設置文本。

2. 成員的縱向顯示主要函數 html() join()

<body>
    <h3>數組成員有：</h3>
    <p></p>
</body>

$(document).ready(function () {
    var members = ["張三", "李四", "王老五", "趙老六", "王二麻子"];
    $("p").html(members.join("<br/>"));
});

　　爲了縱向顯示名字，在使用join() 函數的時候，在元素之間咱們用了「<br/>」而不是「, 」了，再利用html()將帶標籤對的文本解析到p元素中。這裏利用的函數是html()而不是text()，若是繼續使用text()函數的話，<br/>元素將會原本來本的出如今頁面中了，這也就是 html() 函數與text() 函數的區別了。

3. 將數組成員顯示在有序列表元素<ol>中主要函數 each() append()

<body>
    <h3>數組成員有：</h3>
    <ol></ol>
</body>

$(document).ready(function () {
    var members = ["張三", "李四", "王老五", "趙老六", "王二麻子"];
    var ol = $("ol");
    $.each(members, function (index, item) {
        ol.append("<li>" + item + "</li>");
    })
});

　　　利用each()函數遍歷全部數組元素，在利用append()函數插入到<ol>元素中，成爲他的子級。

4. 利用html元素建立數組，並計算數組長度　主要函數 get()

<body>
    <h3>數組成員有：</h3>
    <ol>
        <li>張三</li>
        <li>李四</li>
        <li>王老五</li>
        <li>趙老六</li>
        <li>王二麻子</li>
    </ol>
    <p></p>
    <h3 id="h3"></h3>
</body>

$(document).ready(function () {
    var members = $("li").get();
    var string = "";
    $.each(members, function (i, item) {
        string += item.innerHTML + ", ";
    });
    $("p").text(string);
    $("#h3").text("數組長度是：" + members.length);
});

//利用函數get(),取得全部<li>元素，存入 members 對象中，此時members存了5個li元素，
//而後利用each()函數遍歷members，//將每一個<li>元素的文本取出（innerHTML 是個屬性）疊加到一個變量string中，
//在將這個string賦個p元素的文本，
//最後咱們利用數組的屬性length,獲得數組的長度。

3.2 數組元素的操做

　　將數組中的元素成員，所有轉換成字母大寫使用toUpperCase()函數相反裝成小寫是toLowerCase()

<body>
    <h3>數組成員有：</h3>
    <p></p>    
</body>

$(document).ready(function () {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
members = $.map(members, function (item, i) { //item 是數組的各個元素，i 是索引，從0開始
    return (i + 1 + ". " + item.toUpperCase());
});
$("p").html(members.join("<br/>"));
});

　　上面的例子主要是爲了瞭解map()函數，map()函數在以前的手冊中，也介紹過，「把當前匹配集合中的每一個元素傳遞給函數，產生包含返回值的新 jQuery 對象。」

　　這裏，map()函數，是迭代數組的每一個元素，併爲每一個元素調用一次回調函數。它的語法是這樣子的。

map(array,callback);

　　在上面的例子中，咱們爲每一個數組元素加了下標，並用toUpperCase()函數，將數組成員轉成大寫返回。

　　其實，這個效果，用each也能實現。

$(document).ready(function () {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
var html = [];
$.each(members, function (i, item) {
html.push(i + 1 + ". " + item.toUpperCase());
})
$("p").html(html.join("<br/>"));
});

　　咱們對比能夠看出，兩個同時都是對數組元素進行遍歷，一個是回調函數的參數順序不一樣，一個是有返回值，一個無返回值。

3.3 數組元素的篩選

　　對數組元素數據的篩選與展現

<body>
    <h3>數組成員有：</h3>
    <p id="P1"></p>  
    <h3>篩選後的數組成員有(長度>=5)：</h3>
    <p id="P2"></p> 
    <h3>數組成員有：</h3>
    <p id="P3"></p>  
    <h3>篩選後的數組成員有(使用正則表達式 開頭字母A-K)：</h3>
    <p id="P4"></p>   
</body>

$(document).ready(function () {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
$("#P1").html(members.join(", "));
members = $.grep(members, function (item, i) {
    return item.length >= 5;
});
$("#P2").html(members.join(", "));

/*----------------------------------------------------*/
var arr = ["Jolinson", "Steve", "Dive", "545sd", "23154", "55855"];
$("#P3").html(arr.join(", "));
arr = $.grep(arr, function (item) {
    return item.match(/^[A-K]/);
});
$("#P4").html(arr.join(", "));
});

　　使用函數grep()對數組元素進行篩選。這個方法爲分析整個數組元素，爲每一個元素分別調用回調函數。在回調函數中過濾不想要的元素，留下咱們所想要的值。

　　它的語法是這樣的：

grep(array,callback,boolean);

　　array：是原始數組，所須要被篩選的數據數組
　　callback: 是回調函數，只是篩選，回調函數有兩個參數，第一個是數組元素，第二個是索引值
　　boolean: 一般省略，默認的爲false，沒有效果。若是爲true，則篩選相反的集合。如上面例子那樣，默認是false,
　　篩選的是，元素長度大於等於5的元素，若是是true的話，那麼選擇的就是長度小於5的元素了。

　　/********************************************************************************************/

　　使用函數match()來定義正則表達式，匹配元素。match()是String類的一個方法，用於決定指定的字符串對象是否匹配指定的正則表達式。
　　對於如何編寫正則表達式，我建議能夠在博客園搜搜，有不少。

　　下面是效果：

3.4 數組元素的排序

　　字符串數組與數組數組的排序

<body>
    <h3>字符串數組成員有：</h3>
    <p id="P1"></p>  
    <h3>排序後的數組成員：</h3>
    <p id="P2"></p> 
    <h3>數值數組成員有：</h3>
    <p id="P3"></p>  
    <h3>排序後的數組成員有：</h3>
    <p id="P4"></p>    
</body>

$(document).ready(function () {
var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
$("#P1").html(members.join(", "));
members = members.sort();
$("#P2").html(members.join(", "));
var intArr = [54, 32, 65, 12, 87, 11, 4, 2];
$("#P3").html(intArr.join(", "));
intArr = intArr.sort(function (a, b) { return a - b; });
$("#P4").html(intArr.join(", "));
});

　　字符串數組排序

　　函數sort() 按照字母順序（基於ASCII排序）爲字符串數組排序，因此最好統一命名，要麼都以小寫開頭，要麼都以大寫開頭。

　　利用函數sort()以後，排序以後的結果集將會返回。

　　若是使用sort()函數給數值數組排序，會出現12 比 2 小的狀況。緣由是由於1的ASCII值小於2的ASCII值。

　　數值數組排序

　　所以爲了正常數值的大小比較，咱們定義了一個比較函數（想一想C#的委託已加C#版本委託找最大值）。

　　當函數返回值小於0時，a < b

　　當函數返回值大於0時，a > b

　　當函數返回值等於0時，a = b

　　return a - b;這裏是升序排列，若是進行降序排列只需將 return a - b;改成 return b - a ;

　　效果

3.5 數組的拆分與合併

<body>
    <p id="P1"></p>  
    <p id="P2"></p> 
    <p id="P3"></p>  
    <p id="P4"></p>  
    <p id="P5"></p>     
</body>

$(document).ready(function () {
　　/*拆分*/
    var members = ["Jolinson", "Steve", "Dive", "John", "Damon", "Joy"];
    $("#P1").html("字符串數組成員有：" + members.join(", "));
    var subMembers = members.splice(0, 4);
    $("#P2").html("拆分數組成員0-4：" + subMembers.join(", "));
    $("#P3").html("拆分後的原數組成員還有：" + members.join(", "));
    members.splice(0, 0, "Vakk", "John", "Cath", "Wamy");
    $("#P4").html("利用splice()添加原數組成員：" + members.splice(0, 0, "Vakk", "John", "Cath", "Wamy") + "<br/>" + members.join(", "));

    /*合併*/
    var ColMembers = members.concat(subMembers);
    $("#P5").html("合併原數組和被切分的數組：" + ColMembers.join(", ") + "<br/>原數組：" + members.join(", ") + "<br/>被切割出來的數組：" + subMembers.join(", "));
});

　　拆分
　　函數splice(),移除或者添加數組元素，並返回被刪除的數組元素部分，其他的部分繼續留在原來的數組中。
　　語法：

array.splice(index,howmany,item1,.....,itemX);

　　array ：原始數組
　　index ：指定索引的位置，從哪裏開始刪除，使用負數，則表示從後面開始
　　howmany ：指定從原始數組中刪除多少元素，若是是0則不刪除任何元素
　　item1,.....,itemX ：是可選參數，往原始數組裏面添加新的元素，以第一個參數下標後面開始添加
　　合併
　　函數concat()，用於鏈接兩個或多個數組,此方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。
　　語法：

array.concat(array1,array2,......,arrayn);

　　在寫到splice()函數的時候，我忽然想起以前有一個函數，slice()函數可提取字符串的某個部分，並以新的字符串返回被提取的部分。
　　string.slice(start,end);
　　start : 開始索引下標
　　end ：結束索引下標

<script type="text/javascript">
var str="Hello world!"
document.write(str.slice(0));//從下標0開始取，取到結尾 Hello world!
document.write("<br />");//
document.write(str.slice(6,11));//取下標6-11的字符串 world
document.write("<br />");//
document.write(str);//本來字符串未變 Hello world! 
</script>

3.6 字符串的切割

　　將數值數組轉換成字符串，在切割字符串取子字符串

$(document).ready(function () {
var intArr = [12, 32, 15, 89, 57, 46, 84];
var string = intArr.join("");
var subString = string.substr(0, 6);
document.write("原始數組：" + intArr.join(", ") + "<br/>");
document.write("將原始數組轉成字符串：" + string + "<br/>");
document.write("切割後的字符串：" + subString + "<br/>");
});

　　函數substr() 可在字符串中抽取從 start 下標開始的指定數目的字符。

string.substr(start,length);//start開始下標，length要截取的長度

　　返回一個新的字符串，包含從 stringt的下標start處開始的 length 個字符。
　　若是沒有指定 length，那麼返回的字符串包含從 start 到 string 的結尾的字符。

3.7 對象數組的建立與遍歷，排序

$(document).ready(function () {
//建立對象數組，每一個對象包含三個屬性 Name,Age,Gender ， json數組
var students = [
{
    "Name": "Joy",
    "Age": 32,
    "Gender": "男"
},
{
    "Name": "Lily",
    "Age": 23,
    "Gender": "女"
},
    {
        "Name": "OldMan",
        "Age": 78,
        "Gender": "男"
    },
    {
        "Name": "Man",
        "Age": 38,
        "Gender": "男"
    }
    ];
$.each(students, function (i, item) {
    $("body").append("<p id = " + i + ">" + item.Name + "  " + item.Age + "  " + item.Gender + "</p>");
})
$("body").append("<p><b>名字排序（升）</b></p>");
students = students.sort(function (a, b) {
    if (a.Name > b.Name) {
        return 1;
    } else if (a.Name < b.Name) {
        return -1;
    } else {
        return 0;
    }
});
$.each(students, function (i, item) {
    $("body").append("<p id = " + i + ">" + item.Name + "  " + item.Age + "  " + item.Gender + "</p>");
})
$("body").append("<p><b>年齡排序（降）</b></p>");
students = students.sort(function (a, b) {
    return b.Age - a.Age;
});
$.each(students, function (i, item) {
    $("body").append("<p id = " + i + ">" + item.Name + "  " + item.Age + "  " + item.Gender + "</p>");
});
});

　　在sort()函數中，須要添加比較函數，反覆從數組中得到對比的兩個值，在比較後返回大於0 ，小於0 ，等於0的值。就像 3.4那樣。　

public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
        }
        public delegate int DGCompare<T>(T T1, T T2);

        private void button1_Click(object sender, EventArgs e)
        {
            int[] intArr = { 12, 345, 23, 64, 321, 73, 577, 34, 46, 546 };
            int IntMax = GetMax<int>(intArr, Compare);
            MessageBox.Show(IntMax.ToString());

        }

        public T GetMax<T>(T[] Tarr, DGCompare<T> dgCompare)
        {
            T max = Tarr[0];
            foreach (T item in Tarr)
            {
                // 若是 委託返回的值 =1 ，說明 item > max,這將item賦值給max
                if (dgCompare(item, max) == 1)
                {
                    max = item;
                }
            }
            return max;
        }
        private int Compare(int x, int y)
        {
            //若是 T1 > T2 ,則返回 1，T1 = T2，則返回 0，T1 < T2 ，則返回 -1
            if (x > y)
            {
                return 1;
            }
            else if (x == y)
            {
                return 0;
            }
            else
            {
                return -1;
            }
        }
    }