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高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
Express的路由详解
Dec 10 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 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过滤危险html代码
2008/08/18 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
简单说说angular.json文件的使用
2018/10/29 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python构建自定义回调函数详解
2017/06/20 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python调用摄像头的示例代码
2020/09/28 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
五分钟演讲稿
2014/04/30 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
中标通知书格式
2015/04/17 职场文书