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 ...
随机推荐
- 基于 SSE、asp.net core razor 实现比分Live
前言 最近在项目中用到了 SSE (Server-Sent Events),用于服务的单向长连接数据推送.因为都是使用 C# 实现的,所以服务端使用的是 HttpListener ,而客户端更简单,只 ...
- 第2讲、Transformer架构图详解
1. Transformer架构运行机制 Transformer架构是一种强大的神经网络结构,主要用于自然语言处理任务.它摒弃了传统的循环神经网络(RNN)和卷积神经网络(CNN),完全基于注意力机制 ...
- 邮件收件、读取邮件API-批量导入-支持代理-开放HTTP接口
简介 大恩邮箱收件平台,支持读取收件箱.垃圾箱的邮件.支持批量导入各大邮箱平台的账号(例如微软.谷歌.网易.QQ等),采用pop3.imap协议收件,支持配置代理IP.验证码截取规则等,同时提供了HT ...
- 【中文】【吴恩达课后编程作业】Course 1 - 神经网络和深度学习 - 第二周作业
[吴恩达课后编程作业]Course 1 - 神经网络和深度学习 - 第二周作业 - 具有神经网络思维的Logistic回归 上一篇:[课程1 - 第二周测验]※※※※※ [回到目录]※※※※※下一篇: ...
- 手把手教你实现PyTorch版ViT：图像分类任务中的Transformer实战
作者:SkyXZ CSDN:SkyXZ--CSDN博客 博客园:SkyXZ - 博客园 ViT论文Arxiv地址:An Image is Worth 16x16 Words: Transformers ...
- 做Data+AI的长期主义者 | 倒计时2天...
<数据资产管理白皮书>下载地址: https://www.dtstack.com/resources/1073/?src=bbs <行业指标体系白皮书>下载地址: https: ...
- [CSP-S 2022] 星战
link 我为什么会在赛时想图论分块.... 什么神仙会想到哈希维护啊 首先手玩一下满足条件的图,只需要满足条件二:所有点出度为 1,条件 1 会自然满足,我们必然可以顺着其出边走下去. 对于操作 2 ...
- MRST绘制三维网格图
MRST绘制三维网格图 Matlab储层模拟工具箱(The MATLAB Reservoir Simulation Toolbox, MRST)是一款用于储层建模的免费.开源的软件,主要由 SINTE ...
- 使用ZLAN8308M串口服务器4G通信功能解决远程智能无线电表方案
我国目前市场上常见的电表记录方式主要以人工手动抄表和预付费卡为主.在我国经济和住房快速发展下,电能消耗计量管理的实际需求以及人民生活水平的不断的提高,对电能智能化.便捷化管理的要求越来越高,远程电表记 ...
- poi处理excel基本操作时写的工具类
1.复制单元格 1 ... 2 public static void copyCell(Workbook wb, Cell srcCell, Cell distCell, boolean copyVa ...