`

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};
  也就是说,如果合拼对象,且存在相同参数名称,则会对应覆盖;

分享到:
评论

相关推荐

    分享jQuery插件的学习笔记

    插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循...插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。 引入插件是需

    Front-end-Notes:(持续更新中)前端笔记备份用

    11全版本语法(只看了ES6部分)2020.11.6JQueryJQuery笔记JSON与AJAXJSON与AJAX基础2020.10.26NodeNode.js基础2020.9前端框架分类笔记时间Vue《Vue.js实战》附属笔记2020.9ReactReact16.4快速上手前端工程化分类笔记...

    Java笔记.docx

    (文件打开密码为:123654)此份笔记为本人在达内培训期间根据授课老师所讲及自己的理解所做的笔记,包括了Java的基础知识、常用的工具类、web基础、JQuery、数据库基础、SSM及SpringBoot框架的入门等。

    js学习笔记大全

    函数名(参数列表) // 调用这工具类里面的函数 * c$().函数名(参数列表) // 调用这工具类里面的函数 */ var c$ = window.c$ = function(arg, dom) { // 如果没有参数,则返回 本对象;让程序可以这样写: c$()....

    holemar学习笔记(2011-12-21)

    这是本人多年积累的学习笔记,... jQuery.js Windows\Bat.sh 批处理学习笔记 _util\bat\... 批处理工具 _util\c#\... c#常用函数 _util\ ... java常用函数 _util\js\... js常用函数 _util\python\... python常用函数

    亚信java笔试题-study:学习笔记

    工具类 慕课专题 周刊类 二. API: 1. 总目录 开发中心 综合Bug集合网站 综合搜索 综合API 英文综合API网站 中文综合API网站 英文综合API网站 2. jQuery 3. Ecmascript 4. Js template 5. 弹出层 6. CSS 7. Angularjs...

    java安卓仿微信聊天软件源码-tanchao:个人前端笔记

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

    ExtJs4_笔记.docx

    第一章 ExtJs大比拼JQuery:Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本...

    fe-note:前端笔记

    fe-note 这里记录了我的前端笔记。 Requirements node版本需要在7.6.0或更高 Run npm install npm start 访问 Index 核心 css js dom bom html selector meta svg ...jquery ...dd(模仿黄韬写的工具类)

    Java学习笔记-个人整理的

    {4.8}Collections集合工具类}{86}{section.4.8} {4.9}Comparable与Comparator}{86}{section.4.9} {4.9.1}Comparable}{86}{subsection.4.9.1} {4.9.2}Comparator}{87}{subsection.4.9.2} {4.10}包装类}{87}{...

    亚信java笔试题-note:笔记

    工具类 慕课专题 周报类 ###六. API: ####1. 总目录 开发中心 综合Bug集合网站 综合搜索 综合API 英文综合API网站 ####2. jQuery ####3. Ecmascript ####4. Js template ####5. 弹出层 ####6. CSS ####7. Angularjs ...

    亚信java笔试题-keep-learning:收集跟前端有关的学习资讯

    亚信java笔试题 keep-learning 收集跟前端有关的学习资讯 在继续学习 & 积累,并率先于持续更新。 综合类 综合类 地址 前端知识体系 ...工具类 工具类 地址 前端人的俱乐部 真可以解放你的收藏夹 如何优雅

    java安卓仿微信聊天软件源码-lerningCenter:学习中心

    java安卓仿微信聊天软件源码 微注:在继续学习 & 积累,并率先于持续更新。 综合类 综合类 地址 前端知识体系 ...工具类 工具类 地址 前端人的俱乐部 真可以解放你的收藏夹 如何优雅地使用Sublime Text 新编

    Front-end-tutorial:最全的资源教程-前端涉及的所有知识体系

    - 聂微东前端开发者手册入门类前端入门教程瘳雪峰的Javascript教程jQuery基础教程前端工程师必备的PS技能——切图篇结合个人经历总结的前端入门方法效果类弹出层焦点图轮播特效工具类css sprite 雪碧图制作版本控制...

    亚信java笔试题-tutorial:最全的资源教程-前端涉及的所有知识体系

    亚信java笔试题 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具 慕课专题 地

    java安卓仿微信聊天软件源码-xkDMW.github.mybookMarks:xkDMW.github.mybookMarks

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

    java安卓仿微信聊天软件源码-front_material:front_material

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

    java安卓仿微信聊天软件源码-Front-end-stack:需要学习的前端知识

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

    java安卓仿微信聊天软件源码-book:书

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

    java安卓仿微信聊天软件源码-web:网络

    java安卓仿微信聊天软件源码 综合类 地址 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文...工具类 地址 css sprite 雪碧图制作 版本控制入门 – 搬进 Github Grunt-beginner前端自动化工具

Global site tag (gtag.js) - Google Analytics