【技术分享会】 @第四期 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插件,今天我 ...
随机推荐
- Unity--------------------万向锁的概念
万向锁 一直困惑我很久....原因出在这里,我以为欧拉角旋转是以模型坐标(齐次坐标系)为旋转轴.问题就来了,无论旋转那个轴,其它两个轴也会相应的变化,下面看图: 根据上面的说明两个旋转面(圆圈)怎么会 ...
- (转)FFmpeg源代码简单分析：avformat_open_input()
目录(?)[+] ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结 ...
- POJ 3126 --Father Christmas flymouse【scc缩点构图 && SPFA求最长路】
Father Christmas flymouse Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 3007 Accep ...
- winform 用户控件事件的写法
public partial class UcTest : UserControl { public UcTest() { InitializeComponent(); } //定义事件 public ...
- Linux学习笔记（一）：文件操作命令
命令 含义 cd / 切换到根目录 cd .. 上级目录 cd ./bin 到同级的bin目录中 cd bin 到同级的bin目录中 cd - usr文件夹 cd ~ 回到root用户的主文件夹 pw ...
- Css 去除浮动
清除浮动的方法 清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种. 通过在浮动元素末尾添加一个空的标签例如并设置样式为cle ...
- 简单理解IoC与DI
为了理解Spring的IoC与DI从网上查了很多资料,作为初学者,下面的描述应该是最详细,最易理解的方式了. 首先想说说IoC(Inversion of Control,控制倒转).这是spring的 ...
- 114自定义UITableViewCell（扩展知识：为UITableViewCell添加动画效果）
关键操作: 效果如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UITableViewCo ...
- SharePoint 2013 处理videoplayerpage.aspx下的个人图片显示有误问题
问题: Personal site's photo can't correct display in the videos page The url address of personal site' ...
- AdoConnect-获取连接字符串 （工具）
使用ADO访问数据库时需要设置正确的连接字符串,为此特提供一个获取连接字符串的小工具,方便编程使用. 使用方法: 1.点击“连接字符串”,弹出数据链接属性对话框 2.可以使用“提供程序”新建数据源,也 ...