zoukankan      html  css  js  c++  java
  • 工具函数(二)

       测试操作

       在jQuery中,数据有着各种类型和状态。有时,我们希望能通过判断数据的类型和状态做相应的操作。jQuery提供了五组测试用的工具函数。

       测试工具函数

    函数名 说明
    $.isArray(obj) 判断是否为数组对象,是返回true
    $.isFunction(obj) 判断是否为函数,是返回true
    $.isEmptyObject(obj) 判断是否为空对象,是返回true
    $.isPlainObject(obj) 判断是否为纯粹对象,是返回true
    $.contains(obj) 判断DOM节点是否含另一个DOM节点,是返回true
    $.type(data) 判断数据类型
    $.isNumeric(data) 判断数据是否为数值 
    $.isWindow(data) 判断数据是否为window对象

       判断是否为数组对象:

    var arr = [1,2,3];
    alert($.isArray(arr)); //true

       判断是否为函数:

    var fn = function() {};
    alert($.isFunction(fn)); //true

       判断是否为空对象:

    var obj = {};
    alert($.isEmptyObject(obj)); //true

       纯粹对象,即由{}或new Object()创造出的对象。

    var obj = window;    
    alert($.isPlainObject(obj)); //false
    
    obj = {};
    alert($.isPlainObject(obj)); //true
    
    obj = new Object();
    alert($.isPlainObject(obj)); //true

       注意:如果使用new Object('name');传递参数后,返回类型已不是Object,而是字符串,所以就不是纯粹的原始对象了。

    var obj = new Object("name");
    alert(obj); //name
    alert($.isPlainObject(obj)); //fasle;

       判断第一个DOM节点是否含有第二个DOM节点:

       工具函数.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>工具函数</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="box">
            <span id="pox"></span>
        </div>
    
    </body>
    </html>
    alert($.contains($("#box").get(0),$("#pox").get(0))); //true

       $.type()检测数据类型:

    var arr = [1,2,3];
    alert($.type(arr)); //array
    
    var obj = {};
    alert($.type(obj)); //object

    alert($.type(window)); //objec

       $.isNumeric()检测数据是否为数值:

    var num = 1.23;
    alert($.isNumeric(num)); //true

       $.isWindow()检测数据对象是否为window对象:

    var win = window;
    alert($.isWindow(win)); //true

       URL操作

       URL地址操作,在之前的Ajax章节其实已经讲到过,只有一个方法:$.param(),将对象的键值对转化为URL键值对字符串形式。

    var obj = {
        name:"Lee",
        age:100
    };
    alert($.param(obj)); //name=Lee&age=100

       浏览器检测

       由于在早期的浏览器中,分IE和W3C浏览器。而IE6/7/8使用的覆盖率还很高,所以早期的jQuery提供了$.browser工具对象,而现在的jQuery已经废弃删除了这个工具对象,
    如果还想使用这个对象来获取浏览器版本型号的信息,可以使用兼容插件——jquery-migrate-1.2.1.js

       $.browser对象属性

    属性 说明
    webkit 判断webkit浏览器,如果是则为true
    mozilla 判断mozilla浏览器,如果是则为true
    safari 判断safari浏览器,如果是则为true
    opera 判断opera浏览器,如果是则为true
    maie 判断IE浏览器,如果是则为true
    version 获取浏览器版本号

       获取火狐浏览器和版本号:

    alert($.browser.mozilla + ":" + $.browser.version);

       注意:火狐采用的是mozilla引擎,一般就是指火狐;而谷歌Chrome采用的引擎是webkit,一般验证Chrome就用webkit。

       还有一种浏览器检测,是对浏览器内容的检测。比如:W3C的透明度为opacity,而IE的透明度为alpha,这个对象是$.support。

       $.support对象部分属性

    属性名 说明
    hrefNormalized 如果浏览器从getAttribute("href")返回的是原封不动的结果,则返回true。在IE中会返回false,因为他的URLs已经常规化了
    htmlSerialize 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接,则返回true,目前IE中返回false
    leadingWhitespace 如果在使用innerHTML的时候浏览器会保持前导空白字符,则返回true,目前在IE 6-8中返回false
    objectAll 如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素,则为true,目前在IE 7中为false
    opacity 如果浏览器能适当解释透明度样式属性,则返回true,目前在IE中返回false,因为他用alpha滤镜代替
    scriptEval 使用appendChild/createTextNode方法插入脚本代码时,浏览器是否执行脚本,目前在IE中返回 false,IE使用.text 方法插入脚本代码以执行
    style 如果getAttribute("style")返回元素的行内样式,则为true。目前IE中为false,因为他用cssText代替
    tbody 如果浏览器允许table元素不包含tbody元素,则返回true。目前在IE中会返回false,他会自动插入缺失的tbody
    ajax 如果浏览器支持ajax操作,返回true

       $.support.ajax判断是否能创建ajax:

    alert($.support.ajax); //true

       工具函数.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>工具函数</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="box">
            <span id="pox"></span>
        </div>
    
    </body>
    </html>

       style.css:

    #box {
        width: 100px;
        height: 100px;
        background: red;
        /*opacity: 0.5;
        filter: alpha(opacity=50);*/
    }

       $.support.opacity 设置不同浏览器的透明度:

    if($.support.opacity == true) {
        $("#box").css("opacity", 0.5);
    } else {
        $("#box").css("filter", "alpha(opacity=50)");
    }

       注意:由于jQuery越来越放弃低端的浏览器,所以检测功能在未来使用频率也越来越低。所以,$.brower已被废弃删除,而$.support.boxModel检测W3C或IE盒子也被删除,并且http://api.jquery.com/jQuery.support/官网也不提供属性列表和解释,给出一个Modernizr第三方小工具来辅组检测。

       其他操作

       jQuery提供了一个预备绑定函数上下文的工具函数:$.proxy()。这个方法,可以解决诸如外部事件触发调用对象方法时this的指向问题。

       以上工具函数.html和style.css代码不变。

    var obj = {
        name:"Lee",
        test:function() {
            alert(this.name); //this就指代obj
        }
    };
    obj.test(); //Lee 

       外部事件触发,调用对象方法时,this到底指代谁?

    $("#box").click(obj.test); //undefined?

       此时this到底指代谁呢?

    var obj = {
        name:"Lee",
        test:function() {
            alert(this); //[object HTMLDivElement]
            alert(this.name);
        }
    };
    $("#box").click(obj.test); //undefined

       发现此时this竟然指代HTMLDivElement!所以我们通常的解决办法为:

    var obj = {
        name:"Lee",
        test:function() {
            //alert(this); //[object HTMLDivElement]
            var _this = obj;
          alert(_this.name);
        }
    };
    $("#box").click(obj.test); //Lee

       而jQuery提供了一个预备绑定函数上下文的工具函数:$.proxy()。

    var obj = {
        name:"Lee",
        test:function() {
            alert(this.name);
        }
    };
    $("#box").click($.proxy(obj,"test"));
  • 相关阅读:
    采购订单打印并预览PDF
    KiCad 如何在原理图添加元件时看到 PCB 封装?
    KiCad 开源元件库收集 (2019-05-31)
    KiCad 的 Digikey 元件库
    MySQL 出现 Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
    AD10 没有原理图是否可以修改 PCB
    KiCad 如何画板框
    当 1117 遇到 MLCC 后
    RequireJS 学习资料收集
    MEMS 硅麦资料收集
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5437204.html
Copyright © 2011-2022 走看看