-
jQuery实用工具
普通类 -
- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
-
-
利用jQuery标志
写在前面:实用工具函数可以被看做顶层函数(顶层函数,比如alert(),就是省略了前面的 “window.” 而直接使用),不同之处是定义在$实例上,而不是window实例上。要么用于操作除DOM元素以外的javascript对象,要么执行一些非对象相关的操作
检查用户代理
当不得不使用浏览器监测时,jQuery提供的特定标志语法能够协助代码建立代码分支。
$.browser 定义一组标志,用来显示用户代理属于哪一个浏览器家族,标志如下
- msie 微软的IE,则设置为true 使用方法示例: $.browser.msie 如果用户使用的是IE,则这个值为true,否则为false
- mozilla 基于Mozilla的任何浏览器,包括Firefox、Camino和Netscape
- safari 浏览器标识为Safari或基于Safari的任何浏览器,如OmniWeb
- opera 用户代理标识为Opera的浏览器,设置为true
- version 浏览器的呈现引擎的版本号
eg。 <script type="text/javascript">
$(function(){
$('#testButton').click(function(event){
var select = $('#testSubject')[0];
select.add(
new Option('Two and \u00BD','2.5'),
$.browser.msie ? 2 : select.options[2] //用三元运算符根据浏览器的不同采用不同的处理,因为要在第二个和第三个原始元素中插入选项按钮,IE中要求顺序下标,但W#C标准要求第三个现有选项的引用
);
});
});
</script>确定方框模型
通过布尔型的$.boxModel可以知道当前页面使用的是哪一个方框模型。简单的说来,传统方框模型和W3C使用的标准方框模型是不一样的。两者之间的差异在于如何解释width 和height样式上。
- W3C模型中这些值决定元素的内容尺寸,不包含内边距和边框宽度
- 而在传统的方框模型中,height和width则包含了内边框和边框宽度
因此,在需要精细计算的情况下可以通过$.boxModel来确定采用的是哪种模型。
PS:一般情况下,大部分浏览器只支持W3C标准方框模型,而IE能够根据页面的呈现模式(严格/兼容模式)使用对应的方框模型,这取决于页面声明的DOCTTYPE。(页面包含有效的DOCTYPE声明以严格模式呈现,否则采用兼容模式)
检测要用的正确的浮动样式
jQuery提供$.styleFloat用来表示在元素的style属性里的float样式的名称,求值为字符串,供属性名称使用。在IE浏览器中,$.styleFloat的值为styleFloat,在其他浏览器中为cssFloat。
使用 element.style[$.styleFloat] = 'left';
-
使用jQuery和其他库
jQuery使用$作为jQuery的别名,因此每个功能都会用到$,但是其他的库,比如Prototype也使用$名称。
为了防止这个,jQuery提供了$.noConflict() 实用工具函数,这个函数归还$名称的控制权给另一个库,那么页面上就允许其他库与jQuery混用。
这样一来的问题就成了,如何做区分呢?
- 解决办法一:另外使用一个简短的,不会引起冲突的别名 例如var $j=jQuery;
- 解决办法二(多数插件作者使用的):创建一个环境,在那里$名称的作用域被设定为引用jQuery对象。
方法二的习惯用法是: (function($){ /*function body here*/ })(jQuery);
- 其中第一部分(function($){ /*function body here*/ })表明这个函数需要名为$的单个参数,在这个函数体内可以使用$引用任何传递给这个函数的东西。因为参数声明由于任何在全局作用域中的任何同名标识符。
- 第二部分(jQuery)则是将jQuery对象作为匿名参数的实参,因此在函数体内可以使用$引用jQuery对象而不管外部是否被其他库所引用
示例:
var $ = 'Hi';
jQuery(function($){
alert('$='+$);
});
结果与解释: 这个将弹出jQuery函数的定义来。因为我们在这个函数中把程序的第一个参数声明为$,而jQuery函数被jQuery库作为唯一参数传递到所有的就需处理程序中,所以jQuery在函数体中能被$所引用。
-
操作JavaScript对象和集合
修整字符串
$.trim(value) 删除字符串前面和最后的空白字符(包括空格、换页、换行、回车、制表以及垂直制表字符)并返回结果
对属性和集合进行迭代
$.each(container,callback) 对传入的容器每一项进行迭代,为每一项调用传入的回调函数. 如果容器是数组,则为每个元素调用回调函数;如果是对象,则为对象的每个属性调用回调函数。
eg var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
//do something;
});
eg var anObject = {one:1,two:2,three:3};
$.each(anObject,function(name,value){
//do something;
});
对数组进行筛选
$.grep(array,callback,invert) 为传入数组的元素分别执行回调函数,当invert被省略或者为false的时候,如果函数返回值为true则收集到新数组中。如果invert = true,那么回调函数为false的元素被收集 。 callback函数被传入两个参数:当前元素以及当前元素在原始数组中的下标
eg var bigNumbers= $.grep(originalArray, function(value){ return value>100; });
另外,jQuery还提供了更简单的表达方式var bigNumbers= $.grep(originalArray, ‘a>100’); //如果callback参数被指定为字符串,jQuery会自动利用该字符串生成一个回调函数,第一个参数是当前值,i作为当前下标 即 function(a,i){ return a>100;}
对数组进行转换
$.map(array,callback) 迭代传入的数组,为各元素执行回调函数,并把回调函数的返回值收集到新数组。callback传入的两个参数是当前元素以及当前元素在原始数组中的下标
eg var oneBased= $.map([0,1,2,3] , function(value){return value+1}); //可简写为 var oneBased= $.map([0,1,2,3] , 'a'+1);
还有例子是将字符串数组转换为数值型数组
var string = ['1','2','3','4','s','6'];
var values=$.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null : result; //isNaN()方法用来检测结果是不是数值型。因为一旦转换失败返回的是Number.NaN。而这个不等于任何其他值,即使Number.NaN==Number.NaN返回也是false,所以不能用比较运算符
});
从javascript数组上找到更多乐趣
$.inArray(value,array) 返回以传入值在数组里第一次出现时的下标,如果没有,返回-1
$.makeArray(object) 将类数组的对象转换为javascript数组。例如NodeList
$.unique(array) 传入DOM元素数组,返回原始数组中唯一元素所构成的数组
扩展对象
$.extend(target , source1, source2, source3,……,sourceN) //用已传入的source1——sourceN的对象的属性来拓展已传入的target对象,其中,如果存在同名属性,实参列表后部 的源对象优于在前面的源对象
-
动态加载脚本
$.getScript(url,callBack) 向指定的服务器发起GET请求,获取url参数所指定的脚本。如果callback设定了,那么获取成功后调用回调函数。
需要注意的是,在除Safari以外的浏览器中,从脚本动态加载的函数和变量在回调函数内可用,但在Safari中执行则什么都不会发生
-
-
- 标签:
- 使用
- 对象
- 浏览器
- 实用工具
- 39
- var
- 元素
- function
- 数组
- 函数
- jquery
-
学习元评论 (0条)
聪明如你,不妨在这 发表你的看法与心得 ~