模拟JQuery 脚本库 fx脚本

 (function() { var fx = window.fx = window.$ = function(exp, context) { var expressCreate = /^(<(/w+)>)$/; //正则表达式判断是否是要创建标签 var expressArray = /^/w+$/; //判断是否是标签 var expressId = /^#(/w+)$/ //判断是否是更具Id回去数据 var expressClass = /^/.(/w+)$/; base = this; //设置为自己 方便时间器调用 function $isIE() { return $appName().indexOf("Internet Explorer") > 0; } function $isOpera() { return $appName().indexOf("Opera") > 0; } function $isFireFox() { return $appName().indexOf("Netscape") > 0; } function $appName() { return window.navigator.appName; } var core = function(exp, context) {//核心 var el; if (exp.nodeType) { el = exp; } else { var el = find(exp); } this.copyright = "作者:fan_mvp@hotmail.com"; function find(exp) { var el; if (exp instanceof Function) {//可能是加载事件 window.onload = exp; } else if (typeof (exp) == "string") {//判断是否是字符串 var match = expressCreate.exec(exp); //验证expressCreate if (match && match[2]) { var filter = { "a": "hyper" }; var tagName = filter[match[2]] ? filter[match[2]] : match[2]; el = document.createElement(tagName); } else { var match = expressArray.exec(exp); //判断是否是标签匹配 if (match) { el = document.getElementsByTagName(match); //根据标签名获取 } else { var match = expressId.exec(exp); //判断是否是根据Id获取数据 if (match) { el = document.getElementById(match[1]); } else { var match = expressClass.exec(exp); if (match) { var ex = match[1].replace(".", ""); for (var i = 0; i < document.all.length; i++) { var tag = document.all[i]; if (tag.nodeType == 1) { if (tag.className == ex) { el = tag; break; } else { el = document.body; } } } } else { el = document.body; } } } } } return el; } this.size = function() {//获取内容大小 if (el.nodeType) { return el.childNodes.length; } if (el.length > -1) { return el.length; } } this.appendTo = function(parent, speed) {//添加到 if (speed) { this.show(speed); } if (typeof (parent) == "string") { parent = find(parent); if (parent.length > 1) { parent = parent[0]; } else { parent = document.body; } } else if (parent.getEl) {//判断是否是本类型对象 parent = parent.getEl(); //获取对象中的标签 if (parent.length > -1) {//如果是标签数组 parent = parent[0]; //获取第一个 } } parent.appendChild(el); //添加到标签 return this; } this.getEl = function() { return el; } this.get = function(index) {//根据下标获取 if (el.length > -1) { return el[index]; } return this; } this.attr = function(name, value) { if (value) { el.setAttribute(name, value); //设置属性 } else { if (typeof (name) == "object") { for (var att in name) { if (name[att] instanceof Function) {//判断是否是绑定事件 el[att] = name[att]; } else { el.setAttribute(att, name[att]); //设置属性 } } } return el.getAttribute(name); } } this.bind = function(evtName, func) {//绑定事件 if (el.addEventListener) { el.addEventListener(evtName, func, false); //绑定事件 } else if (el.attachEvent) { el.attachEvent("on" + evtName, func); //绑定事件 } return this; } this.css = function(styleName, value) { if (value) { el.style[styleName] = value; //设置样式 return el; } else { //获取样式 if (el.style[styleName]) {//判断是否是行内样式 value = el.style[styleName]; } else if (el.currentStyle) {//是否是外部样式 IE value = el.currentStyle[styleName]; } else {//是否是外部样式 FF value = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleName); } return value; } } this.html = function(content) { if (content) { el.innerHTML += content; } else { return el.innerHTML; } } this.text = function(content) { if (content) { el.innerText = content; } else { return el.innerText; } } this.addClass = function(className) { el.className = className; } this.removeClass = function() { el.className = ""; } // this.extend = function(ext) { // for (var key in ext) { // this[key] = ext[key]; // } // } this.show = function(nTime) { if (nTime) { var alpha = 0.0; //默认透明度 var max = 1; //最大透明度 var step = 0.03; //步长 nTime = nTime / 10 / (step * 100); //时间公式 var timer = setInterval(function() { if ($isIE()) { base.css("filter", "alpha(opacity=" + (alpha * 100) + ")"); } else { base.css("opacity", alpha); } if (alpha >= max) { window.clearInterval(timer); return; } alpha += step; }, nTime); } else { this.css("display", "block"); //设置显示 if ($isIE()) { base.css("filter", "alpha(opacity=100)"); //设置透明100 } else { base.css("opacity", 100); } } } } return new core(exp, context); } //} //fx.extend = fx.fn.extend = function(ext){ // for(var key in ext){ // // } //} })();

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="lib/fx2.js" mce_src="lib/fx2.js" type="text/javascript"></mce:script> <mce:style type="text/css"><!-- .list { list-style:none; } .list li { float:left; } --></mce:style><style type="text/css" mce_bogus="1"> .list { list-style:none; } .list li { float:left; } </style> <mce:script type="text/javascript" language="javascript"><!-- $(function() { var tabControl = $("<div>"); tabControl.appendTo("body"); var tbs = $("<ul>"); tbs.addClass("list"); tbs.appendTo(tabControl); for (var i = 0; i < 5; i++) { var item = $("<li>"); item.text("item" + i); item.appendTo(tbs); item.bind("mouseover", function() { $(this).css("background", "red"); }); item.bind("mouseout", function() { $(this).css("background", "white"); }); } }); // --></mce:script> </head> <body>