开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

读<jQuery 权威指南>[6]--实用工具函数

简介:
+关注继续查看

官方地址:http://api.jquery.com/category/utilities/

一、数组和对象操作

1. $.each——遍历

$.each(obj,function(param1,param2))
遍历数组时:param1为元素序号,param2为元素内容;
遍历对象时:param1为元素属性名,param2为元素属性值。

例如:
①遍历数组:
 

复制代码
$(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);
        })
复制代码

②遍历对象:
  

复制代码
<script type="text/javascript">
        $(function() {
            var strContent = "<li class='title'>属性:值</li>";
            $.each($.get, function(Property, Value) {
                strContent += "<li>" + Property + ":" + Value + "</li>";
            })
            $("ul").append(strContent);
        })
    </script >
复制代码

2.$.grep——筛选数组

$.grep(array,function(element,index)):array为要筛选的数组,element为数组中的元素,index为元素在数组中的序号(0起)。

复制代码
<script type="text/javascript">
        $(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);
        },true)
    </script >
复制代码

   执行结果:

筛选前数据:2,8,3,7,4,9,3,10,9,7,21
筛选后数据:8,7,9,10

3.$.map——数据变更

$.map(array,function(element,index)):array为要筛选的数组,element为数组中的元素,index为元素在数组中的序号

复制代码
<script type="text/javascript">
        $(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);
        })
    </script>
复制代码

执行结果:

变更前数据:2,8,3,7,4,9,3,10,9,7,21
变更后数据:9,8,10,11

4.$.inArray()——查找数组元素

$.inArray(value,array):查找元素在数组中的元素,如果不存在则返回-1。

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

执行结果:

待搜索数据:4,21,2,12,5
12搜索结果:3

二、浏览器检测

$.browser对象,可以处理浏览器相关检测。
注意:该对象在jquery1.4.2添加,但是1.9中已经删除。

image

$.support.boxModel检测页面是否为标准盒子模型。经测试该对象在1.10中测试也已经去掉。

三、字符串操作

   $.trim():去掉字符串左右两侧的空格。这是jquery核心库中唯一针对字符串处理的函数。

四、测试函数

image

1.$.isEmptyObject(obj):检测参数是否为空对象。

复制代码
<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = { "name" : "taoguorong" };
            var obj2 = [];
            var obj3 = [1];
            var obj4;
            var strTmp = "obj0是否为空:" + $.isEmptyObject(obj0);           //true
            strTmp += "<br><br>obj1是否为空:" + $.isEmptyObject(obj1);//false
            strTmp += "<br><br>obj2是否为空:" + $.isEmptyObject(obj2);//true
            strTmp += "<br><br>obj3是否为空:" + $.isEmptyObject(obj3);//false
            strTmp += "<br><br>obj4是否为空:" + $.isEmptyObject(obj4);//true
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码

2.$.isPlainObject(obj):检测参数是否为原始对象,即通过{}或者new Object()创建。

复制代码
<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null" ;
            var obj3 = { "a" : 1 };
            var obj4 = new Object(1);
            var obj5 = 1;
            var strTmp = "obj0是否为原始对象:" + $.isPlainObject(obj0);           //true
            strTmp += "<br><br>obj1是否为原始对象:" + $.isPlainObject(obj1);//true
            strTmp += "<br><br>obj2是否为原始对象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj3是否为原始对象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj4是否为原始对象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj5是否为原始对象:" + $.isPlainObject(obj2);//false
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码

说明:当new Object()方法带参数时,不是原始对象。

3.$.contain(container,contained):两个参数均为dom对象,如果container对象包含contained对象则返回true,否则返回false。

五、URL操作

$.param(obj):其中obj为数组或者jquery对象,该方法将其序列化为键值对。

