框架封装学习笔记.docVIP

jQuery基本结构 script type=text/javascript ;(function (window,document){ /*这个函数是一个工厂函数，也就是说jQuery其实采用了工厂模式*/ function jQuery(){ return new jQuery.fn.init(); } /*覆写jQuery工厂函数的原型对象*/ jQuery.fn = jQtotype = { } /*这个init才是jQuery真正的构造函数*/ var init = jQuery.fn.init = function(){ } /*将构造函数的原型对象设置为jQuery工厂函数的原型对象，这样做是为了给外部提供插件接口*/ totype = jQuery.fn; /*对外暴露jQuery构造函数*/ window.$ = window.jQuery = jQuery; })(window,document); jQuery.fn.alert = function (msg){ alert(msg); } $().alert(失业第9天！); /script jQuery入口函数对不同参数的处理 、传入undefined、null、0、NaN、””则返回空实例 、传入字符串 、如果传入的是HTML片段，则创建对应的dom，然后添加到实例身上 、如果传入的不是HTML片段，则当选择器处理，用来获取页面元素 、传入数组或伪数组 如果传入的是数组或伪数组，那么把每一项分别添加到实例身上 、传入dom、对象或其他基本数据类型 如果传入dom、对象或其他基本数据类型，则统一添加到实例身上 连缀-链式调用 连缀，最简单的理解就是一句话可以设置一个元素两个或两个以上的操作，就像jQuery一样可以连续调用。 1.1、基本的连缀实现方式 以下代码是最基础的链式调用方法，但还存在着很多的问题，链式调用原理就是如此。 script type=text/javascript /*如果要实现jQuery的链式调用效果，如：$(#j_news_item_2).addClass(active).css(height,600).html(我将原来的内容修改了)，那么这些调用的方法都必须返回一个对，如果每个方法都返回原生元素(即类似用document.getElementById(xxx))，好像也可以实现链式调用，但是原生元素对象哪有addClass()、css()方法呢？因此要想实现链式调用效果那么就必须返回我们自己封装的对象。*/ function Base(){ /*用户存储获取的元素*/ this.elements = []; } Btotype.getId = function (id){ this.elements.push(document.getElementById(id)); //返回this，即当前对象，这样就可以实现链式调用效果 return this; } Btotype.css = function (attr,value){ var elements = this.elements; for(var i = 0,len = elements.length; i len; i ++){ elements[i].style[attr] = value; } return this; } Btotype.html = function (html){ var elements = this.elements; for(var i = 0,len = elements.length; i len; i ++){ elements[i].innerHTML = html; } return this; } var Base = new Base(); window.onload = function (){ Base.getId(j_news_item_2).css(background,red).html(我将原来的内容修改了！).css(color,#fff); } /script div class=news-list div class=news-item我是第1条新闻/div div class=news-item id=j_news_item_2我是第2条新闻/div div class=news-item我是第3条新闻/div /div 事件绑定（兼容IE） 我们在使用jQuery的时候都会用到jQuery的事件绑定，用