js 框架封装(可直接使用——不依赖jquery)

javascript

浏览数:463

2019-1-8

片段 1片段 2片段 3片段 4片段 5片段 6片段 7


js 框架封装

//定义一个对象 - 名字是$
var $$ = function() {};
//第二种写法
$$.prototype = {
    //去除左边空格
    ltrim:function(str){
        return str.replace(/(^\s*)/g,'');
    },
    //去除右边空格
    rtrim:function(str){
        return str.replace(/(\s*$)/g,'');
    },
    //去除空格
    trim:function(str){
        return str.replace(/(^\s*)|(\s*$)/g, '');
    },
    //ajax - 前面我们学习的
    myAjax:function(URL,fn){
        var xhr = createXHR();  //返回了一个对象,这个对象IE6兼容。
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    fn(xhr.responseText);
                }else{
                    alert("错误的文件!");
                }
            }
        };
        xhr.open("get",URL,true);
        xhr.send();

        //闭包形式,因为这个函数只服务于ajax函数,所以放在里面
        function createXHR() {
            //本函数来自于《JavaScript高级程序设计 第3版》第21章
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
                if (typeof arguments.callee.activeXString != "string") {
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                            "MSXML2.XMLHttp"
                        ],
                        i, len;

                    for (i = 0, len = versions.length; i < len; i++) {
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            //skip
                        }
                    }
                }

                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
    },
    //tab
    tab:function(id) {
        //如何获取某个父元素下面的子元素
        var box = document.getElementById(id);
        var spans = box.getElementsByTagName('span');
        var lis = box.getElementsByTagName('li');       //两步走
        //第一步: 先把上半部分实现
        //群体绑定事件  -- 对所有的span绑定事件
        //群体绑定事件
        for(var i=0;i<spans.length;i++) {
            //相亲法则  -- 给男一号一个代号  --  怎么给 -- 自定义属性
            spans[i].index=i;
            spans[i].onmouseover = function() {
                //排他思想 --  将所有的span置为默认状态  --- 然后再将当前鼠标移上的span置为class -- select
                for(var i=0;i<spans.length;i++) {
                    spans[i].className='';
                    lis[i].className='';
                }
                this.className='select';
                lis[this.index].className='select';
            }
        }

    },
    //简单的数据绑定formateString
    formateString:function(str, data){
        return str.replace(/@\((\w+)\)/g, function(match, key){
            return typeof data[key] === "undefined" ? '' : data[key]});
    },
    //给一个对象扩充功能
    extendMany:function() {
        var key,i = 0,len = arguments.length,target = null,copy;
        if(len === 0){
            return;
        }else if(len === 1){
            target = this;
        }else{
            i++;
            target = arguments[0];
        }
        for(; i < len; i++){
            for(key in arguments[i]){
                copy = arguments[i][key];
                target[key] = copy;
            }
        }
        return target;
    },
    extend:function(tar,source) {   //右边的赋值到左边的
        //遍历对象
        for(var i in source){
            tar[i] = source[i];
        }
        return tar;
    },
    //随机数
    random: function (begin, end) {
        return Math.floor(Math.random() * (end - begin)) + begin;
    },
    //给一个对象扩充功能
    extendMany:function() {
        var key,i = 0,len = arguments.length,target = null,copy;
        if(len === 0){
            return;
        }else if(len === 1){
            target = this;
        }else{
            i++;
            target = arguments[0];
        }
        for(; i < len; i++){
            for(key in arguments[i]){
                copy = arguments[i][key];
                target[key] = copy;
            }
        }
        return target;
    },
    extend:function(tar,source) {
        //遍历对象
        for(var i in source){
            tar[i] = source[i];
        }
        return tar;
    },
    //数据类型检测
    isNumber:function (val){
        return typeof val === 'number' && isFinite(val)
    },
    isBoolean:function (val) {
        return typeof val ==="boolean";
    },
    isString:function (val) {
        return typeof val === "string";
    },
    isUndefined:function (val) {
        return typeof val === "undefined";
    },
    isObj:function (str){
        if(str === null || typeof str === 'undefined'){
            return false;
        }
        return typeof str === 'object';
    },
    isNull:function (val){
        return  val === null;
    },
    isArray:function (arr) {
        if(arr === null || typeof arr === 'undefined'){
            return false;
        }
        return arr.constructor === Array;
    }
}
//在框架中实例化,这样外面使用的使用就不用实例化了
$$ = new $$();

