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 相关文章推荐
javascript 常用功能总结
Mar 18 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 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
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
常用的javascript function代码
2008/05/23 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
浅析javascript的return语句
2015/12/15 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python实现调度算法代码详解
2017/12/01 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Pygame的程序开始示例代码
2020/05/07 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python 实现端口扫描工具
2020/12/18 Python
Java基础知识面试题
2014/03/25 面试题
大学生自我评价200字(4篇)
2014/09/17 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
部队2015年终工作总结
2015/04/02 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
instantclient客户端 连接oracle数据库
2022/04/26 Oracle