JQuery插件上课笔记

1.JQuery插件机制简介

            简单来说，往jQuery类库里面去扩展方法，这类方法就是jQuery插件

2.json的三种编写格式

           ①.对象格式 

            example:  { 列名   :    值 }

$(function(){
        //设置json对象，给其初始属性
		var json = {
				sid : "01",
				sname : "程序员"
		}
		console.log(json);//在网页控制台打印json字符串
	})

            ②.json列表、数组格式

             example:   [值1，值2，.....]

$(function(){
        //定义json数组,在其后直接给值
		var jsonArray = [1,2,3,4];
		console.log(jsonArray);
	})

            ③混合模式（对象、数组）

            example:   {列名  :  值 ,  列名  :  [1,2,3,4]}

$(function(){
		//混合模式jsonFix，同时定义对象和数组
		var jsonFix = {
				all : "hello jsonFix",
				array : [1,2,3,4]
		}
		console.log(jsonFix);
	})

3.理解$.extend和$.fn.extend

   ①$.extend()方法用来扩充jQuery类属性或者方法

     扩充类属性：

example:
$(function(){
        //定义类属性sname
		var str1 = {
				sname : "是" 
		}
        //定义不同类属性sid
		var	str2 = {
				sid : "01"	
		}
        //使用$.extend(扩展str1类的属性sid)
		/* $.extend(str1,str2);
		console.log(str1);//控制台打印结果{sname: "是", sid: "01"} */
        var str3 = {
                sname : "否"
        }
        //多扩充
        $.extend(str1,str2,str3);
        console.log(str1);//控制台打印结果{sname: "否", sid: "01"}
	})

   注：方法扩充对象为参数1的位置；该方法支持多扩充但应注意值覆盖问题

   扩充方法（定义新方法）：

example：
$(function(){
		//定义jQuery方法sayHello()
		$.extend({
			sayHello:function(){
				alert("Hello jQuery....");
			}
		});
                //调用定义方法
		$.sayHello();
	})

②$.fn.extend()方法用来扩充实例的属性或者方法

扩充实例方法 ：(将整个页面dom里的标签看作实例对象，给其定义方法)

$(function(){
        //扩充实例方法speak()
		$.fn.extend({
			speak:function(){
				alert("Hello p....How are you?");
			}
		});
                //页面类的属性标签调用定义的speak()方法
		$("p").speak();
	})

4. jQuery插件的添加

      源哩：其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中，实现代码优化。

 接下来大家来编写自己的jQuery插件实例吧！！！

                                                                                                                                                                          ------Giraffe_it