说到`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的一些心得和在网上查找的一些资料，由什么问题和错误望告知，谢谢！`

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];},

这里使用沙箱模式，可以防止全局污染

<script>
(function(window,undefined){var jQuery = function (ele){return new jQuery.prototype.init(ele)
}

原型替换

jQuery.fn = jQuery.prototype ={constructor:jQuery,
init:function(ele){var ele = document.querySelectorAll(ele);
[].push.apply(this,ele);
},

这里用 css () 举例子

css:function(name,value){if(arguments.length == 2){

设置 css 样式

}else if(arguments.length == 1){if( typeof name === 'object'){

设置多个样式

}else if(typeof name == 'string'){// 通过 getComputedStyle 获取
}
}
return this;
}
}

最关键的一步

jQuery.prototype.init.prototype = jQuery.fn;

暴露给全局

window.jQuery = window.$ = jQuery;
})(window)
</script>

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.length;i++){this[i].addEventListener("click",callback);}// jq实现链式操作每个函数执行完毕都是返回thisreturn this;}, *//* toggle(){// 遍历每个元素如果display不是none就隐藏，否则就显示for(var i=0;i<this.length;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<this.length;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<list.length;i++){//遍历类别对 this赋值this[i] = list[i];}}// 如何让new  init 产生对象拥有JQuery显示原型上的所有方法呢？jQuery.fn.init.prototype = jQuery.fn;// 全局对jQuery与$可以访问window.$=window.jQuery = jQuery;})()

jquery.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-9.0.0.js"></script></head><body><h1>jquery还是大哥吗？</h1><p>是的</p><h1>市场占用96.8%</h1><button>切换</button><script>// jq实现链式操作// 给button注册一个点击事件// each函数编写$("button").click(function(){// 让h1切换显示与隐藏$("h1").toggle().click(function(){alert(this.innerText);});})</script></body>
</html>

封装自己的 jquery 框架相关推荐

jQuery系列第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转载]浅析jQuery框架与构造对象
浅析jQuery框架与构造对象这是一些分析jQuery框架的文字针对jQuery 1.3.2版本面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第五天：事件与事件对象
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jquery框架分析-构造jquery对象初步
这是一些分析jquery框架的文字针对jquery 1.3.2版本面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面 ...
基于JQuery框架的AJAX
基于JQuery框架的AJAX/jquery这个类库相当不错...简单..功能还强大在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get().XHTML(主要):< ...

封装自己的 jquery 框架

说到`jquery`，那就给大家先简单的介绍一下什么是`jquery`

目录

一，封装jquery`

1，jqery的封装原理：

2，如何封装自己的 jQuery

2，jquery 方法封装

二，下面是我封装jquery的代码

封装自己的 jquery 框架相关推荐

最新文章

热门文章

封装自己的 jquery 框架

说到jquery，那就给大家先简单的介绍一下什么是jquery

目录

一，封装jquery`

1，jqery的封装原理：

2，如何封装自己的 jQuery

2，jquery 方法封装

二，下面是我封装jquery的代码

封装自己的 jquery 框架相关推荐

最新文章

热门文章

说到`jquery`，那就给大家先简单的介绍一下什么是`jquery`