码迷,mamicode.com
首页 > 其他好文 > 详细

工具函数(一)

时间:2016-04-26 23:41:44      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

   工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。

   字符串操作

   在jQuery中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数:$.trim()。如:

var str = "        jQuery      ";
alert(str);
alert($.trim(str));

   数组和对象操作

   jQuery为处理数组和对象提供了一些工具函数, 这些函数可以便利的给数组或对象进行遍历、筛选、搜索等操作。

   工具函数.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具函数</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="box"></div>
</body>
</html>

   $.each()遍历数组:

var arr = ["张三","李四","王五","赵六"];
$.each(arr,function(index, value) {
    $("#box").html($("#box").html() + (index+1) + ":" + value + "<br/>");
});

   $.each()遍历对象:

$.each($.ajax(),function(name, fn) {
    $("#box").html($("#box").html() + fn + "<br/><br/>");
});

   注意:$.each()中index表示数组元素的编号,默认从0开始。

   $.grep()数据筛选:

var arr = [4,2,6,9,11,25,38,59];
var arrGrep = $.grep(arr,function(element,index) {
    return index < 5 && element < 6; //这里按道理是一个boolean值,但整体返回一个数组
});
alert(arrGrep); //4,2

   注意:$.grep()方法的index是从0开始计算的。

   $.map()修改数据:

var arr = [4,2,6,9,11,25,38,59];
var arrMap = $.map(arr,function(element,index) {
    //return index < 5 && element < 6; //这里就是按布尔值返回的
    //return element + 1; //所有元素均+1
    if(index < 5 && element < 6) {
        return element + 1;
    }
});
alert(arrMap); //5,3

   $.inArray()获取查找到元素的下标:

var arr = [4,2,6,9,11,25,38,59];
alert($.inArray(11,arr)); //4

   注意:$.inArray()的下标从0开始计算。

   $.merge()合并两个数组:

var arr = [4,2,6,9,11,25,38,59];
var arr2 = [200,300];
alert($.merge(arr,arr2)); //4,2,6,9,11,25,38,59,200,300

   $.unique()删除重复的DOM元素:

   工具函数.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具函数</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <div></div>
    <div></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>

</body>
</html>
var divs = $("div").get();
//concat()函数相当于在原有的6个<div>后接上3个<div class="box"></div>
divs = divs.concat($(".box").get()); //divs为原生的,非jQuery对象
//alert(divs.length); //原生对象才有length的属性,而jQuery对象没有,它有size()函数
alert($(divs).size()); //9
$.unique(divs); 
alert($(divs).size()); //6

   注意:$.unique()对数组无效:

var arr = [5,2,9,4,11,57,89,1,23,8];
var arr2 = [2,9,4];
var arr3 = $.merge(arr,arr2);
alert($.unique(arr3)); //无效

   .toArray()合并多个DOM元素组成数组

   工具函数.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>工具函数</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>
</html>
alert($("li").toArray());
alert($($("li").toArray()).size());

 

工具函数(一)

标签:

原文地址:http://www.cnblogs.com/yerenyuan/p/5436835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!