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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
Javascript 构造函数详解
Oct 22 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
信仰心得体会
2014/09/05 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
会计主管竞聘书
2015/09/15 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
vue 给数组添加新对象并赋值
2022/04/20 Vue.js