jQuery.API源码深入剖析以及应用实现 - 核心函数篇
2010-09-14 13:38:00 来源:WEB开发网前言
Jquery(http://jquery.com/)是一个轻量级,快速简洁的Javascript框架,它的容量小巧,简洁和简短的语法,容易记;用户能更方便地处理HTML DOM、Events、实现动画效果,并且提供Ajax的支持。目前最新版本为jQuery 1.3.1(http://jqueryjs.googlecode.com/files/jquery-1.3.1.js),这系列文章将对该版本的源码进行阐述。
现在开始本系列的第一篇,Jquery核心函数,内容主要包括:
分析
1. 在Jquery的应用开发中,我们经常看到这样的代码:
$("div.container").css("display","none");//将div节点下样式值为container的节点设置为不显示
varwidth=$("div.container").width();//得到div节点下样式值为container的宽度
varhtml=$(document.getElementById("result")).html();//得到id为result的节点的innerHTML值
$("#result",document.forms[0]).css("color","red");//将在第一个Form节点下id为result的字体颜色设置为红色
$("<div>hello,world</div>").appendTo("#result");//将HTML字符串信息内部追加到id为result的节点末尾
那么$(...)里面的参数,Jquery API中是怎样辨认参数是表达式,id,HTML字符串,还是DOM元素呢?
现在我们来深入剖析Jquery源码。
2. 这里,我先来做个测试,我将Jquery API简化为这样的代码:
(function(){
varwindow=this,
jQuery=window.jQuery=window.$=function(selector,context){
returnnewjQuery.fn.init(selector,context);
};
jQuery.fn=jQuery.prototype={
init:function(selector,context){
alert(selector);//弹出警告框
}
};
})();
window.onload=function(){
$("div.container");//得到“div.container”
$("#result");//得到“#result”
$("<div>hello,world</div>");//得到“<div>hello,world</div>”
$(document.getElementById("result"));//得到“[object]”
}
更多精彩
赞助商链接