$.extend()使用详解

news/2023/12/8 23:49:25

jQuery为开发插件提拱了两个方法,分别是: 
jQuery.fn.extend(object); 
jQuery.extend(object); 


jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
jQuery.fn.extend(object);给jQuery对象添加方法。

 

举个例子。

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery.fn.myPlugin = function(options) { 
$options = $.extend( { 
html: "no messages", 
css: { 
"color": "red", 
"font-size":"14px" 
}}, 
options); 
return $(this).css({ 
"color": $options.css.color, }).html($options.html); 
} $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 
</script> 
</body> 
</html> 
</span> 

好的,上面你也看到了一点点$.extend()的用法。 

1.合并多个对象。 

这里使用的就是$.extend()的嵌套多个对象的功能。 

所谓嵌套多个对象,有点类似于数组的合并的操作。 

但是这里是对象。举例说明。

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) 
var Css1={size: "10px",style: "oblique"} 
var Css2={size: "12px",style: "oblique",weight: "bolder"} 
$.jQuery.extend(Css1,Css2) 
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 
// Css1 = {size: "12px",style: "oblique",weight: "bolder"} 
</span> 

2.深度嵌套对象。

<span style="font-size:18px;"> jQuery.extend( 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果: 
// => { name: “John”, last: “Resig”, location: { state: “MA” } } 
// 新的更深入的 .extend() 
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 
// => { name: “John”, last: “Resig”, 
// location: { city: “Boston”, state: “MA” } } 
</span> 

3.可以给jQuery添加静态方法。

// 使用特定模块
Layui.prototype.use = function(apps, callback, exports, from) {var that = this;var dir = config.dir = config.dir ? config.dir : getPath; // 获取路径var head = doc.getElementsByTagName('head')[0]; // 获取第一个header// 对传入的 apps 参数进行处理apps = function(){// 传入字符串时, 应转为数组 layui.use('form',...)if(typeof apps === 'string'){return [apps];}// 第一个参数为 function 时, 则自动加载所有内置模块,且执行的回调即为该 function 参数else if (typeof apps === 'function') {callback = apps;return ['app'];}return apps;}(); // 立即执行// 如果页面已经存在 jQuery 1.7+ 库且所定义的模块依赖 jQuery,则不加载内部 jquery 模块if(win.jQuery && jQuery.fn.on) {that.each(apps, function(index, item){// 找到内部 jquery, 并删除if(item === 'jquery'){apps.splice(index, 1);}});layui.jquery = layui.$ = jQuery; // layui 为实例对象}var item = apps[0]; // 获取 apps 数组第一位元素var timeout = 0; // 初始化超时时间为 0exports = exports || [];// 获取静态资源hostconfig.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)||['//'+ location.host +'/'])[0]// 加载完毕function onScriptLoad(e, url){var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/; // 根据平台选择正则表达式// 当前文件已经加载完毕if(e.type === 'load' || (readyRegExp.test(e.currentTarget || e.srcElement).readyState)){config.modules[item] = url; // 存储模块真实路径head.removeChild(node); // 从 head 中移除 node(function poll(){// 判断 timeout > 2500 ?if(++timeout > config.timeout * 1000 / 4) {// 超时报错return error(item + ' is not a valid module', 'error'); // 记得 return, 停止执行}// 判断当前模块状态是否为 true ,为 true 执行 onCallback, 否则轮询config.status[item] ? onCallback() : setTimeout(poll, 4);})()}}// 回调函数function onCallback(){// 向 exports 中推入模块exports.push(layui[item]); // layui 为实例对象中除了 v 属性标识版本号, 其余全为模块apps.length > 1? that.use(apps.slice(1), callback, exports, from): ( typeof callback === 'function' && function(){// 保证文档加载完毕再执行调用if(layui.jquery && typeof layui.jquery === 'function' && from !== 'define' ) {return layui.jquery(function (){callback.apply(layui, exports);});}callback.apply(layui, exports);}());}// 如果引入了聚合板,内置的模块则不必重复加载if(apps.length === 0 || (layui['layui.all'] && modules[item])){return onCallback(), that;}// 获取加载的模块 URL// 如果是内置模块, 则按照 dir 参数拼接模块路径// 如果是扩展模块, 则判断模块路径值是否以 {/} 开头,// 如果路径值是 {/} 开头, 则模块路径即为后面紧跟的字符。// 否则, 则按照 base 参数拼接模块路径var url = (modules[item] ? (dir + 'modules/'): (/^\{\/\}/.test(that.modules[item]) ? '' : (config.base || ''))) + (that.modules[item] || item) + '.js';url = url.replace(/^\{\/\}/, '');// 如果扩展模块(即:非内置模块)对象已经存在,则不必再加载if(!config.modules[item] && layui[item]){config.modules[item] = url; // 并记录起该扩展模块的 url}// 首次加载模块if(!config.modules[item]){var node = doc.createElement('script'); // 创建scriptnode.async = true; // 异步node.charset = 'utf-8'; // 文件格式// 请求的文件后面添加版本号node.src = url + function(){// 是否存在版本var version = config.version === true? (config.v || (new Date()).getTime()): (config.version || '');return version ? ('?v=' + version) : '';}();head.appendChild(node); // 挂载节点// 对 IE 添加监听if(node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera){node.attachEvent('onreadystatechange', function(e){onScriptLoad(e, url);});} else {node.addEventListener('load', function(e){onScriptLoad(e, url);}, false)}config.modules[item] = url;} else { // 非首次加载(function poll(){if(++timeout > config.timeout * 1000 / 4) {return error(item + ' is not a valid module', 'error');};// 已加载到模块中(typeof config.modules[item] === 'string' && config.status[item])? onCallback(): setTimeout(poll, 4);}()); // 轮询 必须是立即执行函数}return that;
}


http://www.ppmy.cn/news/582614.html

相关文章

springboot停车场管理系统-计算机毕设 附源码82061

springboot停车场管理系统 2023年5月 摘要 由于数据库和数据仓库技术的快速发展&#xff0c;停车场管理系统建设越来越向模块化、智能化、自我服务和管理科学化的方向发展。停车场管理系统对处理对象和服务对象&#xff0c;自身的系统结构&#xff0c;处理能力&#xff0c;都将…

【Shell1】shell语法,ssh/build/scp/upgrade,环境变量

文章目录 1.shell语法&#xff1a;shell是用C语言编写的程序&#xff0c;是用户使用Linux的桥梁&#xff0c;硬件>内核(os)>shell>文件系统1.1 变量&#xff1a;readonly定义只读变量&#xff0c;unset删除变量1.2 函数&#xff1a;shell脚本传递的参数中包含空格&…

SpringBoot2概览-开发实用篇

知识点 热部署 概念&#xff1a;项目刚启动时需要完成重启重载&#xff0c;而热部署只要重启即可(即仅加载当前开发者自定义开发的资源&#xff0c;不加载jar资源) 重启&#xff1a;加载自定义开发代码&#xff0c;包含类、页面、配置文件等&#xff0c;加载位置在restart类加载…

最小二乘法的原理及实现

1.最小二乘法的原理及实现 笔记来源于《白话机器学习的数学》 1.1 最小二乘法的原理 预测一个变量 x x x与一个变量 y y y的关系 例如&#xff1a;广告费 x x x与点击量 y y y 用直线拟合数据 1.2 最小二乘法的实现 广告费x和点击量y&#xff0c;找到一条直线表达式&#x…

2023-06-26 monetdb-向量化的硬件基础-cpu管线-分析

摘要: monetdb对于经典的火山模型中的性能瓶颈点做分析后认为, 基于迭代器元组解释执行将造成cpu执行效率的降低, 从而导致火山模型这个执行架构是一个低效的架构。 针对cpu硬件的特点, monetdb设计了X100引擎, 本文分析做出如此设计的硬件基础。 cpu管线: 整体的描述可以参考…

MATLAB 之 可视化图形用户界面设计

这里写目录标题 一、可视化图形用户界面设计1. 图形用户界面设计窗口1.1 图形用户界面设计模板1.2 图形用户界面设计窗口 2. 可视化图形用户界面设计工具1.1 对象属性检查器2.2 菜单编辑器2.3 工具栏编辑器2.4 对齐对象工具2.5 对象浏览器2.6 Tab 键顺序编辑器 3. 可视化图形用…

处理时间的一些办法

export function isToday(data) { // 将当前日期转换为Date对象 var today new Date(); // today.setHours(0, 0, 0, 0); // 获取当前日期的年、月、日 var year today.getFullYear().toString(); var month (today.getMonth() 1).toString().padStart(2, …

佩戴舒适的蓝牙耳机有哪些?公认佩戴舒适性不错的蓝牙耳机推荐

​都2023年了&#xff0c;不会还有人没有一款蓝牙耳机吧&#xff1f;随着蓝牙耳机的增长&#xff0c;越来越多人不知道如何挑选蓝牙耳机了&#xff0c;蓝牙耳机除了音质表现要好之外&#xff0c;还有就是佩戴舒适性不能差&#xff0c;防水性能要有&#xff0c;接下来&#xff0…

centos 7.9离线下载安装vscode,以及插件安装下载

文章目录 一、软件的下载1.采取的方法2.下载相应压缩包3.安装过程4.相关知识 二、插件的安装和下载1.查看vscode的版本号2.查找插件的版本号3.安装vscode插件 三、vscode以及依赖安装包&#xff0c;常用插件百度云&#xff1a; 一、软件的下载 1.采取的方法 从一台联网的cento…

【SA8295P 源码分析】23 - QNX Ethernet MAC、PHY 驱动 之 emac1_config.conf 配置文件解析

【SA8295P 源码分析】23 - QNX Ethernet MAC、PHY 驱动 之 emac1_config.conf 配置文件解析 系列文章汇总见:《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接:《【SA8295P 源码分析】23 - QNX Ethernet MAC、PHY 驱动 之 emac1_config.conf 配置文件解析》 主要参数…

解决USB设备PC不识别问题思路(亲测方案)

前言&#xff1a; 因环境是集控封锁USB端口的&#xff0c;所以刚碰到用户出现此问题&#xff0c;一般都认为是策略封堵拒绝了&#xff0c;但经过后面测试及权限查看是没问题的&#xff0c;所以深究一看&#xff0c;完全是USB设备都没有被PC主机识别的问题。按常规我们一般碰到这…

基于smardaten无代码开发解决光伏电站项目

文章目录 前言一、事故背景二、解决方案三、工具加持四、配置要点解析1、光伏导航菜单搭建2、运行监控组件布局3、员工填报表单创建4、数据接入清洗5、复杂数据展示5、地图大屏组装6、定制页面集成 五、挖掘更多惊喜1、模拟数据生成2、智能分析结果3、草图智能识别4、日期排班设…

小米11pro 参数配置 小米11pro怎么样

小米11 Pro将采用与三星联合共同开发的GN2镜头&#xff0c;这个镜头具备目前行业内最大的底&#xff0c;可实现超强暗光拍摄。在快充技术层面&#xff0c;去年的小米10至尊纪念版首发了120W超级快充&#xff0c;而这次小米11 Pro将有机会开启80W无线充电技术的新时代&#xff0…

历代小米数字系列机型主要参数对比,更新时间2021年3月

历代小米数字系列机型主要参数对比 按年份排序 序型号年份处理器运存存储屏幕摄像头电池特性1小米12011.08QSD82601G4寸245PPI无前摄后800W1930mAh性价比之王为发烧而生2小米22012.08APQ80642G4.3寸342PPI前200W后800W2000mAh四核处理器3小米32013.08骁龙800Tegra 42G5寸441P…

参数估计3

目录 成对数均值差 置信区间 单个正态总体的样本均值差 置信区间 一 成对数均值差参数估计 例 为了检验某种降压药的效果&#xff0c;测试n个病人在服药前后的血压收缩值分别为 : 第i个病人服药前的血压值&#xff0c;第i个病人服药后的血压值 由于个人差异&#xff0c;不…

红米k40和小米10参数对比哪个好 红米K40和小米10的区别

红米K40&#xff1a;搭载6.67英寸的AMOLED屏幕&#xff0c;带来120Hz的屏幕刷新 红米k40预约抢购地址 https://www.xiaomi.com/k40 小米10更多使用评价 https://www.xiaomi.com/10 小米10&#xff1a;采用了一块6.67英寸AMOLED全面屏&#xff0c;主屏分辨率2340x1080像素&…

三极管参数

一 大信号参数&#xff08;hFE&#xff0c;Vce,sat&#xff09; 1.1 直流电流增益&#xff08;hFE&#xff09; 直流电流增益体现了晶体管的直流放大能力&#xff0c;数值上等于Ic与Ib的比值。在设计放大电路时&#xff0c;需要确定静态工作点&#xff0c;就需要知道此参数。…

【Linux 系统编程】Linux背景介绍 及 基本指令详解(一)

文章目录 1. Linux背景1.1 发展史1.2 开源精神1.3 官网1.4 企业应用现状1.5 发行版本1.6 os概念&#xff0c;定位 2. Linux下基本指令2.1 几个常用基本命令演示2.2 某些概念的解释2.3 ls 指令2.4 pwd 指令2.5 cd 指令Linux的目录结构绝对路径与相对路径cd 常用快捷命令 2.6 tou…

【vue2】封装文字过长自动省略部分并且鼠标悬浮显示全部

技术&#xff1a;Ant design vue1.7.8 UI框架、vue2.X 需求:实现文字过长自动省略部分&#xff0c;鼠标悬浮显示全部 效果图&#xff1a; 图一&#xff1a; 图二&#xff1a; 1.封装组件代码&#xff1a; src/components/Ellipsis/index.js 文件下代码 import Ellipsis f…

ROS:话题通信机制详解

目录 ROS&#xff1a;通信机制一、话题通信简介二、话题通信实操&#xff08;C&#xff09;2.1分析2.2发布方代码2.3订阅方代码2.4配置CMakeLists.txt2.5执行2.6注意 三、话题通信实操&#xff08;python&#xff09;3.1分析3.2发布方代码3.3订阅方代码3.4添加可执行权限3.5配置…
最新文章