简单的可兼容所有浏览器的操作html元素的javascript框架
1.根据id名称取元素 $id(idName)
2.根据class定义取元素 $class(className)返回所有class被定义成className的元素数组,或者$Eclass(className)返回第一个元素
3.根据tag名称取元素 $tag(tagName)返回所有标签名称为tagName的元素数组,或者$Etag(tagName)返回第一个元素
4.父子关系下取元素 $dom(id#idName class#className tag#tagName)返回idName元素下的所有class为className的所有元素的标签名称为tagName的元素数组,或者$Edom(id#idName class#className tag#tagName)返回第一个元素,每个关系之间以空格分隔,对应关系以井号分隔,关系之间可任意顺序
5.取出来的元素会附带有扩展方法
a.getAttr(attrName) 取属性
b.setAttr(attrName, attrValue) 设置属性
c.getStyle(styleName) 取样式
d.setStyle(styleName,styleValue) 设置样式
e.getVal() 取值,如果是input,select,textarea取出来的是value的值,其它标签的话取出来的是内嵌html
f.setVal(value) 设置值, 如果是input,select,textarea设置的是value的值,其它标签的话设置的是内嵌html
g.show() 显示元素
h.hide() 隐藏元素
5.AJAX操作使用函数,ajax(type,url,callback,data);
a.type 提交类型
b.url 提交地址
c.callback 回调函数
d.data 待提交数据(a=1&b=2)
6.Cookie操作使用函数,cookie.set(k,v,e) k名称 v值 e有效期(秒) cookie.get(k)
1. [文件] JSTools.js
var JSTools = {version:1.0,author:'lymz',email:'lymz.86@gmail.com'};
var $id = function(id){
return $extend(document.getElementById(id));
};
var $class = function(clas){
return $extend(getElementsByClassName(clas));
};
var $Eclass = function(clas){
var t = $class(clas);
return t.length > 0 ? t[0] : null;
};
var $tag = function(tag){
return $extend(document.getElementsByTagName(tag));
};
var $Etag = function(tag){
var t = $tag(tag);
return t.length > 0 ? t[0] : null;
};
var $dom = function(dom){
var t = dom.split(' ');
var p=null;
for(var i = 0,l = t.length;i < l;++ i) {
if(i > 0 && !p)
break;
else if(i > 0 && p) {
if(p.length != undefined)
p = p[0];
}
var tt = t[i].split('#');
if(tt[0] == 'id')
p = $id(tt[1]);
else if(tt[0] == 'class') {
tt[1] = tt[1].split('|');
if(p)
p = getElementsByClassName(tt[1][0],p);
else
p = $class(tt[1][0]);
if(tt[1][1])
p = $filter(p,tt[1][1]);
} else if(tt[0] == 'tag') {
tt[1] = tt[1].split('|');
if(p)
p = p.getElementsByTagName(tt[1][0]);
else
p = $tag(tt[1][0]);
if(tt[1][1])
p = $filter(p,tt[1][1]);
} else
p = null;
}
return $extend(p);
};
var $filter = function(p,filter){
if(p == null)
return null;
var tt = new Array();
if(filter.indexOf('=') !== -1) {
var t = filter.split('=');
for(var i = 0,j = 0,l = p.length;i < l;++ i) {
if(p[i].getAttribute(t[0]) == t[1])
tt[j++] = p[i];
}
} else if(filter.indexOf('^') !== -1) {
var t = filter.split('^');
for(var i = 0,j = 0,l = p.length;i < l;++ i) {
if(p[i].getAttribute(t[0]).toLowerCase() != t[1].toLowerCase())
tt[j++] = p[i];
}
} else {
for(var i = 0,j = 0,l = p.length;i < l;++ i) {
if(p[i].nodeName.toLowerCase() == filter.toLowerCase())
tt[j++] = p[i];
}
}
return tt;
};
var $Edom = function(dom){
var t = $dom(dom);
if(t != null && t.length != undefined)
return t[0];
else
return t;
};
var $extend = function(object){
if(!object)
return object;
var t = false;
if(object.length == undefined){
object = new Array(object);
t = true;
}
for(var i = 0,l = object.length;i < l;++ i) {
object[i].getAttr = function(attr){return this.getAttribute(attr);};
object[i].setAttr = function(k,v){return this.setAttribute(k,v);};
object[i].getStyle = function(k){return eval('this.style.'+k);};
object[i].setStyle = function(k,v){return eval('this.style.'+k+'=\''+v+'\'');};
object[i].getVal = function(){return this.value!=undefined?this.value:this.innerHTML;};
object[i].setVal = function(v){if(this.value!=undefined)this.value=v;else this.innerHTML=v;return true;};
object[i].show = function(){return this.setStyle('display','block');};
object[i].hide = function(){return this.setStyle('display','none');};
}http://www.enterdesk.com/special/meitu/
object.each=function(func){美图
if(this.length == undefined)
object = new Array(object);
var it = null;
for(var i = 0,l = object.length;i < l;++ i) {
it = object[i];
func(it,i);
}
};
return t ? object[0] : object;
};
var ajax = function(type,url,func,data){
if(window.ActiveXObject){
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
var xmlHttp=new XMLHttpRequest();
}
xmlHttp.open(type,url,true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4)
if(xmlHttp.status == 200)
if(func) func(xmlHttp.responseText);
};
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data?data:null);
};
var cookie = {
get:function(k){
var t = document.cookie.split('; ');
for(var i = 0,l = t.length;i < l;++ i) {
var tt = t[i].split('=');
if(tt[0] == k) {
return decodeURI(tt[1]);
}
}
return undefined;
},
set:function(k,v,e){
if(e) {
var d = new Date();
d.setTime(d.getTime()+(e*1000));
e = ';expires='+d.toGMTString();
} else
e = '';
document.cookie = k + '=' + v + e;
}
};
var getElementsByClassName = function(c,p){
p = p ? p : document;
var arrElements = p.getElementsByTagName('*');
var arrReturnElements = new Array();
c = c.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + c + "(\\s|$)");
var oElement;
for(var i=0; i < arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return arrReturnElements;
};
简单的可兼容所有浏览器的操作html元素的javascript框架的更多相关文章
- 一个简单有效的兼容IE7浏览器的办法
最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- Bootstrap 3兼容IE8浏览器(转)
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
- Zclip复制页面内容到剪贴板兼容各浏览器
Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...
- js兼容各个浏览器的复制功能
看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
随机推荐
- HTML5 Canvas 绘制澳大利亚国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- 重读金典------高质量C编程指南(林锐)-------第二章 程序的板式
2.1 空行 规则1:在每个类声明之后,每个函数定义结束之后加空行. 规则2:在某个函数体内,相关的不加空行,不相关的加空行. // 空行 void Function1(-) { - } // 空行 ...
- 实用国际(XX)计量单位表
很多实用附录简表:http://www.zdic.net/appendix/f1.htm 计量单位简表 时间的单位换算 : 1秒=1000毫秒(ms) 1毫秒=1/1,000秒(s) 1秒=1,00 ...
- Oracle TNS路径
修改tnsnames.oRA,监听文件 Oracle TNS路径 G:\Oracle\product\11.2.0\client_1\network\admin\tnsnames.oRA
- Ruby on Rails 路由解析
为了更好的阅读体验.欢迎訪问 作者博客原文 Route是什么 Rails中URL的约定严格基于RESTful风格的.client的请求事实上是在操作一些资源.同一资源的不同的请求动作(GET, POS ...
- Urho3D 在Win10下编辑器崩溃的解决方案
本解决方案来自于 https://github.com/urho3d/Urho3D/issues/2417 描述 在Win10中通过CMake启用URHO_ANGELSCRIPT选项的前提下生成Urh ...
- Inno Setup 使用笔记
使 用 笔 记https://blog.csdn.net/dongshibo12/article/details/79095971 1.Inno Setup 是什么?Inno Setup 是一个免费的 ...
- Windows App开发之经常使用控件与应用栏
控件的属性.事件与样式资源 怎样加入控件 加入控件的方式有多种,大家更喜欢以下哪一种呢? 1)使用诸如Blend for Visual Studio或Microsoft Visual Studio X ...
- php部分--题目:投票 重点:两个div套用,显示百分比;
1.建立两个表格:要显示百分比的话,就要在选项表中加上一列标记number 2.链接数据库,并对题目和选项进行显示 <?php $db=new MySQLi("localhost&qu ...
- Something Starts While Something Ends
(1)最终还是没能参加比赛,一次都没有机会. (2)有梦想,不到最后一刻不会放弃. (3)这里应该会搬次家,转到github上. (4)作为一个新手,什么东西都需要从头学起来,就从最基础的数据结构开始 ...