day08

作者: 折翼自由 | 来源:发表于2018-06-29 19:29 被阅读0次

    1.window对象方法——定时器

    JavaScript是单线程语言,所有代码按顺序执行

    1.1超时调用-setTimeout()

    setTimeout(code,millisec)
    功能:在指定的毫秒数后调用函数或计算表达式

    参数说明:
    1.code:要调用的函数或要执行的JavaScript代码
    2.millisec:在执行代码前需要等待的毫秒数
    setTimeout方法返回一个id值,通过它取消超时调用
    clearTimeout()

        <script>
            setTimeout(function(){
                alert(1);
            },2000)
        </script>
    
    1.2.间歇调用-setInterval()

    间歇调用-setInterval(code,millisec)
    功能:每隔一段时间执行一次代码

    clearInterval()
    eg:num=0,max=10,每过一秒num++,当num>max清除定时器

     <script>
          var num=0,max=10;
           var interval = setInterval(function(){
                num++;
                console.log(num)
                if(num>max){
                    clearInterval(interval)
                }
           },1000)
     </script>
    

    2.location对象

    location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。
    语法:location.href
    功能:返回当前加载页面的完成URL
    location.href与window.location.href等价

    语法:location.hash
    功能:返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串

    语法:location.host
    功能:返回服务器名称和端口号

    语法:location.hostname
    功能:返回不带端口号的服务器名称

    语法:location.pathname
    功能:返回URL中的目录和(或)文件名

    语法:location.port
    功能:返回URL中指定的端口号,如果没有,返回空字符串

    语法:location.protocol
    功能:返回页面使用的协议

    语法:location.search
    功能:返回URL的查询字符串,这个字符串以问号开始。

    位置操作
    改变浏览器的位置的方法:
    location.href属性
    location对象其他属性也可改变URL
    location.hash
    location.search
    location.replace(url)

    location.reload()
    功能:重新加载当前显示的页面
    说明:
    .location.reload()从缓存加载
    .location.reload(true)从服务器重新加载

    3.history对象

    history对象保存了用户在浏览器中访问页面的历史记录

    语法:history.back()
    功能:回到历史记录的上一步
    相当于是用了history.go(-1)
    //-1表示前一步,-2前两部

    语法:history.go(1)
    功能:回到历史记录的前一步
    相当于history.forward()

    语法:history.go(-n)
    功能:回到历史记录的前n部
    语法:history.go(n)
    功能:回到历史记录的后n步

    4.screen对象

    screen对象包含有关客户端显示屏幕的信息
    screen.availWidth
    screen.availHeight

    5.navigator对象

    1.掌握Navigator对象的userAgent属性
    2.掌握如何判断浏览器的类型
    3.掌握如何判断设备的终端是移动还是PC
    UserAgent:用来识别浏览器名称,版本,引擎以及操作系统等信息的内容。

       //检测浏览器类型
        if(/Android|iphone|webOS/i.test(navigator.userAgent)){
            location.href="mobile.html"
        }else if(/ipad/i.test(navigator.userAgent)){
            location.href="pad.html"
        }
    

    6.1DOM扩展

    6.1父节点parentNode(亲爹)
      <ul>
            <li>小米手机 <a href="#">删除</a> </li>
            <li>苹果手机 <a href="#">删除</a> </li>
            <li>华为手机 <a href="#">删除</a> </li>
        </ul>
        <script>
           var shows=document.getElementsByTagName("a");
           for(let i=0;i<shows.length;i++){
               shows[i].onclick=function(){
               this.parentNode.style.display="none";
                return false;
               }
           }
        </script>
    
    6.2子节点childNodes和children的区别

    childNodes,将子节点的背景色变为红色
    长度为7,空格也占长度

    <ul id="parent">
            <li>小米手机</li>
            <li>苹果手机</li>
            <li>华为手机</li>
        </ul>
        <script>
           let parent=document.getElementById("parent");
           let childs=parent.childNodes;
           for(let i=0;i<childs.length;i++){
               if(childs[i].nodeType==1){
                   childs[i].style.backgroundColor = "red";
               }
           }
        </script>
     //chrome下结果为7,IE9以下结果为3
    //在chrome下将空的文本节点,也算在内容
    

    children,将子节点的背景色变为红色
    长度为3

     <ul id="parent">
            <li>小米手机</li>
            <li>苹果手机</li>
            <li>华为手机</li>
        </ul>
        <script>
            let childs=document.getElementsByTagName("ul")[0].children;
            for(let i=0;i<childs.length;i++){
                childs[i].style.backgroundColor="red";
            }
            console.log(childs);
        </script>
    

    firstChild //包含所有类型的节点
    firstElementChild //IE9以下不兼容
    lastChild //所有类型的节点
    lastElementChild //IE9以下不支持


    111.png
      <ul id="parent">
                    <li>小米手机</li>
                    <li>苹果手机</li>
                    <li>华为手机</li>
                </ul>
                <script>
                var parent=document.getElementById("parent");
                var fc=document.getElementById("parent").firstChild;
                var fe=parent.firstElementChild;
                console.log(fc);
                console.log(fe);
                </script>
    
    6.3兄弟节点

    nextSibling
    nextElementSibling
    //IE9以下不支持
    previousSibling//节点属性
    previousElementSibling //节点内容
    //IE9以下不支持

      <div>
            <p>hello 01</p>
            <p id="test">hello 02</p>
            <p>hello 03</p>
        </div>
        <script>
            let test = document.getElementById("test");
            let ps = test.previousSibling;
            let pss = test.previousElementSibling;
            console.log(ps);
            console.log(pss);
        </script>
    

    6.4定位(只读属性)

    offsetParent //获取给了定位元素的父级
    offsetLeft //返回元素的水平偏移位置。 返回number
    offsetTop //返回元素的垂直偏移位置。
    offsetWidth //返回元素的宽度
    offsetHeight //返回元素的高度

    //css
    <style>
        *{margin: 0;
          padding: 0;}
     div{
            width: 100px;
            height: 100px;
            background:red;
            margin: 100px;
            position: absolute;
            left: 100px;
            border: 10px  solid green;
            }
    </style>
    //html
    <div id="test">
    </div>
    <script>
      let test=document.getElementById("test");
      let offl=test.offsetLeft;
      let offt=test.offsetTop;
      let offw=test.offsetWidth;
      let offh=test.offsetHeight;
      test.offsetWidth="200px";
      console.log(offl);
      console.log(offt);
      console.log(offw);
      console.log(offh);
    </script>
    

    6.5操作元素的属性

     <p id="test">hello world</p>
        <script>
            var p=document.getElementById("test");
            function changeStyle(ele,attr,value){
                ele.style[attr]=value;
            }
            changeStyle(p,"backgroundColor","green")
        </script>
    
    6.5.1获取,设置,删除

    getAttribute(AttrName);
    setAttribute(AttrName,AttrValue);
    removeAttribute(AttrName);

     <p id="test" class="one">hello world</p>
        <script>
            var test=document.getElementById("test");
            test.setAttribute("class","two");
            test.removeAttribute("class");
            var cValue=test.getAttribute("class");
            console.log(cValue);
        </script>
    

    6.6浏览器窗口可视区域的大小

    6.6.1、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

    • window.innerHeight - 浏览器窗口的可见内部高度
    • window.innerWidth - 浏览器窗口的可见内部宽度

    6.6.2、对于 Internet Explorer 8、7、6、5:

    • document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
    • document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
    //没有DOCTYPE的IE中,浏览器显示窗口可以通过以下获取
    Document对象的body属性对应HTML文档的<body>标签

     <script>
            var windowWidth=window.innerWidth;
            var windowHeight=window.innerHeight;
            var wd=document.documentElement.clientHeight;
            var ww=document.documentElement.clientWidth;
            var dh=document.body.clientHeight;
            var dw=document.body.clientWidth;
            console.log(windowWidth);
            console.log(windowHeight);
            console.log(ww);
            console.log(wd);
            console.log(dh);
            console.log(dw);
        </script>
    
    6.7获取网页内容的宽高

    document.documentElement.scrollHeight
    document.documentElement.scrollWidth

     <div>
    
        </div>
        <script>
            var windowWidth=window.innerWidth;
            var windowHeight=window.innerHeight;
            var dw=document.documentElement.scrollWidth;
            var dh=document.documentElement.scrollHeight;
            console.log(windowWidth,windowHeight);
            console.log(dw,dh);
        </script>
    
    6.8文档碎片
    • 文档碎片可以提高DOM操作性能
    • document.createDocumentFragment()
    • 原理:将dom暂存在fragment上,之后一次性添加到dom
      <ul id="parent">
        </ul>
        <button id="btn">btn</button>
        <script>
           var btn=document.getElementById("btn");
           var parent=document.getElementById("parent");
           var frame=document.createDocumentFragment();
           btn.onclick=function(){
               for(let i=0;i<=10;i++){
                   let li=document.createElement("li");
                   frame.appendChild(li);
               }
               parent.appendChild(frame);
           }
        </script>
    
    6.9表格应用
    • 获取
      tBodies,tHead,rows,cells
    • 隔行变色
    • 鼠标移入变色
    //css
        <style>
            table,td,th{
                border: 1px solid #333;
            }
            table{
                border-collapse: collapse;
                width: 500px;
                line-height: 50px;
                text-align: center;
            }
        </style>
    /html
        <table id="table">
            <thead>
                <tr><th>商城</th><th>手机</th></tr>
            </thead>
            <tbody>
                <tr><td>JD商铺</td><td>苹果手机</td></tr>
                <tr><td>天猫</td><td>华为手机</td></tr>
                <tr><td>拼多多</td><td>魅族手机</td></tr>
                <tr><td>苏宁</td><td>小米手机</td></tr>
            </tbody>
        </table>
        <script>
            var table=document.getElementById("table");
            var thead=table.tHead;
            var tbody=table.tBodies[0];
            var rows=tbody.rows;
            var firstCell=rows[0].cells[0];
            thead.style.backgroundColor="#eee";
            console.log(rows);
            for(let i=0;i<rows.length;i++){
                rows[i].style.backgroundColor=(i%2==0)?"#ff2d51":"#44cef6";  
            }
            firstCell.innerHTML="银泰百货";
        </script>
    
    • 添加,删除一行
     <style>
            tbody tr:nth-child(even){
                background: #ff2d51;
            }
            tbody tr:nth-child(odd){
                background: #44fce6;
            }
            table,td,th{
                border: 1px solid #333;
            }
            table{
                border-collapse: collapse;
                width: 500px;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            手机品牌<input type="text" id="phone">
            价格<input type="text" id="price">
            <button id="btn">添加</button>
        </div>
        <table id="table">
                <thead>
                    <tr><th>手机品牌</th><th>价格</th></tr>
                </thead>
                <tbody>
                    <tr><td>苹果7</td><td>8k</td></tr>
                </tbody>
            </table>
        <script>
           var btn=document.getElementById("btn");
           var phone=document.getElementById("phone");
           var price=document.getElementById("price");
           var tbody=document.getElementById("table").tBodies[0];
         
           btn.onclick=function(){
                 var tr=document.createElement("tr");
                 var td=document.createElement("td");
                 td.innerHTML=phone.value;
                 tr.appendChild(td);
                 var td1=document.createElement("td");
                 td1.innerHTML=price.value;
                 tr.appendChild(td1);
                 console.log(td1);
                 tbody.appendChild(tr);
           } 
        </script>
    </body>
    

    7.function

    7.1.函数的创建方式

    开发过程中推荐使用第一种

    1.function go(a){
        console.log(a)
    }
    2.var go = function(a){
        console.log(a)
    }
    3.var go = new Function(“a”,”console.log(a)”)
    

    es6箭头函数

            var go=()=>{
                console.log("asdfa");
            }
            go();
            
    
    7.2.函数的返回值

    a.什么是函数的返回值
    定义:函数的执行结果
    函数可以没有return�说明:
    1.函数会在执行完return语句之后停止,并立即退出
    2.return语句也可以不带任何返回值,用于提前停止函数执行

    function show(){
      return "hello world" //return的作用:把结果返回到函数外部
    }
    var b = show(); // 在哪调用返回到哪里;
    
    7.3. 函数的传参

    可变参(不定参)arguments
    参数的个数可变,参数数组
    //对传入的参数求和

    function sum(){
            var result=0;
            for(var i = 0;i<arguments.length;i++){
                result+=arguments[i];
            }
            return result;
    }
    alert(sum(2,3))
    
    7.4.JS中重载

    重载:根据传入的参数不同,动态决定调用那种方法
    函数内部有一个arguments对象来管理函数传入的参数

      <script>
            function test(){
                if(arguments.length==1){
                    console.log(arguments[0]);
                }else if(arguments[1]){
                    console.log(arguments[0]+arguments[1]);
                }else{
                    console.log("asdfasdf");
                }
            }
            test();
            test(1);
            test(2,3);
        </script>
    

    js不支持重载,要想支持重载,可以使用arguments对象

    8.基本类型和引用类型的区别

    总结:
    基本类型只穿值
    引用类型既传值也穿址

    1.基本类型的值在内存中占据固定大小的空间,因此被保存在栈内存中。
    2.引用类型的值是对象,保存在堆内存中。
    3.包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针。
    4.从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象。

    9 数组的常用方法

    9.1.创建数组的方式
    9.1.1字面量
    var arr =[1,2,3]
    
    9.1.2构造函数(了解)
    var arr = new Array();
    arr[0] = 1;
    
    9.2数组的遍历
    for(var i=0;i<arr.lengh;i++){
        console.log(arr[i])
    }
    for(var k in arr){
        console.log(arr[k])
    }
    
    9.3.检测数组
    if(arr instanceof Array){}
    if(Array.isArray(arr)){}
    

    9.4.数组的方法

    9.4.1增加(改变数组的内容)

    push() //从尾部添加

    var arr = [1,2,3];
    arr.push(4);
    console.log(arr);    //1,2,3,4
    

    unshift() // 从头部添加

    var arr = [1,2,3];
    arr.unshift(0);
    alert(arr);  //0,1,2,3
    

    push方法复制数组

    var arr = [12,11,33];
            var b = [];
            for(var i=0;i<arr.length;i++){
                b.push(arr[i]);
    }
    console.log(b);
    
    9.4.2增加 concat()(不改变原来数组内容)

    concat(value|[arr]) 本方法可以传单个值,也可以传数组

    var arr = [1,2,3];
    var b = arr.concat(4);
    console.log(arr); //1,2,3
    console.log(b); //1,2,3,4
    

    eg:复制数组

    var arr=[1,2,3];
    var b =[].concat(arr);
    console.log(b); //1,2,3
    
    9.4.2删除(改变)

    不接收参数

    pop() //从尾部删除

    var arr = [1,2,3];
    alert(arr.pop());  //3
    alert(arr)  //1,2
    

    shift() // 从头部删除

    var arr = [1,2,3];
    alert(arr.shift());  //1
    alert(arr)  //2,3
    
    9.4.3修改

    指定三个参数arrObject.splice(index,howmany,item)
    指定三个参数:起始位置,删除的项数,插入的数量

    var arr = [1,2,3,4,5];
    arr.splice(0,2,6,7);
    alert(arr); //6,7,4,5
    

    arrayObject.slice(start,end)
    1个参数

    var  arr=[1,2,3,4];
    var b=arr.slice(1);
    console.log(b);  //2,3,4
    

    2个参数

    var c = arr.slice(1,3);
    console.log(c); //2,3
    

    slice复制数组

    var arr = [1,2,3];
    var b = arr.slice(0);
    console.log(b);
    
    9.4.4查询

    arr[index] 查询对应下标的值

    var arr=[1,2,3];
    console.log(arr[0]);  //1;
    

    indexOf(value) 查询对应值的下标

    var arr=[1,2,3,4];
    console.log(arr.indexOf(1)); //0
    //如果没有对应的值,则返回-1
    

    9.4.5splice(改变原来数组) 包含增,删,改

    增加,指定三个参数splice(index,howmany,item)
    splice(index,howmany,item)
    传3个参数表示:起始位置、0(删除的项数)、插入的项在index之后

    var arr= [1,2,3,4,5];
    arr.splice(2,0,"red","green");  //在第2位之后,增加2个元素
    console.log(arr); //[1,2,"red","green",3,4,5]
    

    删除,指定两个参数splice(index,howmany)

    //splice(index,howmany)
    //传2个参数表示:起始位置和删除的个数
    var arr = [1,2,3,4,5];
    arr.splice(0,2);  //从0位开始,删除2个
    alert(arr);  //[3,4,5]
    

    修改,指定三个参数splice(index,howmany,item)
    指定三个参数:起始位置,删除的项数,插入的数量

    var arr = [1,2,3,4,5];
    arr.splice(0,2,6,7);
    alert(arr); //6,7,4,5
    

    9.4.6join

    通过指定分隔符,将数组所有元素放入字符串
    arrayObject.join(separator)

    var arr=["red","green","yellow"];
    var a = arr.join();    //red,green,yellow
    var b=  arr.join("");  //redgreenyellow
    var c=arr.join(".");  //red.green.yello
    alert(c);
    
    9.4.7排序

    通过指定分隔符,将数组所有元素放入字符串
    arrayObject.join(separator)
    a.升序

     var arr = [1,12,34,5,6];
        var c = arr.sort(function(a,b){
            return a-b;
        });
       console.log(c); //[1,2,5,6,12,34]
    

    b.降序

    arr.sort(function(a,b){
            return b-a;
    });
    

    9.4.8归并(求和)方法

    通过指定分隔符,将数组所有元素放入字符串
    arrayObject.join(separator)

     var numbers = [1,2,3,4,5];
     var sum = numbers.reduce(function(prev,cur,index,array){
            return prev+cur;
     });
     alert(sum);  //15
    

    9.4.9 reverse()

    颠倒数组中的元素
    返回值 ——数组

     var arr = [12,11,33];
     var b = arr.reverse();
      console.log(b);  //33,11,12
    

    9.4.10二维数组

    数组里还可以装载一个数组
    取值方式arr[i][i]

      var arr=[[1,2]];
      console.log(arr[0][0])
    

    相关文章

      网友评论

          本文标题:day08

          本文链接:https://www.haomeiwen.com/subject/zcggyftx.html