JQuery攻略(三)数组与字符串
在上两章,JQuery攻略(一) 基础知识——选择器 与 DOM 和 JQuery攻略(二) Jquery手册 我们为后面的章节打好了基础,在这一章节中,我们继续。
在这一章节中,我们记录的是JQuery 数组与字符串的学习
此章节有
3.0 一不小心就忽略了的$符号
3.1 数组的输出 用到的函数有:text() , join() , html() , each() , append() , get()
3.2 数组元素的操作 用到的函数有:map() , toUpperCase()
3.3 数组元素的筛选 用到的函数有:grep() , match()
3.4 数组元素的排序 用到的函数有:sort()
3.5 数组的拆分与合并 用到的函数有:splice() , concat()
3.6 字符串的切割 用到的函数有:substr()
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 a.Age - b.Age; }); $.each(students, function (i, item) { $("body").append("<p id = " + i + ">" + item.Name + " " + item.Age + " " + item.Gender + "</p>"); });
});
在sort()函数中,需要添加比较函数,反复从数组中获得对比的两个值,在比较后返回 大于0 , 小于0 ,等于0的值。就像 3.4那样。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)