对于jquery框架是什么相信大家都很清楚了，那么下面要给大家介绍的就是jquery框架的原理，一起来了解一下吧!
下面是一个简单的总结。
jquery框架的总体结构：
(function (w, undefined)
{
//定义一些变量和函数
var
//对外提供的接口
jQuery = function (selector, context)
{
return new jQuery.fn.init(selector, context, rootjQuery);
};
//结jQuery对象添加一些方法和属性
//jQuery的继承方法
//jQuery.extend 扩展一些工具的方法（静态方法） jQuery.trim();
//Sizzle 复杂选择器的实现
//Callbacks 回调对象--函数的统一管理
//Deferred 延迟对象，对异步的统一管理
//support 功能检测
//Data 数据缓存
//queue 队列管理
//Attribute 属性操作
//Event 事件处理
//DOM操作 添加删除、包装筛选等
//CSS操作
//提交的数据和ajax
//运动/动画 FX
//坐标和大小
//支持的模块化的模式
w.jQuery = w.$ = jQuery;
})(window);jquery框架的实现原理：
/******************** jQuery 框架部分 ************************/
(function (w, undefined)
{
//第一步：创建一个jQuery函数
var jQuery = function ()
{
//第四步：
return new jQuery.fn.init();
}
//第三步：
jQuery.fn = jQuery.prototype; //是覆盖prototype
jQuery.fn = {
//当创建了一个函数之后，js源码会自动生成 jQuery.prototype.constructor = jQuery;
//在jQuery中使用这个是为了防止恶意修改：如 jQuery.prototype.constructor = Array;
constructor: jQuery
, init: function ()
{
return this;
}
, };
jQuery.fn.init.prototype = jQuery.fn; //如果不使用这个，在第四步当中是无法使用new的
//第五步：使用extend将jQuery模块化（其实原码并不是这样的）这里使用了拷贝，关于拷贝请看 4.js浅拷贝与深拷贝
//好处：插件扩展时直接使用此方法
jQuery.fn.extend = jQuery.extend = function ()
{
var target = this
, source = arguments[0] ||
{};
for (var key in source)
{
if (source.hasOwnProperty(key))
{
jQuery.fn[key] = jQuery[key] = source[key];
}
}
return target;
}
//第六步：模块一
jQuery.fn.extend(
{
html: function () {}
, text: function () {}
, });
//第六步：模块二
jQuery.extend(
{
ajax: function ()
{
//处理json格式的参数及回调函数success,error
console.log("ajax method");
}
, each: function () {}
, });
//第二步：对外提供一个接口
w.jQuery = w.$ = jQuery;
})(window);
//测试1
jQuery.ajax();
//测试2：外部框架的扩展
/******************** 基于jQuery框架的ui框架部分 ************************/
(function (w, jQuery)
{
//jQuery对象的方法扩展
jQuery.fn.extend(
{
drag: function ()
{
console.log("drag method");
}
, dialog: function ()
{
console.log("dialog method");
}
, });
//jQuery类的方法扩展
jQuery.extend(
{
tool: function ()
{
console.log("tool method");
},
//....
});
})(window, jQuery);示例：
<html>
<head>
<script>
(function(win, undefined){
var doc = win.document;
var loc = win.location;
var jQuery;
jQuery = function(selector, context){
return new jQuery.fn.init(selector, context);
}
var _jQuery = win.jQuery, _$ = win.$;
jQuery.fn = jQuery.prototype;
jQuery.fn = {
constructor: jQuery,
init : function(selector, context){
if(selector.charAt(0)=="#"){
this.context = doc.getElementById(selector.substr(1));
}else if(selector.charAt(0)=="."){
this.context = doc.getElementsByName(selector.substr(1));
}else if(selector.charAt(0)==":"){
this.context = doc.getElementsByTagName(selector.substr(1));
}else{
this.context = doc.getElementsByTagName(selector);
}
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn;
jQuery.fn.extend = jQuery.extend = function() {
var target = this;
var source = agruments[0] || { };
for (var p in source) {
if (source.hasOwnProperty(p)) {
target[p] = source[p];
}
}
return target;
}
// 对象的方法
jQuery.fn.extend( {
val : function() {
if((typeof _value)=="undefined"){
return this.context.value;
}else if((typeof _value)=="string"){
return this.context.value=_value;
}
},
html : function() {},
text : function() {},
attr : function() {},
prop : function() {},
//...
});
// CSS操作
jQuery.fn.extend( {
addClass : function() {},
removeClass : function() {},
css : function() {},
//...
});
// 插件扩展的方法
jQuery.extend( {
ajax: function() {},
each: function() {},
when: function() {},
//...
});
// 对外提供的接口，即使用$ 或 jQuery
win.jQuery = win.$ = jQuery;
})(window);
window.onload = function(){
var value = jQuery("#test").val();
console.log("------"+value);
}
</script>
</head>
<body>
<input type="text" id="test" value="123456" />
</body>
</html>对于jquery框架的原理你都了解了吗?之前还给大家介绍过jquery框架的特点，也可以去了解一下哦。
希望上面的内容可以对你有所帮助，更多关于jquery框架的入门知识，请继续关注本站来进行了解吧，更多java常见问题为你解答。
推荐阅读：