【技术分享会】 @第四期 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插件,今天我 ...
随机推荐
- Can't read [proguard.ClassPathEntry@1a0c10f] (No such file or directory)
//该错误无法识别,是因为你使用了旧版本的proguard,建议你下载新版本4.5以上的proguard来替代Android SDK中使用的旧版sdcard 这样你就可以知道错误所在.因为只有4.5版 ...
- Kafka 之 入门
摘要: 最近研究采集层,对Kafka做了一个研究.分为入门,中级,高级步步进阶.本篇主要介绍基本概念,适用场景. 一.入门 1. 简介 Kafka is a distributed, parti ...
- vue项目中使用md5.js及base64.js
一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...
- 【FastJSON】使用JSON.toJSONString()-解决FastJson中“$ref 循环引用”的问题
fastjson 是一个 不错的json格式化工具, 但是在使用时,如果 碰到统一地址对象引用,就会用$ref替代 . 怎么去掉ref呢, 解决方法如下: String mapStr = JSONOb ...
- Excel破解密码代码
Option ExplicitPublic Sub AllInternalPasswords()' Breaks worksheet and workbook structure passwords. ...
- 收集整理的240多个jQuey插件 .
“jQuery 是继 prototype 之后又一个优秀的 Javascrīpt 框架.其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有 ...
- kettle教程二
转载:http://www.cnblogs.com/limengqiang/archive/2013/01/16/KettleApply2.html 1.应用场景 这里简单概括一下几种具体的应用场景, ...
- Centos7以上的版本 mysql 无法启动，无法停止问题
service mysqld start 始终提示如下: Failed to issue method call: Unit mysqld.service failed to load: No suc ...
- feign的callback设定后，项目启动错误
错误如下: Error starting ApplicationContext. To display the auto-configuration report re-run your applic ...
- java okhhtp下载学信网学籍信息
学信网的登录有验证码,是那种计算数字或者汉字识别的,很难识别.最近连学籍信息和学历信息也换成图片了,常规的正则 css xpath都不能使. 下载图片,需要先登录,获取登陆后的cookie和学籍信息的 ...