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>

 

你可能感兴趣的:(函数)