【技术分享会】 @第四期 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插件,今天我 ...
随机推荐
- e861. 在两个组件之间共享输入映射和事件映射
By sharing an InputMap or ActionMap, any change to the shared InputMap or ActionMap will affect all ...
- Eclipse文件首部自动加 作者时间
Window -> Preferences -> Java -> Code Style -> Code templates -> (in right-hand pane) ...
- HTML5 3D爱心动画及其制作过程
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...
- CCSprite: fade 效果切换图片
//CCSprite+Animation.h #import "CCSprite.h" @interface CCSprite (Animation) + (void)fadeWi ...
- AOP-配合slf4j打印日志
基本思想 凡在目标实例上或在目标实例方法(非静态方法)上标注自定义注解@AutoLog,其方法执行时将触发AOP操作: @AutoLog只有一个参数,用来控制是否打印该方法的参数和返回结果的json字 ...
- iOS 多线程简单使用的具体解释
主线程 一个iOS程序执行后.默认会开启1条线程,称为"主线程"或"UI线程"(刷新UI界面最好在主线程中做.在子线程中可能会出现莫名其妙的BUG) 主线程的作 ...
- mysql 创建和删除用户
1.远程登录mysql mysql -h ip -u root -p 密码 2.创建用户 格式:grant 权限 on 数据库.* to 用户名@登录主机 identified by "密码 ...
- XML 中可嵌入 cmd命令脚本
原文要参照代码 1. XML解析 Task逻辑块可相互组合,形成复杂的树状结构,其结构用XML表示,即写成XML文件的形式. 样例如下: <!-- 顺序执行块 --> <seq> ...
- POI初体验
Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 它的结构如下: HSSF - 提供读写Micros ...
- GCT之数学公式（微积分）