0

0

jQuery之工具函数

巴扎黑

巴扎黑

发布时间:2017-07-08 13:08:11

|

1098人浏览过

|

来源于php中文网

原创

  jquery为我们提供了操作数组和对象的工具函数,方便和简化了我们对它们的操作。今天我们就进入jquery的工具函数的复习。

  jQuery给我们提供了主要有5类工具函数:

  • 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 +"
");});

//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

说明:

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

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

TURF(开源)权限管理系统
TURF(开源)权限管理系统

TURF(开源)权限定制管理系统(以下简称“TURF系统”),是蓝水工作室推出的一套基于软件边界设计理念研发的具有可定制性的权限管理系统。TURF系统充分考虑了易用性,将配置、设定等操作进行了图形化设计,完全在web界面实现,程序员只需在所要控制的程序中简单调用一个函数,即可实现严格的程序权限管控,管控力度除可达到文件级别外,还可达到代码级别,即可精确控制到

下载

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

示例:

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

$("p").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。

  本博客中同类文章还有,请见:我jQuery系列之目录汇总

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

16

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

23

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

75

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

95

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

218

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

420

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

168

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

222

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

33

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 7.3万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 12.4万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号