zoukankan      html  css  js  c++  java
  • 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 = [
                        {  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 = [
                        {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>
  • 相关阅读:
    SpringMVC 集成 Swagger【问题】 No qualifying bean of type RequestMappingHandlerMapping found for dependency
    【leetcode】medianofTwoSortedArrays
    记一次apache+php调优
    java 文件定位
    Java知识探究一:关于IO类库
    180app待选内容
    SQlserver 2000 根据spid 查询执行的SQL
    (转)Flashbuilder4.5中文版破解方法
    代码整洁之道
    手机分辨率基础知识(DPI,DIP计算)
  • 原文地址:https://www.cnblogs.com/liuruitao/p/4045636.html
Copyright © 2011-2022 走看看