//封装事件框架(把右边的对象赋值到左变的)
$$.extend($$,{
    on: function (id, type, fn){
        var dom = $$.isString(id)?document.getElementById(id):id;
        //如果支持
        //W3C版本 --火狐 谷歌 等大多数浏览器
        //如果你想检测对象是否支持某个属性,方法,可以通过这种方式
        if(dom.addEventListener ){
            dom.addEventListener(type, fn, false);
        }else if(dom.attachEvent){
            //如果支持 --IE
            //
            dom.attachEvent('on' + type, fn);
        }
    },
    un:function(id, type, fn){
        var dom = $$.isString(id)?document.getElementById(id):id;
        if(dom.removeEventListener){
            dom.removeEventListener(type, fn);
        }else if(dom.detachEvent){
            dom.detachEvent(type, fn);
        }
    },
    trigger: function(id,type){
        var dom = $$.isString(id)?document.getElementById(id):id;
        // 现代浏览器
        if(dom.dispatchEvent){
            // 创建事件
            var evt = document.createEvent('Event');
            // 定义事件的类型
            evt.initEvent(type, true, true);
            // 触发事件
            dom.dispatchEvent(evt);
            // IE
        } else if(dom.fireEvent){
            dom.fireEvent('on' + type);
        }
    },
    //事件基础
    getEvent:function(event){
        return event?event:window.event;
    },
    //获取目标
    GetTarget :function(event){
        var e = $$.getEvent(event);
        return e.target|| e.srcElement;
    },
    //组织默认行为
    preventDefault:function(event){
        var event = $$.getEvent(event);
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    //组织冒泡
    stopPropagation:function(event){
        var event = $$.getEvent(event);
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
})

//封装选择框架(把右边的对象赋值到左变的)
$$.extend($$,{
    //id选择器
    $id:function(id){
        return document.getElementById(id);
    },
    //tag选择器
    $tag:function(tag,context){
        if(typeof context == 'string'){
            context = $$.$id(context);
        }

        if(context){
            return context.getElementsByTagName(tag);
        }else{
            return document.getElementsByTagName(tag);
        }
    },
    //class选择器
    $class:function(className,context){
        var i=0,len,dom=[],arr=[];
        //如果传递过来的是字符串 ,则转化成元素对象
        if($$.isString(context)){
            context = document.getElementById(context);
        }else{
            context = document;
        }
//        如果兼容getElementsByClassName
        if(context.getElementsByClassName){
            return context.getElementsByClassName(className);
        }else{
            //如果浏览器不支持
            dom = context.getElementsByTagName('*');

            for(i;len=dom.length,i<len;i++)
            {
                if(dom[i].className)
                {
                    arr.push(dom[i]);
                }
            }
        }
        return arr;
    },
    //分组选择器
    $group:function(content) {
        var result=[],doms=[];
        var arr = $$.trim(content).split(',');
        //alert(arr.length);
        for(var i=0,len=arr.length;i<len;i++) {
            var item = $$.trim(arr[i])
            var first= item.charAt(0)
            var index = item.indexOf(first)
            if(first === '.') {
                doms=$$.$class(item.slice(index+1))
                //每次循环将doms保存在reult中
                //result.push(doms);//错误来源

                //陷阱1解决 封装重复的代码成函数
                pushArray(doms,result)

            }else if(first ==='#'){
                doms=[$$.$id(item.slice(index+1))]//陷阱:之前我们定义的doms是数组,但是$id获取的不是数组,而是单个元素
                //封装重复的代码成函数
                pushArray(doms,result)
            }else{
                doms = $$.$tag(item)
                pushArray(doms,result)
            }
        }
        return result;

        //封装重复的代码
        function pushArray(doms,result){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }
    },
    //层次选择器
    $cengci:function (select){
        //个个击破法则 -- 寻找击破点
        var sel = $$.trim(select).split(' ');
        var result=[];
        var context=[];
        for(var i = 0, len = sel.length; i < len; i++){
            result=[];
            var item = $$.trim(sel[i]);
            var first = sel[i].charAt(0)
            var index = item.indexOf(first)
            if(first ==='#'){
                //如果是#,找到该元素,
                pushArray([$$.$id(item.slice(index + 1))]);
                context = result;
            }else if(first ==='.'){
                //如果是.
                //如果是.
                //找到context中所有的class为【s-1】的元素 --context是个集合
                if(context.length){
                    for(var j = 0, contextLen = context.length; j < contextLen; j++){
                        pushArray($$.$class(item.slice(index + 1), context[j]));
                    }
                }else{
                    pushArray($$.$class(item.slice(index + 1)));
                }
                context = result;
            }else{
                //如果是标签
                //遍历父亲,找到父亲中的元素==父亲都存在context中
                if(context.length){
                    for(var j = 0, contextLen = context.length; j < contextLen; j++){
                        pushArray($$.$tag(item, context[j]));
                    }
                }else{
                    pushArray($$.$tag(item));
                }
                context = result;
            }
        }

        return context;

        //封装重复的代码
        function pushArray(doms){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }
    },
    //多组+层次
    $select:function(str) {
        var result = [];
        var item = $$.trim(str).split(',');
        for(var i = 0, glen = item.length; i < glen; i++){
            var select = $$.trim(item[i]);
            var context = [];
            context = $$.$cengci(select);
            pushArray(context);

        };
        return result;

        //封装重复的代码
        function pushArray(doms){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }
    },
    //html5实现的选择器
    $all:function(selector,context){
        context = context || document;
        return  context.querySelectorAll(selector);
    },
})

//封装css框架(把右边的对象赋值到左变的)
$$.extend($$,{
    //样式
    css:function(context, key, value){
        console.log('dfdfd')
        var dom = $$.isString(context)?$$.$all(context) : context;
        //如果是数组
        if(dom.length){
            //先骨架骨架 -- 如果是获取模式 -- 如果是设置模式
            //如果value不为空,则表示设置
            if(value){
                for(var i = dom.length - 1; i >= 0; i--){
                    setStyle(dom[i],key, value);
                }
                //            如果value为空,则表示获取
            }else{
                return getStyle(dom[0]);
            }
            //如果不是数组
        }else{
            if(value){
                setStyle(dom,key, value);
            }else{
                return getStyle(dom);
            }
        }
        function getStyle(dom){
            if(dom.currentStyle){
                return dom.currentStyle[key];
            }else{
                return getComputedStyle(dom,null)[key];
            }
        }
        function setStyle(dom,key,value){
            dom.style[key] = value;
        }
    },
    cssNum:function (context, key){
        return parseFloat($$.css(context, key))
    },
    //显示
    show:function (content){
        var doms =  $$.$all(content)
        for(var i= 0,len=doms.length;i<len;i++){
            $$.css(doms[i], 'display', 'block');
        }
    },
    //隐藏和显示元素
    hide:function (content){
        var doms =  $$.$all(content)
        for(var i= 0,len=doms.length;i<len;i++){
            $$.css(doms[i], 'display', 'none');
        }
    },
    //元素高度宽度概述
    //计算方式:clientHeight clientWidth innerWidth innerHeight
    //元素的实际高度+border,也不包含滚动条
    Width:function (id){
        return $$.$id(id).clientWidth
    },
    Height:function (id){
        return $$.$id(id).clientHeight
    },  //元素的滚动高度和宽度
    //当元素出现滚动条时候,这里的高度有两种:可视区域的高度 实际高度(可视高度+不可见的高度)
    //计算方式 scrollwidth
    scrollWidth:function (id){
        return $$.$id(id).scrollWidth
    },
    scrollHeight:function (id){
        return $$.$id(id).scrollHeight
    },  //元素滚动的时候 如果出现滚动条 相对于左上角的偏移量
    //计算方式 scrollTop scrollLeft
    scrollTop:function (id){
        return $$.$id(id).scrollTop
    },
    scrollLeft:function (id){
        return $$.$id(id).scrollLeft
    },

    //获取屏幕的高度和宽度
    screenHeight:function (){
        return  window.screen.height
    },
    screenWidth:function (){
        return  window.screen.width
    },  //文档视口的高度和宽度
    wWidth:function (){
        return document.documentElement.clientWidth
    },
    wHeight:function (){
        return document.documentElement.clientHeight
    },
    //文档滚动区域的整体的高和宽
    wScrollHeight:function () {
        return document.body.scrollHeight
    },
    wScrollWidth:function () {
        return document.body.scrollWidth
    },
    //获取滚动条相对于其顶部的偏移
    wScrollTop:function () {
        var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
        return scrollTop
    },
    //获取滚动条相对于其左边的偏移
    wScrollLeft:function () {
        var scrollLeft = document.body.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
        return scrollLeft
    }
})

//封装属性框架(把右边的对象赋值到左变的)
$$.extend($$,{
    //属性操作,获取属性的值,设置属性的值 at tr('test','target','_blank')
    attr:function(content, key, value){
    var dom =  $$.$all(content);
//        如果是数组  比如tag
    if(dom.length){
        if(value){
            for(var i= 0, len=dom.length; i <len; i++){
                dom[i].setAttribute(key, value);
            }
        }else{
            return dom[0].getAttribute(key);
        }
//            如果是单个元素  比如id
    }else{
        if(value){
            dom.setAttribute(key, value);
        }else{
            return dom.getAttribute(key);
        }
    }
},
    //动态添加和移除class
    addClass:function (context, name){
    var doms = $$.$all(context);
    //如果获取的是集合
    if(doms.length){
        for(var i= 0,len=doms.length;i<len;i++){
            addName(doms[i]);
        }
        //如果获取的不是集合
    }else{
        addName(doms);
    }
    function addName(dom){
        dom.className = dom.className + ' ' + name;
    }
},
    removeClass:function (context, name){
    var doms = $$.$all(context);
    if(doms.length){
        for(var i= 0,len=doms.length;i<len;i++){
            removeName(doms[i]);
        }
    }else{
        removeName(doms);
    }
    function removeName(dom){
        dom.className = dom.className.replace(name, '');
    }
},
    //判断是否有
    hasClass:function(context,name){
    var doms = $$.$all(context)
    var flag = true;
    for(var i= 0,len=doms.length;i<len;i++){
        flag = flag && check(doms[i],name)
    }

    return flag;
    //判定单个元素
    function check(element,name){
        return -1<(" "+element.className+" ").indexOf(" "+name+" ")
    }
},
    //获取
    getClass:function (id){
    var doms = $$.$all(id)
    return $$.trim(doms[0].className).split(" ")
}
})

//内容框架(把右边的对象赋值到左变的)
$$.extend($$,{
    //innerHTML的函数版本
    html:function (context, value){
        var doms = $$.$all(context);
        //设置
        if(value){
            for(var i= 0,len= doms.length; i<len; i++){
                doms[i].innerHTML = value;
            }
        }else{
            return doms[0].innerHTML
        }
}
})

//封装DOM框架 -- 放在后面
$$.extend($$,{
    //选择
    eq:function(){},
    first:function(){},
    last:function(){},
    //元素的插入和删除 克隆
    append:function(){},
    empty:function(){},
    remove:function(){},
    clone:function(){}
})

//封装json框架(把右边的对象赋值到左变的)
$$.extend($$,{
    //将json转换成字符串
    sjson:function (json) {
        return JSON.stringify(json);
    },
    //将字符串转成json
    json:function (str) {
        return eval(str);
    }
})

//缓存框架 - 内存篇(把右边的对象赋值到左变的)
$$.cache = {
    data:[],
    get:function(key){
        console.log('111')
        var value = null;
        console.log(this.data)
        for(var i= 0,len=this.data.length;i<len; i++){
            var item = this.data[i]
            if (key == item.key) {
                value = item.value;
            }
        }
        console.log('get'+value)
        return value;
    },
    add:function(key,value){
        var json= { key: key, value: value};
        this.data.push(json);
    },
    delete:function(key){
        var status = false;
        for(var i= 0,len=this.data.length;i<len; i++){
            var item = this.data[i]
            // 循环数组元素
            if (item.key.trim() == key) {
                this.data.splice(i, 1);//开始位置,删除个数
                status = true;
                break;
            }
        }
        return status;
    },
    update:function(key,value){
        var status = false;
        // 循环数组元素
        for(var i= 0,len=this.data.length;i<len; i++){
            var item = this.data[i]
            if (item.key.trim() === key.trim()) {
                item.value = value.trim();
                status = true;
                break;
            }
        }
        return status;
    },
    isExist:function(key){
        for(var i= 0,len=this.data.length;i<len; i++){
            var item = this.data[i]
            if (key === item.key) {
                return true;
            }else{
                return false;
            }
        }
    }
}

//cookie框架
$$.cookie = {
    //设置coolie
    setCookie: function (name,value,days,path){
    var name = escape(name);
    var value = escape(value);
    var expires = new Date();
    expires.setTime(expires.getTime() + days*24*60*60*1000);
    path = path == "" ? "" : ";path=" + path;
    _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
    document.cookie = name + "=" + value + _expires + path;
},
    //获取cookie值
    getCookie:function (name){
    var name = escape(name);
    //读cookie属性,这将返回文档的所有cookie
    var allcookies = document.cookie;

    //查找名为name的cookie的开始位置
    name += "=";
    var pos = allcookies.indexOf(name);
    //如果找到了具有该名字的cookie,那么提取并使用它的值
    if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败
        var start = pos + name.length;                  //cookie值开始的位置
        var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
        if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie
        var value = allcookies.substring(start,end);  //提取cookie的值
        return unescape(value);                           //对它解码
    }
    else return "";                                             //搜索失败,返回空字符串
},
    //删除cookie
    deleteCookie:function (name,path){
    var name = escape(name);
    var expires = new Date(0);
    path = path == "" ? "" : ";path=" + path;
    document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}
}

//本地存储框架
$$.store = (function () {
    var api               = {},
        win               = window,
        doc               = win.document,
        localStorageName  = 'localStorage',
        globalStorageName = 'globalStorage',
        storage;

    api.set    = function (key, value) {};
    api.get    = function (key)        {};
    api.remove = function (key)        {};
    api.clear  = function ()           {};

    if (localStorageName in win && win[localStorageName]) {
        storage    = win[localStorageName];
        api.set    = function (key, val) { storage.setItem(key, val) };
        api.get    = function (key)      { return storage.getItem(key) };
        api.remove = function (key)      { storage.removeItem(key) };
        api.clear  = function ()         { storage.clear() };

    } else if (globalStorageName in win && win[globalStorageName]) {
        storage    = win[globalStorageName][win.location.hostname];
        api.set    = function (key, val) { storage[key] = val };
        api.get    = function (key)      { return storage[key] && storage[key].value };
        api.remove = function (key)      { delete storage[key] };
        api.clear  = function ()         { for (var key in storage ) { delete storage[key] } };

    } else if (doc.documentElement.addBehavior) {
        function getStorage() {
            if (storage) { return storage }
            storage = doc.body.appendChild(doc.createElement('div'));
            storage.style.display = 'none';
            // See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx
            // and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx
            storage.addBehavior('#default#userData');
            storage.load(localStorageName);
            return storage;
        }
        api.set = function (key, val) {
            var storage = getStorage();
            storage.setAttribute(key, val);
            storage.save(localStorageName);
        };
        api.get = function (key) {
            var storage = getStorage();
            return storage.getAttribute(key);
        };
        api.remove = function (key) {
            var storage = getStorage();
            storage.removeAttribute(key);
            storage.save(localStorageName);
        }
        api.clear = function () {
            var storage = getStorage();
            var attributes = storage.XMLDocument.documentElement.attributes;;
            storage.load(localStorageName);
            for (var i=0, attr; attr = attributes[i]; i++) {
                storage.removeAttribute(attr.name);
            }
            storage.save(localStorageName);
        }
    }
    return api;
})();


缓存使用(内存)使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div></div>
</body>
</html>
<script src='../框架.js'></script>
<script>

    $$.cache.add('nav','东方不败')   //缓存添加
    $$.cache.add('tab','笑傲江湖')    
    console.log($$.cache.get('nav'))   //缓存获取
    console.log($$.cache.get('tab'))   
    $$.cache.update('nav','更新数据')   //缓存跟新
    console.log($$.cache.get('nav'))    //json和字符串转换
    var json = {key:1,value:1}
    var sjson = $$.sjson(json)
    console.log($$.json(json))
    console.log(sjson)
</script>


cookie 使用

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>登录</title>
</head>

<body>
<form action="">
    <p>
        <span>UserName:</span>
        <input id="userName" type="text" value=""/></p>
    <p>
        <span>Password:</span>
        <input id="password" type="password" value=""/></p>
    <p>
        <span style="font-size:12px; color:blue;">记住密码10天</span>
        <input id="saveCookie" type="checkbox" value="" /></p>
    <p>
        <input id="submit" type="button" value="GO" />
    </p>
</form>
</body>
</html>
<script src='../框架.js'></script>
<script>

    window.onload = function(){
        //分析cookie值,显示上次的登陆信息
        var userNameValue = $$.cookie.getCookie("userName");
        $$.$id("userName").value = userNameValue;

        var passwordValue = $$.cookie.getCookie("password");
        $$.$id("password").value = passwordValue;

        //写入点击事件
        $$.$id("submit").onclick = function() {
            var userNameValue = $$.$id("userName").value;//取前台用户名的值
            var passwordValue = $$.$id("password").value; //取前台密码的值

            //服务器验证(模拟) 这里是对用户的一个验证.在项目中,你读取数据库的代码写在这

            //如果存在这个用户,就把用户名和密码存进cookie
            if(true){
                $$.cookie.setCookie("userName",$$.$id("userName").value,10,"/");
                $$.cookie.setCookie("password",$$.$id("password").value,10,"/");
                alert("登陆成功,欢迎你," + userNameValue + "!");
            }else {
                alert("用户名或密码错误,请重新输入!");
            }
        }
    }
</script>


本地存储框架使用

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>登录</title>
</head>

<body>
<form action="">
    <p>
        <span>UserName:</span>
        <input id="userName" type="text" value=""/></p>
    <p>
        <span>Password:</span>
        <input id="password" type="password" value=""/></p>
    <p>
        <span style="font-size:12px; color:blue;">记住密码10天</span>
        <input id="saveCookie" type="checkbox" value="" /></p>
    <p>
        <input id="submit" type="button" value="GO" />
    </p>
</form>
</body>
<script src='../框架.js'></script>
</html>
<script src='本地存储框架(以封装在框架里面).js'></script>
<script>

    //cookie可能被浏览器进制 cookie不安全
    //cookie有大小显示 -- 4KB
    window.onload = function(){
        //分析cookie值,显示上次的登陆信息
        var userNameValue = store.get("name");  //重本地存储里获取
        $$.$id("userName").value = userNameValue;

        var passwordValue = store.get("password");
        $$.$id("password").value = passwordValue;

        //写入点击事件
        $$.$id("submit").onclick = function() {
            var userNameValue = $$.$id("userName").value;//取前台用户名的值
            var passwordValue = $$.$id("password").value; //取前台密码的值

            //服务器验证(模拟) 这里是对用户的一个验证.在项目中,你读取数据库的代码写在这

            //如果存在这个用户,就把用户名和密码存进cookie
            if(true){
                store.set("name",$$.$id("userName").value);  //往本地存储存放
                store.set("password",$$.$id("password").value);
                alert("登陆成功,欢迎你," + userNameValue + "!");
            }else {
                alert("用户名或密码错误,请重新输入!");
            }
        }
    }
</script>


内容获取框架使用


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            color:red;
            font-size:40px;
        }
    </style>
