封装自己的 jquery 框架
说到jquery，那就给大家先简单的介绍一下什么是jquery
jquery是JavaScript函数的一种封装。jQuery封装了JavaScript常用的功能代码（函数），提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jquery是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库。jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
详情请去jquery官网 查看！
目录
说到`jquery`，那就给大家先简单的介绍一下什么是`jquery`一，封装jquery`1，jqery的封装原理：2，如何封装自己的 jQuery2，jquery 方法封装
二，下面是我封装jquery的代码
一，封装jquery`
接下来就说我封装jquery的一些心得和在网上查找的一些资料，由什么问题和错误望告知，谢谢！`
1，jqery的封装原理：
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。‘
2、使用对象封装，将代码封装到对象中，但对象如果被覆盖，则全部失效，风险极高。
3、使用工厂模式，将代码进行封装，但是并没有解决问题。
4、将封装的函数名字去除，避免覆盖，但是函数没有办法调用了
5、匿名自调用。’可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取。
6、使用闭包，在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
2，如何封装自己的 jQuery
返回new 一个初始化函数
function jQuery(selector){
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
定义其构造函数显式原型
// 定义JQuery构造函数的显示原型
jQuery.fn =jQuery.prototype = {
constructor:jQuery,
jquery:"9.0.0",
length:0,
get(index){
return this[index];
},
这里使用沙箱模式，可以防止全局污染
2，jquery 方法封装
给jquery 身上设置全局方法；
// 方法一：
jQuery.myFunction = function(str){
console.log(str);
}
//方法一调用：
$.myFunction('直接给jq身上设置全局方法');
//方法二：
// 同时添加多方法
jQuery.extend({
myFunction:function(str){
console.log(str);
},
myFunction1:function(str){
console.log(str);
}
})
//方法二调用：
$.myFunction('给jq身上同时添加多个全局方法');
//方法三：
jQuery.nameSpaces = {
myFunction:function(str){
console.log(str);
},
myFunction1:function(str){
console.log(str);
}
}
//方法三调用：
$.nameSpaces.myFunction('用命名空间的方式给jq添加多个全局方法');
二，下面是我封装jquery的代码
jquer.js
;(function(){
// 匿名函数自执行
// jQ的构造函数
function jQuery(selector){
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
// 定义JQuery构造函数的显示原型
jQuery.fn =jQuery.prototype = {
constructor:jQuery,
jquery:"9.0.0",
length:0,
get(index){
return this[index];
},
/* click(callback){
// 单击时候让this的每个元素执行callback回调函数
for(var i=0;i this[i].addEventListener("click",callback); } // jq实现链式操作每个函数执行完毕都是返回this return this; }, */ /* toggle(){ // 遍历每个元素如果display不是none就隐藏，否则就显示 for(var i=0;i if(this[i].style.display!="none"){ this[i].style.display="none" }else{ this[i].style.display="block"; } } return this; }, */ each(callback){ for(var i=0;i callback(this[i]) } return this; }, click(callback){ // item指向的被遍历的每个元素 this.each(function(item){ // 让每个元素注册click事件 执行callback方法 // 也就是click 括号里面的回调函数 item.addEventListener("click",callback); }) return this; }, toggle(){ this.each(function(item){ if(item.style.display!="none"){ item.style.display="none" }else{ item.style.display="block"; } }) } } // jq初始化函数 jQuery.fn.init =function(selector){ // 获取到选择列表 var list = document.querySelectorAll(selector); // 当前对象的长度 this.length = list.length; for(var i=0;i //遍历类别对 this赋值 this[i] = list[i]; } } // 如何让new init 产生对象拥有JQuery显示原型上的所有方法呢？ jQuery.fn.init.prototype = jQuery.fn; // 全局对jQuery与$可以访问 window.$=window.jQuery = jQuery; })() jquery.htmljquery还是大哥吗？
是的