jQuery功能函数详解


Posted in Javascript onFebruary 01, 2015

在javascript编程中,开发者通常需要编写很多小程序来实现一些特定的功能。例如浏览器检测,字符串处理、数组的编辑等。jQuery对这些常用的程序进行了总结,提供了很多实用的函数。

1.检测浏览器。

jQuery通过$.browser对象获取浏览器信息。

属性 说明
msie 如果是ie为true,否则为false
mozilla 如果是mozilla相关的浏览器为true,否则为false
safari 如果是Safari浏览器为true,否则为false
poera 如果是opera浏览器为true,否则为false
version 浏览器的版本号
在使用时,开发者可以直接调用这些属性来获取浏览器属性。如下:

        <script type="text/javascript">

            $(function() {

                function detect() {

                    if ($.browser.msie)

                        return "IE";

                    if ($.browser.mozilla)

                        return "Mozilla";

                    if ($.browser.safari)

                        return "Safari";

                    if ($.browser.opera)

                        return "Opera";

                }

                var sBrowser = detect();

                document.write("您的浏览器是:" + sBrowser + "<br>版本为:" + $.browser.version)
            });

        </script>

2.盒子模型

在jQuery中提供了$.boxModel对象来检测目前所遵循的盒子模型。它是一个布尔值,当为true时,表示遵循w3c标准盒子模型,如果false则为ie的盒子模型

    var sBox = $.boxModel ? "标准W3C" : "IE";
                document.write("您的页面目前支持:" + sBox + "盒子模型");
3.处理javascript对象。

在javascript编程中,可以说一切变量都是对象,例如字符串,日期和数值等。

jQuery提供了一些编辑的方法来处理相关的对象,例如$.trim()函数(首尾去空格) 函数就是其中之一

i.使用$each()方法遍历

前文介绍到each()方法,用于选择器的中的元素遍历,同样对于javascript的数组和对象,可以使用$.each()方法进行遍历。

$.each(object,fn);
其中,object为需要遍历的对象,fn为object中每个元素都执行的函数,其中函数fn可以接受两个参数,第一个参数为数组元素的序号或者是对象的属性。第二个参数为元素或者属性的值。

例子:用$.each()函数遍历数组和对象

<script type="text/javascript">

            var aArray = ["one", "two", "three", "four", "five"];

            $.each(aArray, function(iNum, value) {

                //征对数组

                document.write("序号" + iNum + "值" + value + "<br>");

            });

            var oObj = {

                one: 1,

                two: 2,

                three: 3,

                four: 4,

                five: 5

            };

            $.each(oObj, function(pro, value) {

                //征对对象

                document.write("属性" + pro + "值" + value + "<br>")

            });

        </script>

从上面的例子可以看到,$.each()对遍历数组和对象都十分方便,例如对未知的属性$.browser,使用$.each进行遍历

$.each($.browser, function(iNum, value) {
                //征对数组
                document.write("属性" + iNum + "值" + value + "<br>");
            });
得值:

属性chrome值true
属性version值39.0.2171.99
属性webkit值true
ii.过滤数据

对于数组中的数据,很多时候开发者需要对其进行筛选,如果使用纯javascript,往往需for循环进行逐一检查。jQuery提供了$.grep()方法。能够便捷的过滤数组的数据。

其语法如下:

$.grep(Array,fn,[invert])
其中,array是需要过滤的数组对象名称,fn为过滤函数,对数组中的每个对象,如果返回true则保留,否则去除。可选的invert为布尔值,如果设置为true.则函数fn取反,满足条件的被去除。

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];

            var aResult = $.grep(aArray, function(value) {

                return value >= 4;

            });         

            document.write(aResult.join());

首先定义了数组aArray,然后用$.grep()方法将值大于等于4挑选出来得到新的数组

例子2,过滤数组的高级方法。

    <script type="text/javascript">

            var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];

            var aResult = $.grep(aArray, function(value, index) {

                //元素的值和value和序号同时判断

                return (value >= 4 && index > 3);

            });
            document.write(aResult.join());

        </script>

iii转化数组

很多时候开发者希望某个数组中的元素能够统一的转化,例如将所有的元素都乘以2.虽然在javascript中例如for循环可以实现,但是jQuery提供了更为便利的$.map()方法。这个方法如下

$.map(array,fn)
其中,array为要转化的数组,fn为转化函数,对数组中的每一项都执行,该函数同样可以接受两个函数,1个参数为元素的值。2个参数为元素的序号,是可选参数。

