【技术分享会】 @第四期 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插件,今天我 ...
随机推荐
- (转)linux用文件锁实现保证一个程序只能启动一个进程
#include <stdio.h> #include <unistd.h>#include <fcntl.h>#include <errno.h>in ...
- [原创]RX801SJ 实时时钟RTC调试纪要 : 时钟输出设置
利用USB转I2C/SPI/UART板进行通信测试 1.RX8010SJ的I2C通信地址定义如下: 设备读取地址:0X65 设备写入地址:0X64 2.USB2ish0转接板操作界面如下: 3.参 ...
- win10 禁用Defender
cmd reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defender" /v "Dis ...
- opengl deferred shading
原文地址:http://www.verydemo.com/demo_c284_i6147.html 一.Deferred shading技术简介 Deferred shading是这样一种技术:将光照 ...
- MyEclipse连接CVS，如果中间经过一层代理，就没法直接联接到CVS了，哪位知道怎么办？
- iOS: 控制UIView的外形
#import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> @interface UIView (Shape) - (v ...
- Python学习（五）——列表操作全透析
列表是以类的形式实现的. "创建"列表实际上是将一个类实例化. 因此,列表有多种方法能够操作. Python列表操作的函数和方法 列表操作包括下面函数: 1.cmp(list1, ...
- Linux服务器svn与项目同步
命令:svn checkout svn://192.168.67.131/trunk/w1
- 用Python写简单的爬虫
准备: 1.扒网页,根据URL来获取网页信息 import urllib.parse import urllib.request response = urllib.request.urlopen(& ...
- redis 的hash数据类型
hash的常用命令 1.hset hset key field value 将哈希表key中的域field的值设为value 如果key不存在,一个新的哈希表被创建并进行HSET操作 如果field是 ...