http://blog.163.com/yw_0721/blog/static/71645797201021744836763/
http://jiangzhenghua.iteye.com/blog/1007934
http://jiangzhenghua.iteye.com/blog/1007779
http://www.xn--6kqv55e.com/blog/A118.aspx
匿名函数:就是指没有函数名的函数。
jQuery的“立即执行匿名函数”结构:
(function(){
//此处为jquery的逻辑代码
})()
使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。例子如下:
alert((function(x,y){return x+y;})(2,3));// "5"
alert((new Function("x","y","return x*y;"))(2,3)); // "6"
很多人或许会奇怪,为什么这种方法能成功调用呢?觉得这个应用奇怪的人就看一下我以下这段解释吧。
大家知道小括号的作用吗?小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。
其实命名函数也可以通过()去立即执行,代码:
(function xieRan(){
alert("my name is xieRan")
})();
jQuery就是一个大的立即执行匿名函数。
jQuery插件代码格式:
;(function($){// 可以去掉开头的 ; (分号),国外的开发人员编写的插件时的一种习惯
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery); //传入一个jQuery的参数(其是就是匿名函数的参数$的值为jQuery),是因为该方法是对jQuery库的扩展,那么在该方法体内就可以调用jQuery库中的函数;若不传入,则无法调用jQuery库
=============================
jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){return a+b;}
});
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
Java代码
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。
===========================
下面例子主要编写一个输入框,页面加载时会显示初始值,无边框,看起来像span,点击时,边框会出现,而且内容会被选中,失焦时会触发ajax事件,修改内容的值。
以下为代码:
1 jQuery.fn.inputText = function(value, action, viladata)
2 {
3 var $input = this;
4 //设置输入框初始值
5 if(value != "")
6 {
7 $input.val(value);
8 }
9 //设置输入框为无边框
10 $input.attr("style","border:0px solid #fff");
11 //输入框被点击
12 $input.click(function(){
13 //显示边框
14 $input.attr("style","border:1px solid #aaa");
15 //选中内容
16 $input.select();
17 });
18
19 //输入框失焦
20 $input.blur(function(){
21 $input.attr("style","border:0px solid #fff");
22
23 //验证函数,验证是否通过
24 if(viladata)
25 {
26 var input = $input.val();
27 $.post(action,{value:input},function(data){
28 if(data=="success")
29 {
30 alert("修改成功");
31 window.location.reload();
32 }
33 else alert("修改失败");
34 },"TEXT");
35 }
36 });
37 }
在HTML中调用为:
<input type="text" id="input"/>
<script type="text/javascript">
$(document).ready(function(){
$("#input").inputText("初始值","a.aspx",validata);
});
//验证函数
function validata()
{
return true;}
这样一个简单的控件就完成了。。。