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框架的更多相关文章

  1. 一个简单有效的兼容IE7浏览器的办法

    最近发现了一个简单有效的兼容IE7浏览器的办法 直接将下面代码复制道页面 <meta http-equiv="X-UA-Compatible" content="I ...

  2. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  3. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  4. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  5. Bootstrap 3兼容IE8浏览器(转)

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  6. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

  7. js兼容各个浏览器的复制功能

    看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...

  8. JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. HTML5 Canvas 绘制英国国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  2. NSIS隐藏窗体标题栏自带的button(最大化,最小化,关闭X)

    这个问题实在八月份逛csdn论坛的时候偶然遇到的,当时比較好奇楼主为啥要隐藏关闭button.就顺口问了下,结果楼主已经弃楼.未给出原因,猜着可能是为了做自己定义页面美化,无法改变按纽外观之类的,后来 ...

  3. bat文件转换为exe文件

    批处理文件转换为exe文件(简单的处理文件),点击下载 使用超简单的了,不多说.

  4. Windows:小技巧

    点击右键,选择打开方式的时候,列表修改:单击“开始→运行”,输入Regedit,打开注册表编辑器,定位到如下分支: HKEY_CURRENT_USER\Software\ Microsoft\Wind ...

  5. C# 字节数组拼接的速度实验(Array.copy(),Buffer.BlockCopy(),Contact())

    无聊做了如题的一个算法的优劣性能比较,由于很多人都只关心结果,那么我先贴出结果如下: 由于我的测试数据量比较小,只能得出Array.Copy()和Buffer.BlockCopy()方法性能要好于Co ...

  6. MySQL数据库 常用命令

    1.MySQL常用命令 create database name;创建数据库 use databasename;选择数据库 drop database name 直接删除数据库,不提醒 show ta ...

  7. Android有关surfaceView又一次创建的问题。

    近期在做一个Android视频播放器的项目.遇到一个问题,就是锁屏之后.surfaceview就会被销毁掉,然后就会出现各种错误.到csdn论坛去发帖提问,各种所谓的大神都说,解锁屏在又一次创建一个, ...

  8. matlab中文显示乱码:控制台上的,编辑器的,图片中的

    问题:matlab脚本与函数文件的中文注释显示乱码. 环境:matlab R2016a.Windows 10 home. 解决方案: step1 检查locale值 matlab命令行键入命令 fea ...

  9. 概率图模型(PGM)学习笔记(二)贝叶斯网络-语义学与因子分解

    概率分布(Distributions) 如图1所看到的,这是最简单的联合分布案例,姑且称之为学生模型. 图1 当中包括3个变量.各自是:I(学生智力,有0和1两个状态).D(试卷难度,有0和1两个状态 ...

  10. MySQL常见的数据类型(八)

    不多说,直接上干货! MySQL常见的数据类型 一.数据类型是什么? 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 有一些数据是要存储为数字 ...