工具函数(二)

测试操作

在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"));
时间: 2024-10-07 06:07:56

工具函数(二)的相关文章

part4-2 流程控制二(循环结构,while、for循环,列表推导式、生成器推导式,常用工具函数,控制循环结构,4个简单实例)

循环语句在循环条件满足时,可反复执行某一段代码,这段被重复执行的代码称为循环体.在循环体中,需要在合适的时候把循环条件设置为假,从而结束循环:否则循环一直执行下去形成死循环.循环语句通常包含如下4个部分.(1).初始化语句(init_statements):在循环开始前执行,有一条或多条语句,用于完成一些起初始化工作.(2).循环条件(test_expression):一个布尔表达式,决定是否执行循环体.(3).循环体(body_statements):循环的主体,根据循环条件是否允许,这个代码

20151212jquery学习笔记--工具函数

工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性 的函数.它的作用主要是提供比如字符串.数组.对象等操作方面的遍历. 一.字符串操作 在 jQuery 中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数: $.trim(). //$.trim()去掉字符串两边空格 varstr=' jQuery '; alert(str); alert($.trim(str)); 二.数组和对象操作 jQuery 为处理数组和对象提供了一些工具函数,这些函

jQuery 工具函数

工具函数是指直接依附于 jQuery 对象,针对 jQuery  对象本身定义的方法,即全局性的函数.它的作用主要是提供比如字符串.数组.对象等操作方面的遍历. 一.字符串操作 在 jQuery 中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数: $.trim(). //$.trim()去掉字符串两边空格 var str=' jQuery '; alert(str); alert($.trim(str)); 二.数组和对象操作 jQuery 为处理数组和对象提供了一些工具函数,这些

jQuery工具函数

一.$.browser对象属性 属性列表 说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关浏览器则返回true,否则返回false,如火狐 safari    safari相关浏览器则返回true,否则返回false,如safari opera   opera相关浏览器则返回true,否则返回false,如opera msie msie相关浏览器则返回true,否则返回false,如IE,360,搜狗 ver

Drupal常用开发工具(二)——Drupal for Firebug

Drupal 的开发工具有很多,除了<Drupal常用开发工具(一)——Devel模块>中提到的 Devel 模块外,Drupal for Firebug 也是很重要的 Drupal 开发工具. 请注意 Drupal for Firebug 可能与 Theme Developer 模块之间存在冲突 安装 安装 DrupalForFirebug 火狐插件 (本文的所有示例均使用Firefox 版本的Firebug) 安装 Drupal for Firebug 模块 启用 Drupal for F

jQuery实用工具函数总结

一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,param2))遍历数组时:param1为元素序号,param2为元素内容:遍历对象时:param1为元素属性名,param2为元素属性值. 例如:①遍历数组: $(function () { var arrStu = { "张三:": "60", "李四:": "70", "王二:": "80&

从零开始学习jQuery (九) jQuery工具函数

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

numpy 常用工具函数 —— np.bincount/np.average

numpy 常用工具函数 -- np.bincount/np.average numpy 常用api(一) numpy 常用api(二) 一个函数提供 random_state 的关键字参数(keyword parameter):是为了结果的可再现性(reoccurrence)或叫可重复性. 1. np.bincount():统计次数 接口为: numpy.bincount(x, weights=None, minlength=None) 1 尤其适用于计算数据集的标签列(y_train)的分布

Jquery14 工具函数

学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性的函数.它的作用主要是提供比如字符串.数组.对象等操作方面的遍历. 一.字符串操作 在 jQuery 中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数:$.trim(). //$.trim()去掉字符串两边空格 var str = ' jQuery '; alert(str); al