jQuery理解之(二)功能函数

在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()方法遍历

http://www.cnblogs.com/ahthw/p/4232813.html中介绍到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("")方法将元素拆分为一个个字母(关于split()方法参考http://www.cnblogs.com/ahthw/p/4126834.html

iiii搜索数组元素

对于字符串,可以通过indexOf()来搜索特定字符所处的位置(javascript办法可参考http://www.cnblogs.com/ahthw/p/4113280.html),对于数组元素,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")
};

(本节完)

时间: 2024-10-14 07:02:27

jQuery理解之(二)功能函数的相关文章

jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突

1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子 <script type="text/javascript"> var sString = " 1234567890"; sStr

使用jquery.qrcode生成二维码实现微信分享功能

前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquery.qrcode插件生成二维码 jquery.qrcode cdn地址 参见: https://www.bootcdn.cn/jquery.qrcode/ 1.加载 jQuery 和 jquery.qrcode.js: <script src="https://cdn.bootcss.com/

Android RakNet 系列之二 功能介绍

简介 RakNet 已经成功地在Android平台上测试成功.RakNet的文档很多,实现起来很简单,下面对Raknet功能细节进行详细了解. 详情 1.RakNet使用哪些数据结构? 结构文件 描述 DS_BinarySearchTree.h 二叉搜索树,以及AVL平衡二叉搜索树 DS_BPlusTree.h B+树,用于快速查询,删除,和插入 DS_BytePool.h 返回某个大小门限的数据块,减少内存碎片 DS_ByteQueue.h 用于读写字节的队列 DS_Heap.h 堆数据结构体

从零开始学习jQuery (十) jQueryUI常用功能实战

原文:从零开始学习jQuery (十) jQueryUI常用功能实战 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始

jquery效果(二)

jQuery animate() 方法用于创建自定义动画.语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性.可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒.可选的 callback 参数是动画完成后所执行的函数名称. $("button").click(function(){ $("div&q

基于线性表的功能函数大全

顺序表 一:线性表的存储结构 顺序表的顺序存储是指一组地址连续的存储单元依次存储线性表中的各个元素,使得线性表中在逻辑结构中相邻的元素存储在连续的物理存储单元中.采用顺序存储结构存储的线性表通常简称顺序表,可将顺序表归纳为:关系线性化,结点顺序存. 用C语言定义线性表的顺序存储表示 #define MAXSIZE 100 Typedef struct { ElemType elem[MAXSIZE]; int last; } 二:线性表顺序存储结构上的基本运算 (1)查找操作 查找可采用顺序查找

JQuery的一些简单功能

JQuery js的缺点总结 1.入口函数只能有一个,如果出现多个,后面的会覆盖掉前面的 2.代码容错性差,容易出错,出错会导致后面的代码不执行 3.存在浏览器兼容性,比如innerText在火狐浏览器中不起作用 4.DOM操作复杂,实现简单的动画很麻烦 jQuery的两种入口函数: $(document).ready(function(){}); $(function(){}); 对比JavaScript的入口函数与jQuery的入口函数 1.JavaScript的入口函数要等到页面中所有资源

深入理解OOP(二):多态和继承(继承)

本文是深入浅出OOP第二篇,主要说说继承的话题. 深入理解OOP(一):多态和继承(初期绑定和编译时多态) 深入理解OOP(二):多态和继承(继承) 深入理解OOP(三):多态和继承(动态绑定和运行时多态) 深入理解OOP(四):多态和继承(C#中的抽象类) 深入理解OOP(五):C#中的访问修饰符(Public/Private/Protected/Internal/Sealed/Constants/Static and Readonly Fields) 深入理解OOP(六):枚举(实用方法)

04微信公众平台 - 实现【翻译】功能函数,返回一个文本字符串。

一.功能代码函数实现 private function _baiduDic($keyword) { $tranurlaip = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=9peNkh97N6B9GGj9zBke9tGQ&q={$keyword}&from=auto&to=auto"; //翻译URLapi地址 $transtr = file_get_contents($tranurl

05微信公众平台 - 实现【点歌】功能函数,返回一个文本字符串。

一.功能代码函数实现 /* * 功能5:根据歌名点歌功能,输入歌名即可,传入参数为输入对象$postObj */ private function _listenMusic($postObj) { $ret= "<xml> <ToUserName><![CDATA[%s]]></ToUserName> <FromUserName><![CDATA[%s]]></FromUserName> <CreateTi