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 相关文章推荐
JS文本框不能输入空格验证方法
Mar 19 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
javascript简易画板开发
Apr 12 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
JS如何生成动态列表
Sep 22 Javascript
原生js实现弹幕效果
Nov 29 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
提升PHP执行速度全攻略
2006/10/09 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
js验证表单第二部分
2006/11/25 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
简单实现js鼠标跟随效果
2020/08/02 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
python去除文件中重复的行实例
2018/06/29 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
java程序员面试交流
2012/11/29 面试题
出纳的岗位职责
2013/11/09 职场文书
集体婚礼证婚词
2014/01/13 职场文书
股东协议书
2014/04/14 职场文书
端午节演讲稿
2014/05/23 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
python中 Flask Web 表单的使用方法
2022/05/20 Python