</head>
<body>
<div id='div'>笑傲江湖</div>
<input type="input" id="input"/>
<button id="btn">button</button>
</body>
</html>
<script src='框架.js'></script>
<script>
    var dom = $$.$id('div')
    var input = $$.$id('input')
    $$.on('btn','click',function(){
        //获取内容
//        dom.innerHTML='111'
        $$.html('#div','传智播客')
        //获取表单控件内容
        input.value='111'
    })
    console.log($$.html('#div'))

</script>


属性获取框架使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            color:red;
            font-size:50px;
        }
        .hide{display: none}
        .show{display: block}
    </style>
</head>
<body>
<div class='div'>笑傲江湖</div>
<div class='div'>笑傲江湖</div>
<div class='div'>笑傲江湖</div>
<div class='div'>笑傲江湖</div>
<div id='div' class='div test1 test3'>笑傲江湖</div>
<button id='show'>显示</button>
<button id='hide'>隐藏</button>
</body>
</html>
<script src='框架.js'></script>
<script>

    $$.$id('show').onclick=function(){   //找到id为show的并绑定点击事件
        $$.removeClass('.div','hide')   //移除 hide
    }
    $$.$id('hide').onclick=function(){
        $$.addClass('.div','hide')       //添加 hide
    }

    //判断是否有class
    console.log($$.hasClass('.div','div'))   //判断是否有 div
    console.log($$.hasClass('#show','div'))

    //获取class
    console.log($$.getClass('#div'))         //获取div的类名

