【技术分享会】 @第四期 JQuery插件
本讲内容
JavaScript
JQuery
JQuery插件
实例
JavaScript
前端开发工程师必须掌握的三种技能
描述内容的HTML
描述网页样式的CSS
描述网页行为的JavaScript JavaScript是一门高端的、动态的、弱类型的编程语言，非常适合面向对象和函数式的编程风格
JQuery
站在巨人的肩膀上
JQuery是类库还是JQuery框架？
类库：用来实现各种功能的类的集合
框架：是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法；另一种定义认为，框架是可定制的应用骨架
常见的JS框架
如：Angular、Node
亦如前端UI框架：Pure
插件
链式调用 让插件接受参数，灵活定制 面向对象的插件开发 自调用匿名函数
实例代码
<html>
<head>
<title>
实例
</title>
<script src="jquery-1.8.0.min.js"></script> <script>
$(function () { //function add(a, b) {
// add.num++;
// return a + b;
//}
//add.num = 3;
//alert(add.num);
//alert(add(2, 2));
//alert(add.num); //function Person(name, sex) {
// this.name = name;
// this.sex = sex;
//}
//Person.prototype = {
// getName: function () {
// return this.name;
// },
// getSex: function () {
// return this.sex;
// }
//}
//Person.prototype.age = 33; //var zhang = new Person("测试1", "man");
//alert(zhang.getName());
//alert(zhang.age);
//zhang.age = 30;
//alert(Person.prototype.age);
//alert(zhang.age);
//var chun = new Person("测试2", "woman");
//alert(chun.getName());
//alert(chun.age);
//Person.prototype.age = 18;
//delete chun.age;
//alert(chun.age);
//alert(zhang.age);
//chun.age = 22;
//alert(Person.prototype.age); //function Employee(name, sex, employeeid) {
// this.employeeid = employeeid;
// this.name = name;
// this.sex = sex;
//} //Employee.prototype = new Person();
//Employee.prototype.getEmployeeID = function () {
// return this.employeeid;
//} //var test1 = new Employee("ceshi1", "man", "1234");
//console.log(test1.getName());
//console.log(test1.age); ///*实例一*/
//$.extend({
// sayHello: function (name) {
// console.log("Hello " + (name ? name : "LJY" + "！"));
// }
//});
//$.sayHello();
//$.sayHello("yy"); /*实例二*/
//$.extend({
// log: function (message) {
// var now = new Date(),
// y = now.getFullYear(),
// m = now.getMonth() + 1,
// d = now.getDate(),
// h = now.getHours(),
// min = now.getMinutes(),
// s = now.getSeconds(),
// time = y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;
// console.log(time + " My APP:" + message); // }
//}); //$.log("initializing..."); /*实例三 基础用法*/
//$.fn.myPlugin = function () {
// //this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般指一个jQuery类型的集合。
// this.css("color", "blue");
// this.each(function () {
// $(this).append(" " + $(this).attr("href"));
// //this.append(" " + this.attr("href"));
// });
// //this.append(" " + this.attr("href"));
//}
//$("a").myPlugin(); /*实例四 链式调用方法*/
//$.fn.myPlugin = function () {
// //this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般指一个jQuery类型的集合。
// this.css("color", "red");
// //支持链式调用
// return this.each(function () {
// $(this).append(" " + $(this).attr("href"));
// });
//} //$("a").myPlugin().css("color", "blue").css("color", "black"); /*实例五 让插件接受参数，灵活定制*/
//$.fn.myPlugin = function (options) {
// var defaults = {
// "color": "red",
// "fontSize":"12px"
// }; // //var settings = $.extend(defaults, options);
// var settings = $.extend({}, defaults, options); // //支持链式调用
// return this.css({
// "color": settings.color,
// "fontSize": settings.fontSize
// });
//}
//$("a").myPlugin({ "color": "#2c9929","fontSize":"20px" }); /*实例六 面向对象的插件开发*/
//定义Beautifier的构造函数
//var Beautifier = function (ele, opt) {
// this.$element=ele,
// this.defaults = {
// "color": "red",
// "fontSize": "12px",
// "textDecoration":"none"
// },
// this.options = $.extend({},this.defaults,opt)
//}
////定义Beautifier的方法
//Beautifier.prototype = {
// beautify: function () {
// return this.$element.css({
// "color": this.options.color,
// "fontSize": this.options.fontSize,
// "textDecoration":this.options.textDecoration
// });
// }
//} ////在插件中使用Beatuifier对象
//$.fn.myPlugin = function (options) {
// var beautifier = new Beautifier(this, options);
// return beautifier.beautify();
//} //$("a").myPlugin({ "color": "#2c9929", "fontSize": "20px","textDecoration":"underline" }); //实例七自调用匿名函数
;(function ($,window,document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function (ele, opt) {
this.$element = ele,
this.defaults = {
"color": "red",
"fontSize": "12px",
"textDecoration": "none"
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function () {
return this.$element.css({
"color": this.options.color,
"fontSize": this.options.fontSize,
"textDecoration": this.options.textDecoration
});
}
} //在插件中使用Beatuifier对象
$.fn.myPlugin = function (options) {
var beautifier = new Beautifier(this, options);
return beautifier.beautify();
}
})(jQuery, window, document); $("a").myPlugin({ "color": "#2c9929", "fontSize": "20px", "textDecoration": "underline" });//.css("color", "red");
});
</script>
</head> <body>
<ul>
<li>
<a href="http://baidu.com">百度</a>
</li>
<li>
<a href="http://v.ktgj.com/">空铁后台</a>
</li>
</ul>
</body> </html>
例子
相关资料
http://pan.baidu.com/s/1jIoMbqA
PPT文档
http://pan.baidu.com/s/1miHOlp2
【技术分享会】 @第四期 JQuery插件的更多相关文章
- 计算机爱好者协会技术贴markdown第四期
首先先让爱酱用CSDN自带的数学公式方法来闪瞎大家的钛合金狗眼: 有没有感觉到Markdown的强大!!!!! ## KaTeX数学公式 您可以使用渲染LaTeX数学表达式 [KaTeX](https ...
- Bootstrap进阶四：jQuery插件详解
一.模态对话框(Modal) 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框, ...
- 【技术分享会】 @第二期 微信开放API简述-0212
什么是微信开放平台? 微信开放平台作为第三方移动程序提供接口,使用户可将第三方程序的内容发布给好友或分享至朋友圈,第三方内容借助微信平台获得更广泛的传播.从而形成了一种主流的线上线下微信互动营销方式. ...
- jQuery --- 第四期 (jQuery动效)
学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...
- 2013年优秀jQuery插件
今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...
- js最详细的基础，jquery 插件最全的教材
一．Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 开发一个jQuery插件——多级联动菜单
引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
随机推荐
- (转)PCM数据格式
1. 音频简介 经常见到这样的描述: 44100HZ 16bit stereo 或者 22050HZ 8bit mono 等等. 44100HZ 16bit stereo: 每秒钟有 4410 ...
- VMware Workstation与VM ware Esxi使用OVF文件交互
实验环境: VMware Workstation 12 Pro 版本 VMware Esxi 6.0.0 版本 VMware Workstation安装一个Linux系统,把VMware Wor ...
- R语言绘图时的边界碰撞问题
当我们在绘图时,经常会遇到这样的问题,添加的文字标记超出了坐标系的问题,导致文字显示不全 比如下面这个例子: plot(c(1,5),c(1,5)) text(5,5.1,"ABCDEF&q ...
- EXP 导出出错解决方案
前言: 今天想要把 当前用户下的数据库 导出来,使用命令 导出数据库可用语句: exp bpmp/bkc123@127.0.0.1:5050/bkcyunty file=D:\bak\db_61.dm ...
- 内存与cpu的关系
CPU是负责运算和处理的,内存是交换数据的.当程序或者操作者对CPU发出指令,这些指令和数据暂存在内存里,在CPU空闲时传送给CPU,CPU处理后把结果输出到输出设备上,输出设备就是显示器,打印机等. ...
- OCA,OCP,OCM傻傻分不清?
可能大家知道OCA.OCP.OCM的关系是一个比一个难考,一个比一个含金量高,但是你知道具体的考试科目.考试方式.就业形势区别吗?不知道的话这篇通俗易懂的文章会让你一目了然. 区别一:含金量 ■OCA ...
- 用外部物理路由器时与外部dhcp服务时怎样使用metadata服务(by quqi99)
作者:张华 发表于:2015-12-31版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 用外部 ...
- [转]仿91助手的PC与android手机通讯
仿91助手的PC与android手机通讯 原文 知道91助手和豌豆莢吧? 说到这两个东西,最让人好奇的应该是就是和手机的交互了.我之前有研究过电脑和安卓的交互,基本功能已经走通了,在这里我想分享一下. ...
- 156 UIImageView 和 CADisplayLink 实现 Tom 汤姆猫动画效果的区别（扩展知识：分组（黄色文件夹）和文件夹引用（蓝色文件夹）区别）
(1)UIImageView 的动画操作,来自定义循环播放动画(不建议使用,内存消耗大) (2)CADisplayLink 是一个计时器,但是同 NSTimer 不同的是,CADisplayLink ...
- Vue-router路由判断页面未登录跳转到登录页面
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...