jQuery 工具函数学习资料


Posted in Javascript onApril 29, 2010
  • URL
  • 字符串操作
  • 数组和对象操作
  • 测试操作
  • 浏览器

1:URL操作:

$.param(obj)

返回 :string;

说明:将jquery对象按照name/value 或者key/value序列化为URL参数,用&连接。

示例:

var obj ={name:zh,age:20};
alert(jQuery.param(obj));
//alert "name=zh&age=20";
 

2:字符串操作:

jQuery.trim(str)

返回:string;

说明:去掉字符串首尾空格。

示例:

alert($.trim(" 123 "));
//alert "123";

3:数组和对象操作:

(1) :

&.each(obj,callback)

说明:

通用例遍方法,可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。

回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

示例:

var a =[0,1,2,3,4,5];
$.each(a,function(i,n){document.write(""+i+" and " +n +"<br/>");});

//result:

/*0 and 0
1 and 1
2 and 2
3 and 3
4 and 4
5 and 5I*/

 

(2):

$.extend(obj,default,option)

说明:

在开发插件的时候最常用此函数函数来处理options.

下面是fancybox插件获取options的代码:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

上面的代码target是一个空对象, 将默认设置defaults作为第一个对象,  将用户传入的设置setting合并到default上,  setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

var empty = {} 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);
/*result:
settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }*/

//target参数要传递一个空对象是因为target的值最后将被改变.比如:

var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(defaults, options);

上面的代码将defaults作为target参数,  虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.

(3):筛选

jQuery.grep( array, callback, [invert] )

返回值: Array

说明:

使用过滤函数过滤数组元素。

此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

讲解:

默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.

下面的示例演示如何过滤数组中索引小于 0 的元素:

$.grep( [0,1,2], function(n,i){ 
return n > 0; 
});

//results:[1,2]

 

(4).转换

jQuery.map( array, callback )

返回值:Array

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

示例:

var arr = [ "a", "b", "c", "d", "e" ] ;

$("div").text(arr.join(", "));

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });

$("p").text(arr.join(", "));

arr = jQuery.map(arr, function (a) { return a + a; });

alert(arr.join(", "));

//alert  A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) , jQuery.inArray( value, array ) ,jQuery.merge( first, second ) ,

jQuery.unique( array ) 就不再一一介绍了,

还有JavaScript的join()和split()方法也很重要。

4:测试操作:

(1):

$.isFunction(fn)

返回:Boolean;

说明:测试是否为函数;

示例:

var fn =function(){};

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

返回:Boolean;

说明:测试是否为数组:

示例:略;

(3):

JavaScript只带的 isNan()和isFinite():非数字和无穷大;

 

5:浏览器对象:

 

jQuery的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码.  但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.

jQuery提供了下列属性用于获取浏览器特性:

jQuery.support 1.3后版本新增
jQuery.browser 已废除
jQuery.browser.version 已废除
jQuery.boxModel 已废除

$.support:

jQuery 1.3 新增。一组用于展示不同浏览器各自特性和bug的属性集合。

jQuery提供了一系列属性,你也可以自由增加你自己的属性。其中许多属性是很低级的,所以很难说他们能否在日新月异的发展中一直保持有效,但这这些主要用于插件和内核开发者。

所有这些支持的属性值都通过特性检测来实现,而不是用任何浏览器检测。以下有一些非常棒的资源用于解释这些特性检测是如何工作的:

  • http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
  • http://yura.thinkweb2.com/cft/
  • http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

jQuery.support主要包括以下测试:

boxModel: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的,则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前,这个值是null。

cssFloat: 如果用cssFloat来访问CSS的float的值,则返回true。目前在IE中会返回false,他用styleFloat代替。

hrefNormalized: 如果浏览器从getAttribute("href")返回的是原封不动的结果,则返回true。在IE中会返回false,因为他的URLs已经常规化了。

htmlSerialize: 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接,则返回true,目前IE中返回false。

leadingWhitespace: 如果在使用innerHTML的时候浏览器会保持前导空白字符,则返回true,目前在IE 6-8中返回false。

noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制,则返回true,目前在IE中返回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。

Javascript 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 #Javascript
比Jquery的document.ready更快的方法
Apr 28 #Javascript
ExtJS Store的数据访问与更新问题
Apr 28 #Javascript
JS 事件绑定函数代码
Apr 28 #Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 #Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 #Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python os模块简单应用示例
2019/05/23 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
如何写一个自定义标签
2012/12/28 面试题
运动会通讯稿200字
2014/02/16 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
校长个人总结
2015/03/03 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书