</script>


css 属性框架使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            background:red;
            font-size:40px;
        }
    </style>
</head>
<body>
 
 //css 设置
    <div id="container">
        <p>英雄联盟</p>
        <p>梦幻西游</p>
    </div>

//css 宽高
    <div id="div">
        <div id="child"></div>
    </div>

    <div id="div3">
        1111111111111111
    </div>

//css 位置
    <div id="div">
        <div id="child">
            <div id="grandson"></div>
        </div>
    </div>

//css 隐藏和显示
    <div class='div'>传智播客</div>
    <div class='div'>传智播客</div>
    <div class='div'>传智播客</div>
    <div class='div'>传智播客</div>
    <button id='hide'>隐藏</button>
    <button id='show'>显示</button>
<script src='框架.js'></script>
<script type="text/javascript">

    //css设置
    $$.css('p','color','yellow')     //p为标签   color 为属性  yellow 为值
    $$.css('p','opacity','0.2')

    console.log($$.cssNum('p','width'))
    console.log($$.cssNum('p','opacity'))   //宽高
    console.log('父亲')
    console.log($$.Width('div'))
    console.log($$.Height('div'))

    console.log('儿子')
    console.log($$.Width('child'))
    console.log($$.Height('child'))

    console.log('第三个元素')
    console.log($$.Width('div3'))
    console.log($$.Height('div3'))
   
    console.log('含有滚动条的高度和宽度')
    console.log($$.scrollWidth('div3'))
    console.log($$.scrollHeight('div3'))
   
    console.log('含有滚动条时候偏移量')
    console.log($$.scrollTop('div3'))
    console.log($$.scrollLeft('div3'))

   //获取屏幕的高度和宽度
    console.log($$.screenHeight())
    console.log($$.screenWidth())

    //文档可视区域的高度和宽度:
    console.log($$.wHeight())
    console.log($$.wWidth())
  
    //获取滚动条宽度和高度
    console.log($$.wScrollHeight())
    console.log($$.wScrollWidth())

    //获取滚动条相对于其顶部的偏移
    console.log($$.wScrollTop())
    console.log($$.wScrollLeft())   //位置
    console.log('相对坐标')
    console.log( $$.offset('div'))
    console.log( $$.offset('child'))
    console.log( $$.offset('grandson'))

    console.log('绝对坐标')
    console.log( $$.position('div'))
    console.log( $$.position('child'))
    console.log( $$.position('grandson'))

    //隐藏和显示
     $$.on('hide','click',function(){
        $$.hide('.div')
    })

    $$.on('show','click',function(){
        $$.show('.div')
    })
</script>
</body>
</html>