【技术分享会】 @第四期 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
