jQuery使用工具函数

工具函数可以分为以下几类: 浏览器的检测, 数组和对象的操作, 字符串操作, 测试操作, URL操作.

浏览器的检测

浏览器相关信息可以通过$.browser对象的属性来获取.属性如下:

Webkit

Mozilla

Safari

Opear

Msie

Version 版本

简单的例子:

    <script type="text/javascript">
        $(function() {
            var strTmp = "您的浏览器名称是：";
            if ($.browser.msie) { //IE浏览器
                strTmp += "IE";
            }
            if ($.browser.mozilla) { //火狐相关浏览器
                strTmp += "Mozilla FireFox";
            }
            strTmp += " 版本号是：" //获取版本号
                   + $.browser.version;
            $("#divTip").html(strTmp);
        })
</script>

我们还可以通过$.support.boxModel来确定页面是否是标准的W3C盒子模型,返回true则是,否则就是IE盒子模型.

数组和对象的操作

$.each()函数遍历数组:

        $(function() {
            var arrStu = { "张三：": "60", "李四：": "70", "王二：": "80" }
            var strContent = "<li class='title'>姓名：分数</li>";
            $.each(arrStu, function(Name, Value) {
                strContent += "<li>" + Name + Value + "</li>";
            })
            $("ul").append(strContent);
        })

$.each()函数遍历对象:

        $(function() {
            var strContent = "<li class='title'>属性：值</li>";
            $.each($.ajaxSettings, function(Property, Value) {
            strContent += "<li>" + Property + "：" + Value + "</li>";
            })
            $("ul").append(strContent);
        })

$.grep()函数数据筛选:

        $(function() {
            var strTmp = "筛选前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.grep(arrNum, function(ele, index) {
                return ele > 5 && index < 8 //元素值大于5且序号小于8
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>筛选后数据："
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })

$.map()函数变更数据:

        $(function() {
            var strTmp = "变更前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < 8) { //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据："
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })

$.inArray()函数搜索数据:

        $(function() {
            var strTmp = "待搜索数据：";
            var arrNum = [4, 21, 2, 12, 5];
            var arrPos = $.inArray(2, arrNum);
            strTmp += arrNum.join();
            strTmp += "<br/><br>搜索后结果："
            strTmp += arrPos;
            $("#divTip").append(strTmp);
        })

字符串操作

$.trim()函数可以除掉字符串左右两边的空格.

如:

var strOld = "  jQuery,write less do more    ";
  var strNew = $.trim(strOld);

测试操作

测试工具函数有以下几个:

$.isArray(obj)

$.isFunction(obj)

$.isEmptyObject(obj)

$.isPlainObject(obj) // 检测obj是否一个纯粹的对象

$.contains(container, contained) // 检测一个DOM节点是否包含另一个DOM节点

URL操作

Serialize()函数是序列化表单向服务器提交数据,而他的核心则是$.param(),这个函数可以使数组或者对象按照name/value格式进行序列化.

        $(function() {
            var arrInfo = { id: 101, name: "tao", sex: 0 }; //基本信息数组
            //分数和汇总信息数组
            var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
                SunNum: { Score: 288, Num: 3 }
            };
            //序列化各数组
            var arrNewInfo = $.param(arrInfo);
            var arrNewScore = $.param(arrScore);
            var arrDecScore = decodeURIComponent($.param(arrScore));
            //显示序列化后的数组
            var strTmp = "<b>arrInfo数组序列化后</b>：";
            strTmp += arrNewInfo;
            strTmp += "<br><br><b>arrScore数组序列化后</b>：";
            strTmp += arrNewScore;
            strTmp += "<br><br><b>arrScore序列化解码后</b>：";
            strTmp += arrDecScore;
            //显示在页面中
            $("#divTip").append(strTmp);
        })

工具函数的扩展

工具函数的扩展就是自己编写类级别的插件.可以利用$.extend() .这里不过多叙述.