复制代码
<script type="text/javascript">
        $( 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; //结果:id=101&name=tao&sex=0
            strTmp += "<br><br><b>arrScore数组序列化后</b>:" ;
            strTmp += arrNewScore;//结果:Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3
            strTmp += "<br><br><b>arrScore序列化解码后</b>:" ;
            strTmp += arrDecScore;//结果:Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3
            //显示在页面中
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码

六、$.extend——扩展工具函数

扩展

复制代码
; (function ($) {
            $.extend({
                "test": function (p1, p2) {
                    return p1 && p2;
                }
            })
        })(jQuery);
复制代码


调用
$.test(true, true);

七、$.proxy——改变事件函数的作用域

两种格式:
$.proxy(function,scope):function为指定的事件方法,scope为事件函数设置作用域的对象。
$.proxy(scope,functionName):scope为函数的作用域对象,functionName为函数名,它必须是scope对象的一个属性。

复制代码
<script type="text/javascript">
        $( function() {
            var objMyInfo = {
              name: "小张", //设置对象name属性
                sex: "男", //设置对象sex属性
                ShowEvent: function() { //设置执行的事件
                    $( "#divShow").html("姓名:" +
                     this.name + "<br><br>性别:" +
                     this.sex);
                }
            }
            $( "#Button1").bind("click" ,objMyInfo.ShowEvent);//结果:姓名:"",性别:undefined
            $( "#Button1").bind("click" ,$.proxy(objMyInfo, "ShowEvent")); //通过proxy函数绑定设置的事件。结果:姓名:小张,性别:男。
            $( "#Button1").bind("click" , $.proxy(objMyInfo.ShowEvent, objMyInfo));//通过proxy函数绑定设置的事件。结果:姓名:小张,性别:男。
        })
    </script >
复制代码

八、实例——检测对象类型

 

 实例


    本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/p/3541429.html,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
过去几个月出炉的30款最喜欢的 jQuery 插件
  在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件。为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版插件等等。
952 0
【精心挑选】8款用于布局和用户界面增强的 jQuery 插件
  有时,你可能有一个项目要求独特的布局或用户界面的要求,单独使用 CSS 无法实现的,像这类项目就需要 JavaScript 来实现,因此,这篇文章中收集了一组优秀的 jQuery 插件,可以帮助你完成一些奇妙的布局和界面效果。
1072 0
Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
  今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注我的后续博文。
1261 0
Swipebox – 用于触屏设备的精美 jQuery Lightbox 插件
  Swipebox 是一款可触摸的 jQuery 灯箱效果插件,可用于桌面,移动和平板电脑。它移动设备支持滑动手势导航,桌面电脑上可以用键盘导航,不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制。
885 0
Unslider – 轻量的响应式 jQuery 内容滑块插件
  Unslider 是一款非常轻量的 jQuery 插件(压缩后只有 1KB),能够用于任何 HTML 内容的滑动。可以响应容器的大小变化,自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其支持触屏设备的滑动功能。
972 0
jPanelMenu – 创建面板风格菜单的 jQuery 插件
  jPanelMenu 是一款用于创建面板风格的 jQuery 菜单插件。这种风格在移动版的 Facebook 和 Google 以及众多的原生 iPhone 应用中很常见。在支持的设备上使用硬件加速的 CSS3 过渡来实现平滑的动画效果,对于支持的浏览器,使用 jQuery 动画引擎作为降级方案。
799 0
Spoiler Alert – 实现内容模糊隐藏效果的 jQuery 插件
  Spoiler Alert 是一款非常好玩的 jQuery 小插件,可以在您的网站上实现内容模糊隐藏效果。鼠标悬停的时候会有提示,点击一下就可以看到原始的内容了。   我能想到的最好的应用场景是在线测验,先把答案隐藏,等答完题后点击可以核对答案。
872 0
2012年最有用的50款 jQuery 插件集锦——《表单篇》
  这篇文章继续向大家分享一批实用的 jQuery 插件,今天带来的是网站项目中最常用的表单插件。这是一个系列的文章,将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注。
1020 0
【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件
  Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的20款优秀 jQuery 手风琴效果插件。
1528 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载