`

jquery工具类笔记

 
阅读更多
1 $browswer对象获得浏览器信息
     <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);
        })

此外还有safari,opera等版本了

2)遍历数组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);
        })

3) 数据筛选
    $.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);
        })
4) 数据变更
    可以根据指定条件修改数组中的元素,比如:
          $(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 < { //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据:"
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })

5)在数组中进行搜索
  $.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);
        })

  $.inArray中,第一个参数是要搜索的元素的位置
  
6) $.trim()
    删除左右两边个空格字符
      
7) 搜索数组
         $(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);
        })
  8) isEmptyObject()
$(function() {
            var obj0 = {};
            var obj1 = { "name": "taoguorong" };
            var strTmp = "obj0是否为空:" + $.isEmptyObject(obj0);
            strTmp += "<br><br>obj1是否为空:" + $.isEmptyObject(obj1);
            $("#divTip").append(strTmp);
        })



  9)$.isPainObject()
        对象是否通过{}或者new Object()创建
   $(function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null";
            var strTmp = "obj0是否为原始对象:" + $.isPlainObject(obj0);
            strTmp += "<br><br>obj1是否为原始对象:" + $.isPlainObject(obj1);
            strTmp += "<br><br>obj2是否为原始对象:" + $.isPlainObject(obj2);
            $("#divTip").append(strTmp);
        })
10)  $.contains()检查两个节点是否包含关系
          $(function() {
            var node0 = document.documentElement;
            var node1 = document.body;
            var strTmp = "对象node0是否包含对象node1:"
            strTmp += $.contains(node0, node1);//检测两者的包含关系
            $("#divTip").append(strTmp);
        })

11) $.param()对数组进行序列化
       $(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);
        })
  输出: arrInfo数组序列化后:id=101&name=tao&sex=0

arrScore数组序列化后:Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3

arrScore序列化解码后:Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3

12) $.extend()函数
       <script type="text/javascript">
        /*------------------------------------------------------------/
        功能:返回两个数中最大值
        参数:数字p1,p2
        返回:最大值的一个数
        示例:$.MaxNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MaxNum": function(p1, p2) {
                    return (p1 > p2) ? p1 : p2;
                }
            });
        })(jQuery);

        /*------------------------------------------------------------/
        功能:返回两个数中最小值
        参数:数字p1,p2
        返回:最小值的一个数
        示例:$.MinNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MinNum": function(p1, p2) {
                    return (p1 > p2) ? p2 : p1;
                }
            });
        })(jQuery);
       
        $(function() {
            var strTmp = "5与6中最大的数是:";
            strTmp += $.MaxNum(5, 6);
            strTmp += "<br><br>7与8中最小的数是:";
            strTmp += $.MinNum(7,;
            $("#divTip").append(strTmp);
        })
    </script>
     $.extend()可以用扩展object
       比如:
          var objname={name:"张三“,sex:"男”};
  var objInfo={name:"李四“,age:30};
  var objLast=$.extend(objname,objInfo);
        objInfo为被合拼的对象,结果为:
  {name:"李四”,sex:"男“,age:30};
  也就是说,如果合拼对象,且存在相同参数名称,则会对应覆盖;

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics