JS高级第二天：

1.自定义事件：

 

/**
 * 自定义事件
 *   1、事件就是dom对象的一个属性而已
 *   2、事件必须绑定在一个对象上
 *   3、可以对对象上的事件进行声明
 *   4、该事件的触发
 *   5、事件的参数的传递
 *       当定义事件的时候，是形参
 *       当事件被触发的时候，实参
 */
/**
 * 1、在div上声明一个属性(该属性也是事件),该事件的名称为：上海传智播客第四期很牛
 */
$().ready(function(){
 /**
  * unbind的参数为事件的名称
  * bind的参数有两个
  *    1、事件的名称
  *    2、触发该事件要执行的内容
  */
 $("#aaa").unbind("上海传智播客第四期很牛");
 $("#aaa").bind("上海传智播客第四期很牛",function(event,json){//event是jquery自带的参数
  alert("就是牛");
  alert(json.a);
  alert(json.b);
 });
 
 $("#aaa").unbind("click");
 $("#aaa").bind("click",function(){
  /**
   * 触发"上海传智播客第四期很牛"事件
   * this:因为click事件和上海传智播客第四期很牛事件在一个对象上
   */
  $(this).trigger("上海传智播客第四期很牛",{
   a:1,b:2
  });
 });
});

自定义事件2：

/**
 * 写一个函数，该函数有两个参数
 *    1、事件的名称
 *    2、事件的处理函数
 */
/**
 * 函数的功能
 *    1、绑定该事件
 *    2、当点击div的时候，触发该事件
 *    3、该事件输出div的内容，并且以参数的形式进行传递
 */
function eventHandler(eventName,callback){
 /**
  * 1、找到该div
  * 2、给div动态的添加一个事件，事件的名称为"eventName"
  * 3、触发该事件
  */
 //自定义事件的声明
 $("#aaa").unbind(eventName);
 $("#aaa").bind(eventName,function(event,value){
  callback(event,value);
 });
 
 //在什么时候触发自定义事件
 $("#aaa").unbind("click");
 $("#aaa").bind("click",function(){
  $(this).trigger(eventName,$(this).text());
 });
}
$().ready(function(){
 eventHandler("itcast",function(event,value){
  alert(value);
 });
});

游览器内部事件的参数是固定的，而自定义参数是可以自己定义的，这是内部事件和自定义事件最大的区别。
自定义jquery中的each方法遍历DIV

/**
 * 用jQuery最原始的方法each遍历页面上的div
 */
//$().ready(function(){
// $("div").each(function(){
//  alert($(this).text());
// });
//});
(function($){
 $.fn.itcastShEach = function(callback){
  var array = $(this);
  for(var i=0;i<array.length;i++){
   /**
    * 这种写法相当于给回调函数传递了一个参数
    *    该参数就是数组中正在遍历的对象
    */
   //callback(array.get(i));
   //array.get(i).callback();
   //array.get(i)就是当前正在遍历的对象
   callback.call(array.get(i));
  }
 }
})($);
$().ready(function(){
// $("div").itcastShEach(function(val){
//  alert($(val).text());
// });
 $("div").itcastShEach(function(){
  alert($(this).text());
 });
});

自定义extend
/**
 * 写一个方法，extend,实现插件开发
 */
(function($){
 $.fn.myextend = function(json){
  for(var i in json){
   $.fn[i] = json[i];
  }
 }
 
 $.extend = function(json){
  for(var i in json){
   $[i] = json[i];
  }
 }
})($);
$().ready(function(){
 $.extend({
  a:1,
  b:2,
  c:3
 });
 
 alert($.a);
});

重写alert
(function(jQuery){
 $.myalert = function(){
  alert("aaaa");
 }
})($);
(function(jQuery){
 //fn==prototype
 $.fn.myalert = function(){
  alert("aaaa");
 }
})($);
$().ready(function(){
 $.myalert();
 $("body").myalert();
});

把页面上删除的超级链接的弹出框封装成一个插件
/**
 * 把页面上删除的超级链接的弹出框封装成一个插件
 */
(function($){
 $.myconfirm = function(){
  /**
   * 遍历当前页面上每一个超级链接
   */
  $("a").each(function(){
   if($(this).text()=="删除"){
    $(this).unbind("click");
    $(this).bind("click",function(){
     if(window.confirm("您确认要删除吗?")){
      return true;
     }else{
      return false;
     }
    });
   }
  });
 }
})($);
$().ready(function(){
 $.myconfirm();
});

  
jquery的内核
1、结构
    
//把所有的内容写在匿名函数中
    //可以把最核心的内容进行封装，这些核心的内容在外部是没有办法访问的
   (function(window){
        //jQuery是一个函数、对象、构造器函数
        var jQuery = function( selector, context ) {
             // The jQuery object is actually just the init constructor 'enhanced'
            return new jQuery.fn.init( selector, context );
        }
        //利用jQuery的选择器创建出来的对象就相当于利用jQuery的构造器创建出来的对象
       jQuery.fn = jQuery.prototype = {
            each:function(){
            },
            ready:function(){
            }
        }
        window.jQuery = window.$ = jQuery;
        //window.jQuery.prototype=$.fn=$.prototype=window.$.fn=jQuery.fn
   })(window);

2、如果把一个属性加在jQuery上，外部可以利用jQuery访问该属性
     
(function(jQuery){
         jQuery.alert = window.alert;
     })(jQuery);

   把加在jQuery对象本身上的属性成为jQuery的全局插件的开发
   把加在jQuery对象原型上的属性称为jQuery的对象插件的开发
       如果开发的插件和页面上的元素有关系，则用对象插件
       如果开发的插件和页面上的元素没有关系，则用全局插件