零起步学习如何写jQuery框架

2010-04-10 18:00:35   作者:不详   来源:互联网

意思是将Shaka作为这个匿名函数的参数来调用这个方法。
前面我们讲过 Shaka.fn 就是 Shaka.prototype 的别名,因此我们要在Shaka.prototype 里面添加新的方法就可以写成这样:

(function($){
       $.fn.noConflict = function(){
              window.$ = _$;//把$还给在开始处取得的引用.
       };
})(Shaka);

现在我们来看一个完整的:

<form method="post" action="" name="myform">
<h1> 我几岁了?</h1> <br />
<input id="myInput"  type="text" value="Hello world!" size="50" />
<br /><br />
<input id="otherInput"  type="text" size="50" />
</form>
<script type="text/javascript">
//我们在这里模拟一下在这之前如果加载了其它框架的情形, 这个时候window.$不为空.
window.$ = { whoAmI: function(){ alert('This function result is from other js lib.');} };
(function(){ // 创建最外层匿名函数.
window._$ = window.$;//将别的框架定义的$暂存.
//给Shaka加上$ 的别名.
var Shaka = window.Shaka = window.$ = function(selector) { return new Shaka.fn.init(selector); };
Shaka.fn = Shaka.prototype = {
init: function(selector) { if(selector) this.selector = selector; return this; },
val: function(newValue) {
//start val function body
  if(!(this.selector && this.selector.indexOf('#') == 0 && this.selector.length != 1))
   return; //简单地判断传入值非法, 最好使用正则
  var id = this.selector.substring(1);
  var obj = document.getElementById(id);
  if(obj)//如果对象存在
  {
   if(newValue == undefined)
    return obj.value;//获取目标对象的值.
   obj.value = newValue;// 将目标对象的value属性设置为newValue.
    return this; //为了使方法可以连续调用, 返回当前实例。
  }
//end val function body
}
};
Shaka.fn.init.prototype = Shaka.fn;
})();
//扩展新的方法.
(function($){
//alert(obj.fn);
$.noConflict = function(){
  window.$ = window._$;//把$还给在开始处取得的引用.
};
})(Shaka);
//如果没有引入其它的框架,可以这么写
//alert('object old value is '+$('#myInput').val());
//alert($('#myInput').val('I am 3 years now!').val());
//强制使用完整名称.
Shaka.noConflict();
alert('object old value is '+Shaka('#myInput').val());
alert(Shaka('#myInput').val('I am 5 years old now!').val());
//Shaka('#otherInput').val('这里的值是使用Shaka(\'#otherInput\').val()方法来写入的哦');
//或者可以这样写也行,仍然使用$, 把Shaka作为匿名函数的参数$传进去。
(function($){
//又可以用$了, 哈哈
$('#otherInput').val('这里的值是使用Shaka(\'#otherInput\').val()方法来写入的哦');
})(Shaka);
//现在仍然可以使用$调用其它框架的方法.
$.whoAmI();
</script>

栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享
建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客


教程排行榜
20款华丽酷炫的jQuery图片相册插件
新手教程:10个jQuery特效讲解
如何处理JS的'null'为空或不是对象
分享10款精美的焦点幻灯和图片特效jQuery插件
多款提高网页表格(table)操作易用性的jQuery插件
打造完美的jQuery网页进度条(LOADING)
20款超酷的基于jQuery的幻灯和表单插件(附...
如何把在线地图Google Maps API整合到网站中去?
jQuery 1.4.1 中文帮助文档速查表(附CHM文件下载)
最新的jQuery 1.4官方文档中文翻译版
零起步学习如何写jQuery框架
基于JQuery的上传插件Uploadify使用方法详解
jQuery的鼠标事件实例教程
lazyload:基于jQuery框架实现图片异步加载
多个增强Web设计界面的Javascript脚本代码
JS代码的window.location属性详解
下载排行榜
jQuery图片特效代码 带缩略图和文字标题简...
仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
仿QQ商城焦点图jquery幻灯特效代码
宽屏flash+xml焦点幻灯图特效代码
效果媲美flash的jQuery幻灯代码支持多种切换效果
3D立体效果的flash+xml照片墙相册展示代码
带标题和数字导航的JS焦点幻灯特效代码
31款简单实用的CSS+JS下拉菜单脚本
漂亮的jquery+Lightbox灯箱效果图片展示特效代码
基于mootools有7种效果的Gallery(画廊)幻灯相册代码
超酷HTML5图片特效代码支持全屏显示
漂亮的jquery画廊相册特效支持缩略图和键盘...
可自动展开和折叠收起的QQ在线客服代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
基于jQuery的首页自动收缩全屏广告代码
超酷3D摩天轮flash+xml幻灯相册特效源码