标签归档:jquery

自动适配jquery文件

jquery是很强大的短小精旱的javascript类库。很多时候,我们总是在加载自己的脚本时,忘记加载jquery。为了自动适配这个问题,诞生了下边这段代码。
首先用window.$判断是否加载,如果没有加载在head标签中加入script标记,表明src,然后绑定loaded事件,在其中执行依赖于jquery的代码。
具体实现如下:

function _$(fn) {
	if(!window.$){
		 var head = document.getElementsByTagName('head')[0];
		 var jquery = document.createElement("script");
		 jquery.type = "text/javascript";
		 jquery.src = "http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js";
		 if (document.all) { //如果是IE
	           jquery.onreadystatechange = function () {
	               if (jquery.readyState == 'loaded' || jquery.readyState == 'complete') {
	                	fn();
	               }
	          }
	     }  else {	//火狐浏览器
	            jquery.onload = function () {
	                   fn();
	             }
	      }
		 head.appendChild(jquery);
	}else{
		fn();
	}
}

简单用法如下:

    _$(function(){
          $(function(){
               alert("Hello world!");
          });
    });

其实还可以用_$修改一下来代替自身的$函数:只需要在内部包裹上$()就好

function _$(fn) {
	if(!window.$){
		 var head = document.getElementsByTagName('head')[0];
		 var jquery = document.createElement("script");
		 jquery.type = "text/javascript";
		 jquery.src = "http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js";
		 if (document.all) { //如果是IE
	           jquery.onreadystatechange = function () {
	               if (jquery.readyState == 'loaded' || jquery.readyState == 'complete') {
	                	  $(fn());
	               }
	          }
	     }  else {	//火狐浏览器
	            jquery.onload = function () {
	                     $(fn());
	             }
	      }
		 head.appendChild(jquery);
	}else{
		  $(fn());
	}
}

自己写的一个轻量级javascript框架的设计模式(转)

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松的实现类继承,不过javascript的类继承方法还是有的,常见的有构建函数、原型扩展、综合……,也有一些专门写类的函数,例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章

我自己写的框架也不知道叫什么名字,刚开始写的时候随手写了个W(姓拼音,之前写过jQuery弹出框插件wBox),现在写这篇文章重新整理了一下思想,换了YQ(名字拼音,你懂的~)。

核心代码

框架设计的时候尽量做到了支持链式写法,也就是返回

this

,可以$(selector).handler1().handler2()……无限写下去,只要不是有返回值的就可以继续。包括了event,dom,css,还有fadeIn,fadeOut动画(因为再重构爱墙[html5+css3]版,所有顺手加上了这个功能)。如果配合sizzle选择器就更牛了! 继续阅读

用jquery实现下拉列表的联动

相信很多人应该见过这样一个东西:

界面中有两个下拉框A和B就是这样一个东西,当点击第一个下拉框A时,第二个下拉框B随之变化。
实现思路是这个样子的。
首先根据第一个下拉框的id,选择出该对象,也就是传说中的ID选择器,$(‘#first’)。接着绑定一个change事件,$(‘#first’).change(function(){});
然后就可以在实现函数中写入实现函数,传说中的ajax。
常用的配置项有如下几项:url是请求的url,type是请求的类型分为get和post(二者的区别就不说了),data是发送到服务器上的数据,success是访问成功以后执行的函数。
成功以后,将下一个下拉框(ID为second)中的内容改变。
为操作方便,将服务器端返回json格式的数组。然后js可以利用eval将该字符串转化成数组。然后遍历该数组,组合成新的html字符串,赋值给第二个文本框中的html属性即可。
以上思路写出来的代码大致应该是这样的: 继续阅读