JQuery极大的提高了我们编写JavaScript的效率，让我们可以愉快的编写代码，做出各种特效。大多数情况下，我们都是使用别人开发的JQuery插件，今天我们就来看看如何把我们常用的功能做出JQuery插件，然后像使用jQuery那样来操作DOM.
一、jQuery插件开发快速上手1、jQuery插件模板
关于jQuery插件的编写，我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字，其模板如下：
(function($){ $.fn.myJQPlugin = function(){ //TODO:add your code }})(jQuery);其中myJQPlugin 就是你插件的名字，Function里面的代码就是你插件的功能实现代码。
2、与DOM交互
给插件起好名字后，下面就可以编写我们的代码了，但是编写之前，必须要说一说上下文。在插件内部的范围中，this关键字指向的是jQuery对象。人们很容易误解这一点，因为在正常使用jQuery的时候，this通常指向的是一个DOM元素。不了解这一点，会经常使用$又包装了一次。
(function( $ ){ $.fn.myJQPlugin = function() { // 没有必要使用$(this) // $(this) 跟 $($('#element'))是一样的 this.html("Hello,world"); this.click(function(){ this.hide(); //注意这里的this不再指向jQuery元素，这里的this指向当前这个function对象 }); }; })( jQuery );这里又要提到this的指向问题，比如我们想实现一个功能，点击DOM元素，隐藏当前元素，虽然说this指向的是jQuery对象，但是在click中，this的指向发生了变化，指向了它所在的function.所以我们在click方法里面访问当前元素，就要通过变量了，实现方法如下：
(function( $ ){ $.fn.myJQPlugin = function() { // 没有必要使用$(this) // $(this) 跟 $($('#element'))是一样的 this.html("Hello,world"); var $this = $(this); this.click(function(){ $this.hide(); //注意这里的this不再指向jQuery元素，这里的this指向当前这个function对象 }); }; })( jQuery );我们声明$this变量来保存this对象，这样我们需要使用当前元素时，直接使用$this就可以了。下面我们通过一个完整的实例来测试一下：
其中html页面的代码如下：
<!DOCTYPE html><html><head> <title></title> <script src="jquery.js" type="text/javascript"></script> <script src="1.js" type="text/javascript"></script></head><body><div>Hello,world</div></body><script type="text/javascript"> $('#container').myJQPlugin(); </script></html>jQuery插件的js代码如下：
(function($){ $.fn.myJQPlugin = function(){ this.css("color","red"); //字体颜色为红色 this.hide(); this.slideDown(200); //先隐藏，然后通过slideDown显示出来 var $this = $(this); this.click(function(){ $this.html("Thanks,good bye!"); //显示信息，然后淡出 $this.fadeOut(2000); }); }})(jQuery);这个插件的功能就是首先让元素下拉显示，然后点击元素时显示再见信息，然后经过2s后淡出。这里大家可以试试在click事件里面使用this会怎么样。
二、jQuery的链式操作
1、为什么要用链式操作？
实际上链式操作仅仅是通过对象上的方法最后加上return this. 把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。那么，简单实现一个：
按 Ctrl+C 复制代码按 Ctrl+C 复制代码
一般的解释：
节省代码量，代码看起来更优雅。例如如果没有链式，那么你可能需要这样写代码：
document.getElementById("ele").dosomething(); document.getElementById("ele").dootherthing();这个代码中调用了两次document.getElementById来获取DOM树的元素，这样消耗比较大，而且要写两行，而链式只要写一行，节省了代码……
但我们也可以用缓存元素啊。比如：
var ele = document.getElementById("ele"); ele.dosomething(); ele.dootherthing();而且两行并没有比一行多多少代码，甚至相应的封装反而使得代码更多了。
最糟糕的是所有对象的方法返回的都是对象本身，也就是说没有返回值，这不一定在任何环境下都适合。
2、那么到底为什么要用链式操作呢？
为了更好的异步体验Javascript是无阻塞语言，所以他不是没阻塞，而是不能阻塞，所以他需要通过事件来驱动，异步来完成一些本需要阻塞进程的操作。
但是异步编程是一种令人疯狂的东西……运行时候是分离的倒不要紧，但是编写代码时候也是分离的就……
常见的异步编程模型有哪些呢？
(1)回调函数 ：
所谓的回调函数，意指先在系统的某个地方对函数进行注册，让系统知道这个函数的存在，然后在以后，当某个事件发生时，再调用这个函数对事件进行响应。
function fun(num, callback){ if(num < 0) { alert("分数不能为负,输入错误!"); }else if(num == 0){ alert("该学生可能未参加考试！"); }else { alert("调用高层函数处理!"); setTimeout(function(){callback();}, 1000); } }
相关文章
精彩导读
热门资讯
关注我们
