JQ工具函数运用

1.把对象转换为字符串

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                var option = {
                    user: "wangqiang",
                    pass:"123456789"
                }
                var str = jQuery.param(option);
                $("#result").text(str);
            })
        })
    </script>
    <title></title>
</head>
<body>
    <button>定义序列化字符串</button>
    <div id="result"></div>
</body>
</html>

2.处理字符串（去除空格）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                var str = "    ";
                alert(str.length);
                str = jQuery.trim(str)
                alert(str.length);                                  
            })

        })
    </script>
    <title></title>
</head>
<body>
    <div>

      <button> 修剪字符串</button>
    </div>
</body>
</html>

3.对数组和集合进行迭代

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var a = [
                    { width: 400 },
            { height: 300 }
            ];
            jQuery.each(a,function(name,value)
            {
                if (name > 0) return false;//只进行一次循环即退出 需要退出each循环，返回一个false就可以了
                alert(name+="="+value);
            })

        })
    </script>
    <title></title>
</head>
<body>

</body>
</html>

4.对数组进行筛选

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        //筛选数组
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        arr = jQuery.grep(arr, function (value, index) {
            return value >= 5;
        })
        alert(arr);
        //转换数组
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        arr = jQuery.map(arr, function (elem) {
            return elem * 2 > 5 ? elem * 2 : null;
        })
        alert(arr);
        //合并数组
        var arr1 = [1, 2, 3, ["a", "b", "c"]];
        var arr2 = [4, 5, 6, [7, 8, 9]];
        arr3 = jQuery.merge(arr1, arr2);
        alert(arr1);
        alert(arr1.length);//
        alert(arr3);
        alert(arr3.length);
    </script>
    <title></title>
</head>
<body>

</body>
</html>

5.检测用户代理

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var brower = $.browser;
            var temp = "";
            for (var name in brower)
            {
                if (brower[name] == true) {
                    temp += name + "=" + brower[name] + "当前浏览器是：" + name;
                }
                else {

                    temp += name + "=" + brower[name];
                }
            }
            $("div").html(temp);
        })
    </script>
    <title></title>
</head>
<body>
    <div></div>
</body>
</html>

6.判断是否是数组类型

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var a = [
                    {width:400},
            {height:300}
            ];
            if (jQuery.isArray(a))
                alert("变量a是数组");
                
        })
    </script>
    <title></title>
</head>
<body>

</body>
</html>

7.生成数组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        var arr = jQuery.makeArray($("li").val);
        alert(arr);
        $("ul").html(arr.reverse());

    </script>
    <title></title>
    <style type="text/css"></style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

 

posted @ 2014-10-23 13:52  code_dream  阅读(245)  评论(0)  编辑  收藏  举报