jQuery中开发插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
table{
border-collapse: collapse;
}
td,tr,th{
border:1px solid red;
}
.one{
background-color: rebeccapurple;
font-weight: bold;
color:white;
}
.two{
background-color: cadetblue;
color: black;
}
</style>
</head>
<body> <script>
//添加全局函数需要以新方法来扩展jQuery对象
(function($){
//要向jQuery的命名控件中添加一个函数，
//只需要将这个新函数指定为jQuery对象的一个属性即可
$.sum=function(array){
var total=0;
$.each(array,function(index,value){
value=$.trim(value);
value=parseFloat(value)||0;
total+=value;
});
return total;
};
$.average=function(array){
if($.isArray(array)){
return $.sum(array)/array.length;
}
return '';
};
//通过$.extend()就可以给全局jQuery对象添加属性，
//如果有相同的属性，会替换原来属性
$.extend({
sum:function(array){
var total=0;
$.each(array,function(index,value){
value=$.trim(value);
value=parseFloat(value)||0;
total+=value;
});
return total;
},
average:function(array){
if($.isArray(array)){
return $.sum(array)/array.length;
}
return '';
}
}); //其他jQuery插件也可能定义了相同的函数名，
//为了避免冲突，把属于一个插件的全局函数都封装到一个对象中
$.mathUtils={
sum:function(array){
var total=0;
$.each(array,function(index,value){
value=$.trim(value);
value=parseFloat(value)||0;
total+=value;
});
return total;
},
average:function(array){
if($.isArray(array)){
return $.sum(array)/array.length;
}
return '';
}
}
})(jQuery); $(document).ready(function(){
var $inventory=$('#inventory tbody');
var quantities=$inventory.find('td:nth-child(2)').map(function(index,qty){
console.log(index);
console.log(qty);
return $(qty).text();
}).get();
console.log(quantities);
var prices=$inventory.find('td:nth-child(3)').map(function(index,pr){
return $(pr).text();
}).get();
var sum1=$.sum(quantities);
var sum2=$.sum(prices);
var sum1=$.mathUtils.sum(quantities);
var sum2=$.mathUtils.sum(prices);
$('#sum').find('td:nth-child(2)').text(sum1);
$('#sum').find('td:nth-child(3)').text(sum2);
console.log($.average(quantities));
$('#average').find('td:nth-child(2)').text($.average(quantities));
$('#average').find('td:nth-child(3)').text($.average(prices).toFixed(2)); });
//添加jQuery对象方法，扩展的却是jQuery.fn对象，即jQuery.prototype
// jQuery.fn.myMethod=function(){
// alert("Nothing happens");
// }
// $(document).myMethod();
//新方法接受两个类名，每次调用更换应用于每个元素的类，
(function($){
//jQuery的选择符表达式可能会匹配0~n个元素。
$.fn.swapClass=function(class1,class2){
//object对象数组调用hasClass()只会检查匹配的第一个元素
//在任何插件内部，this对象引用的都是当前jQuery对象
if(this.hasClass(class1)){
this.removeClass(class1).addClass(class2);
}else if(this.hasClass(class2)){
this.removeClass(class2).addClass(class1);
}
};
$.fn.swapClass=function(class1,class2){
//object对象数组调用hasClass()只会检查匹配的第一个元素
//在任何插件内部，this引用的都是当前jQuery对象
//在对象方法体内，this引用的是一个jQuery对象
//.each（）会执行隐式迭代
//使用连缀方法
return this.each(function(){
//在.each方法中，this引用的则是一个DOM元素
$element=$(this);
if($element.hasClass(class1)){
$element.removeClass(class1).addClass(class2);
}else if($element.hasClass(class2)){
$element.removeClass(class2).addClass(class1);
}
}) };
})(jQuery);
$(document).ready(function(){
$('table').click(function(){
//这里的$('tr')为jQuery.fn.init {0: tr.one11, 1: tr#sum.two, 2: tr#average, 3: tr, 4: tr, 5: tr, length: 6, prevObject: j…y.fn.init}
console.log($('tr'));
$('tr').swapClass('one','two');
});
});
//提供灵活的方法参数
// (function($){
// $.fn.shadow=function(){
// return this.each(function(){
// var $originalElement=$(this);
// for(var i=0;i<5;i++){
// $originalElement.clone()
// .css({
// position:'absolute',
// left:$originalElement.offset().left+i,
// top:$originalElement.offset().top+i,
// margin:0,
// zIndex:-1,
// opacity:0.1
// })
// .appendTo('body');
// }
// })
// }
// })(jQuery);
// $(document).ready(function(){
// $('h1').shadow();
// });
(function($){
$.fn.shadow=function(opts){
//以对象多为参数，可以为用户未指定的参数自动传入默认值
// var defaults={
// copies:5,
// opacity:0.1,
// //在方法中使用回调函数，需要接受一个函数对象对象作为参数，然后再方法中适当的位置上调用该函数
// copyOffset:function(index){
// return {x:index,y:index}
// }
// };
var options=$.extend({},$.fn.shadow.defaults,opts);
return this.each(function(){ var $originalElement=$(this);
for(var i=0;i<options.copies;i++){
var offset=options.copyOffset(i);
console.log(111)
$originalElement.clone()
.css({
position:'absolute',
left:$originalElement.offset().left+offset.x,
top:$originalElement.offset().top+offset.y,
margin:0,
zIndex:-1,
opacity:options.opacity
})
.appendTo('body');
}
});
};
//定制默认值
$.fn.shadow.defaults={
copies:5,
opacity:0.1,
copyOffset:function(index){
return {x:index,y:index};
}
}
})(jQuery); $(document).ready(function(){
//定制默认值，可以让我们减少很多的代码
$.fn.shadow.defaults.copies=10;
$('h1').shadow({
opacity:0.25,
copyOffset:function(index){
return {x:-index,y:-2*index};
}
})
} );
</script>
<h1>Inventory</h1>
<table id="inventory" style="margin: 0 auto; height: 300px; width: 400px; ">
<thead>
<tr
class="one"
>
<th>Product</th><th>Quantity</th><th>Price</th>
</tr>
</thead> <tfoot>
<tr class="two" id="sum">
<td>Total</td><td></td><td></td>
</tr>
<tr id="average">
<td>Average</td><td></td><td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<a href="spam.html" data-tooltip-text="Nutritious and delicious">Spam</a>
</td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td>
<a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a>
</td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td>
<a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a>
</td>
<td>14</td>
<td>7.98</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery中开发插件的更多相关文章
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- jQuery中开发插件的两种方式(附Demo)
做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery中的插件的编写和使用
1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- 在ASP.NET MVC应用中开发插件框架（中英对照）
[原文] Developing a plugin framework in ASP.NET MVC with medium trust [译文] 在ASP.NET MVC应用中开发一个插件框架 I’v ...
- 关于Eclipse中开发插件(二)
原plugin.xml文件各个设置项的说明: 附上生成的文件代码: <?xml version="1.0" encoding="UTF-8"?> & ...
- jquery中lhgdialog插件（一）
一:前言 最近在使用jquery的控件,其实以前也写但是突然之间遇到了需要从弹出窗口传值到父窗口,突然觉得这种传值的方式其实也是需要javascript的基础的,但是我自己还没有去真正的做过,所以还是 ...
- jquery中validate插件表单验证
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Jquery常用开发插件收集
2013年7月4日11:11:23 因为在做上传的时候,表单异步提交的时候 input 的 type等于file时候,异步提交不上去 所以使用 jquery.form.js 辅助一下 学习地址: h ...
随机推荐
- C#实现SSE通信方式的MCP Server
前面的课程,我们使用MCP Server,用的是网络上魔搭提供的. 下面我们一起来实现,用C#实现自己的MCP Server. MCP Server通信方式支持SSE.Stdio. 下面我们先实现SS ...
- Fiddler抓包工具安装HTTPS证书
安装好之后,打开Fiddler根目录,打开CMD 执行以下内容 makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NO ...
- springboot在拦截器里注入mapper失败Null问题
问题 直接在拦截器里这样注入mapper(dao)会导致null 解决方案 修改拦截器配置 原来的配置 修改为如下
- kards卡组推荐——苏美隐蔽
声明:此卡组抗快能力极差,害怕炮兵和小飞机为中后期 隐蔽核心思路: 在第一回合,尽量找杜斯团,找不到如果对方有单位,可以打一个镰刀 第二回合,①有杜斯团:打出隐蔽单位,按隐蔽顺序(附1)出,如果只有1 ...
- hashlib+time模块
hashlib模块 [一]什么是摘要算法 Python的hashlib提供了常见的摘要算法 如MD5 SHA1等等. 摘要算法又称哈希算法.散列算法. 它通过一个函数,把任意长度的数据转换为一个长度固 ...
- HyperMesh打开保存文件与面板功能使用
打开和保存文件 在 HyperMesh 中,打开和保存文件是最常用的命令.本节介绍 HyperMesh 打开和保存文件的多种方式.后续的练习中假定用户已经熟练使用 HyperMesh 进行文件打开和保 ...
- Elasticsearch+logstash安装部署
ELK安装部署 ELK安装部署 ELK是elastic公司提供的一套完整的收集日志并分析展示的产品,分别表示Elasticsearch.Logstash和kibana. Elasticsearch简称 ...
- AI大模型完全本地化部署指南——从零硬件开始
本文将从基础硬件购置开始讲起,真正意义上从零开始,最终通过Ollama.LangChain.DeepSeek的一系列交互,输出本地大模型的第一声啼鸣,带你走进另一片广阔的世界.update:2025- ...
- 分布式事务-2PC
目录 1. 2PC是什么 2. 2PC流程 3. 2PC的使用场景 4. 2PC的问题 5. 2PC的实现 5.1. XA 5.2. Seata的XA模式 6. 参考 1. 2PC是什么 保证强一致性 ...
- 如何在FastAPI中玩转WebSocket消息处理？
扫描二维码 关注或者微信搜一搜:编程智域 前端至全栈交流与成长 发现1000+提升效率与开发的AI工具和实用程序:https://tools.cmdragon.cn/ 一.文本消息接收与发送 # 运行 ...