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 删除字符串空格多种方法小结
Oct 24 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jquery延迟对象解析
Oct 26 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php上传图片类及用法示例
2016/05/11 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python实现猜拳小游戏
2020/04/05 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python中bisect的使用方法
2019/12/31 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
电子专业求职信
2014/06/19 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
python字典的元素访问实例详解
2021/07/21 Python