<script type="text/javascript">

            $(function() {

                var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];

                $("p:eq(0)").text(aArray.join());

                aArray = $.map(aArray, function(value, index) {

                    //将数组转化为大写并添加了序号

                    return (value.toUpperCase() + index);

                });

                $("p:eq(1)").text(aArray.join());
                cArray = $.map(aArray, function(value) {

                    return value + value;

                });

                $("p:eq(2)").text(cArray.join());

            });

        </script>

        <p></p>

        <p></p>

        <p></p>

执行结果

a,b,c,d,e,f,g,h,i

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8
使用$.map()函数进行转移后,数组长度不一定与原来的数组相同。可以通过设置null来删除数组的元素。

<script type="text/javascript">

            $(function() {

                var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];

                $("p:eq(0)").text(aArray.join());

                $("p:eq(1)").text("aArray长度:" + aArray.length + "值:" + aArray.join());

                cArray =$.map(aArray,function(value){

                    //比1大的+1后返回,否则通过设置为null将其删除

                    return value>1?value+1:null;

                });

                $("p:eq(2)").text("cArray长度:" + cArray.length + "值:" + cArray.join());

            });

        </script>

        <p></p>

        <p></p>

        <p></p>

除了删除元素外,$.map转化数组时同样可以增加数组元素。

    <script type="text/javascript">

            $(function() {

                var aArray = ["one", "two", "three", "four", "five"];

                $("p:eq(0)").text(aArray.join());

                cArray =$.map(aArray,function(value){

                    return value.split("");

                });

                $("p:eq(1)").text("cArray长度:" + cArray.length + "值:" + cArray.join());

            });

        </script>

        <p></p>

        <p></p>

执行结果

one,two,three,four,five

cArray长度:19值:o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e
以上代码在$.map转化过程中,split("")方法将元素拆分为一个个字母

iiii搜索数组元素

对于字符串,可以通过indexOf()来搜索特定字符所处的位置,对于数组元素,javascript没有提供类似的方法。在jQ中,$.inArray()函数可以很好的数组元素的搜索功能。语法如下:

$.inArray(value,array)
其中,value为希望查找的对象,array为数组本身,如果找到了则返回第一个匹配元素在数组的位置。如果没有则返回-1.

    <script type="text/javascript">

            $(function() {

                var aArray = ["one", "two", "three", "four", "five"];

                var cx1 = $.inArray("two", aArray);

                var cx2 = $.inArray("www", aArray);

                $("p:eq(0)").text(cx1);

                $("p:eq(1)").text(cx2);

            });

        </script>

        <p></p>

        <p></p>

4.获取外部代码

在一些较大工程中,开发者将不同的js放在不同的js文件中,有时根据补贴的需求加载不同的代码。jQuery提供了$.getScript()实现外边的代码加载。使用方法如:

$.getScript(url,[callback])
其中,url为外部资源的地址,可以是相对的,也可以是绝对的地址。callback为加载成功后的回调函数,可选。

<script type="text/javascript">

            $(function() {

                $("p:eq(0)").click(function() {

                    $.getScript("1.js");

                });

                $("p:eq(1)").click(function() {

                    textfun();

                });

            });

        </script>

        <p>点击1</p>

        <p>点击2</p>

其中1.js代码为

alert("加载ok!")

function textfun(){

    alert("testfun")

};
Javascript 相关文章推荐
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
js点击选择文本的方法
Feb 09 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
js实现tab切换效果
Feb 16 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
jQuery动画与特效详解
Feb 01 #Javascript
jquery制作 随机弹跳的小球特效
Feb 01 #Javascript
jQuery实现单击和鼠标感应事件
Feb 01 #Javascript
jquery制作LED 时钟特效
Feb 01 #Javascript
thinkphp 表名 大小写 窍门
Feb 01 #Javascript
javascript实现带节日和农历的日历特效
Feb 01 #Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
You might like
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python二进制文件的转译详解
2019/07/03 Python
python zip()函数使用方法解析
2019/10/31 Python
python实现超市商品销售管理系统
2019/11/22 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python3 集合set入门基础
2020/02/10 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
高中体育教学反思
2014/01/24 职场文书
教学器材管理制度
2014/01/26 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
2014年新生军训方案
2014/05/01 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
北大自主招生自荐信
2015/03/04 职场文书
工作年限证明模板
2015/06/15 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers