关于js的零碎东西（4）

  7.解析地址栏参数

        var url="https://www.baidu.com?city=上海&id=123&name=张三&age=18";

        <1>.function getUrl(isurl){

              var pos=isurl.indexOf("?");//先找到"？"所在的下标

              var arr=isurl.slice(pos+1).split("&");//对下标进行截取

              for(var i in arr){

               //["city=上海", "id=123", "name=张三", "age=18"]

               var ind=arr[i].indexOf("=")+1;//找到"="所在的下标

               arr[i]=arr[i].slice(ind);//进行截取

              }

              return arr;

            }

            console.log(getUrl(url));// ["上海", "123", "张三", "18"]

        <2>.function getUrl(name,str){

                var pos=str.indexOf("?")+1;

                var arr=str.slice(pos).split("&");

                  for(var i in arr){

                    var newarr=arr[i].split("=");

                    if(newarr[0]==name){

                      return newarr[1];

                    }

                  }

                }

                console.log(getUrl("city",url));//上海

                console.log(getUrl("id",url));//123

    8.匿名自执行函数

        (function(){

            var a=b=10;

            console.log(a);

        })();

        console.log(b);

    9.日期对象

        new Date()//获取当前日期，包含年/月/日，时分秒

        new Date("2018/6/1" 或"2018-6-1"或 2018,5,1);

        .getFullYear()获取四位数的年份

        .getMonth()获取月份，0~11，0表示1月

        .getDate()获取日//星期;

        .getHours()获取时;

        .getMinutes()获取分;

        .getSeconds()获取秒;

        .getTime()从1970年1月1日8点到现在的毫秒值

        //.get获取  .set设置

        .setFullYear()设置四位数的年份

        .setMonth()设置月份，0~11，0表示1月

        .setDate()获取日;

        .setHourush(array[i]);

                }s()获取时;

        .setMinutes()获取分;

        .setSeconds()获取秒;

        .setTime()以毫秒数设置日期，会改变整个日期

        //开启定时器 属于Bom window对象

            1.间隔调用 

                setTnterval(匿名函数，毫秒值)//每隔一段时间调用一次

                setInterval(function (){

                    console.log("hello")

                },1000)//每一秒会打印出hello

            2.超时调用

                setTimeout(匿名函数，毫秒值)//超过指定时间只执行一次

                setTimeout(function(){

                    console.log("hello")

                },1000)//只打印出一个hello

        //清除定时器

        clearInterval(句柄)//清除间隔调用

            var num=0;

            var timer=null;//句柄

            timer=setInterval(function(){

                num++;

                if(num==10){

                  clearInterval(timer);

                }

                console.log(num);

            },1000);    

        clearTimeout(句柄)//清除超时调用

        //计算未来的第五天是周几

            var date=new Date();

            var day=date.getDate();



            date.setDate(day+5);

            console.log(date.getDate());//哪天

            console.log(date.getDay());//周几

    10.Dom

        document object model

        (1).查找元素

            <1>.通过ID名

                getElementById("ID名")

            <2>.通过标签名

                document.getElementByTagName("标签名")//找到的是类数组

                父元素.getElementByTagName("标签名")

            <3>.通过类名

                document.getElementByClassName()

                    在标准的浏览器里不存在兼容问题

            <4>. document.querySelector('.bg/#box/ul')//第一个元素

                 document.querySelectorAll('.bg/#box/ul')//所有的元素

            <5>.表单里：name名字

                document.getElementsByName('name名')

                document.body之整个页面

        (2).改变样式。。。//没弄完

            元素.style.属性名=属性值

            元素.style.background='red';

            如果遇到符合属性，改驼峰

                元素名.style.borderLeft='1px solid red';

            获取行内样式：元素名.style.background为字符串类型

            类名的添加样式和删除样式

                元素.className='类名1  类名2...'

                元素.className='';

            改变内容：

                元素.innerHTML='内容'

                元素.innerText='内容'

                元素.value 只对表单元素生效

            改变标准属性：

                获取属性

                    元素.属性名

                设置属性

                    元素.属性名=属性值

            改变自定义属性

            获取属性

                元素.getAttribute("属性名")

            改变属性

                元素.setAttribute("属性名"，"属性值")

            删除属性

                元素.removeAttribute("属性名")

        (3).事件

            鼠标事件

                <1>onclick        单击

                <2>onmouseover    鼠标滑过

                <3>onmouseout    鼠标离开

                <4>onmousedown    鼠标按下

                <5>onmousemove    鼠标移动

                <6>onmouseup      鼠标释放

                <7>ondblclick    鼠标双击

            键盘事件

                <1>onkeydown    按下

                <2>onkeypress  按下

                <3>onkeyup      释放

                非字符键    keydown keyup

                字符键      keydown  keypress  keyup

            焦点事件：

                onfocus 获取焦点

                onblur  失去焦点

    11.

        全局变量是window的属性，全局函数是window的方法

        location 获取地址栏信息

            location.href

            location.search

        navigator  判断浏览器的版本和型号

            navigator.userAgent用户代理字段

            navigator.search获取地址栏？以后的参数

            encodeURI(地址) //编码 以编码的方式进行地址栏传参

            decodeURI(传过来的地址) //编码 吧传过来的地址进行解码，获取参数

        history 历史记录

            history.go(11) 前进11步

            history.go(-11)后退11步

            history.back() 后退1步

            history.forward()前进1步

                                    Dom树

                                document（根）

                                html

                    head                    body

            meta  style  link          div a b span ...

        1.元素节点：所有的标签都是元素节点

        2.属性节点：所有的属性都是属性节点

        3.文本节点：内容（空白文本）都是文本节点

        节点关系：1.父子关系  2.兄弟关系

            1.操作子节点

                父元素.childNodes获取父元素下所有字节点，包括文本节点

                    返回值是类数组，通过下标访问元素，有length属性

                第一个子元素：父元素.firstChild 都包含空白节点

                最后一个子元素：父元素.lastChild 都包含空白节点

            2.操作兄弟节点：都包含文本节点 可以使用多次，多于两次最好就别用了，不优化

                .previousSibling    上一个兄弟节点

                .nextSibling  下一个兄弟节点

            3.操作父节点

                子元素.parentNode可以使用多次，多于两次最好就别用了，不优化

                父元素.children  只查找元素子节点，不查找文本节点，返回值：类数组通过下标访问元素，有length属性

                .firstElementChild第一个子元素，不包含文本节点

                .lastElementChild最后一个子元素，不包含文本节点

        节点的属性

                    类型：nodeType  名字：nodename    值：nodeValue

            元素节点：1              大写的标签名        null

            属性节点：2              属性名              属性值

            文本节点：3              #text              文本自身

            注释节点：8

            文档节点：9

            备注：元素节点的名字 nodeName  tagName

        创建节点

            1.创建元素节点 document.creatElement("")

            2.创建文本节点 document.creatTextNode("文本内容")

        追加子节点

            父节点.appendChild(子节点)将元素节点追加到父元素末尾处

        删除子节点

            父节点.removeChild(子节点)

        克隆节点

            要克隆的节点.cloneNode(true/false)

            false:默认 只克隆结构，不克隆内容 DIV

            true：结构和内容都克隆 DIV+里面的内容

        插入到哪个节点之前：

            父元素.insertBefore(子节点，哪个节点之前)

        方法封装

            1.通过id封装

                function $(id){

                    return document.getElementById(id);

                }

            2.添加类方法的封装

                function addClass(obj,cls){

                    obj.className+=""+cls;

                }

            3.删除类方法的封装

                function removeClass(obj,cls){

                    空格分成数组

                    var ar=obj.className.split("");

                    查找下标

                    var index=arr.indexOf(cls);

                    删除项

                     arr.splice(index,1);

                    把数组用空格连接起来转成字符串赋值给className

                     obj.className=arr.join("")

                }

            4.判断DOM元素上是否有某个类

            function hasClass(obj,cls){

                var arr=obj.class.split("");

                if(arr.indexOf(cls)!=-1){

                    return true;

                }else{

                    return false;

                }

            }