day03

A.今天学到了什么

1.间接触发

   <script>
        // 传参(函数，时间)
        // setTimeout(function(){
        //     alert(1);
        // },2000)
        // 每隔一段时间触发一次
        // setInterval(function(){
        //     alert(1);
        // },2000) 

        function go(){
            alert("hello world")
            setTimeout(go,1000)
        }
        go();
        
    </script>

2.获取输入

  <div>
        <input type="text" id="txt">
        <button id="add">添加</button>
    </div>
    <ul id="parent">

    </ul>
    <script>
        var txt= document.getElementById("txt");
        var add =document.getElementById("add");
        var parent= document.getElementById("parent");
        add.onclick=function(){
            var value=txt.value;
            var li=document.createElement("li");
            li.innerHTML=value;
            parent.appendChild(li);
        }
    </script>

3.获取父节点

 <div class="parent">
        <p id="child">hello world</p>
    </div>
    <script>
        // p.parentNode 获得父元素
        var p =document.getElementById("child");
        var parent = p.parentNode;
        console.log(parent);

    </script>

4.实现点击删除

   <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";
                // 阻止a的跳转
                return false;
            }
        }
    </script>

5.子节点

5.1获取子节点

    <ul id="parent">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // childNodes 获取所有类型的子节点   换行包括在内
        // nodeType 为1的时候是元素节点
        let parent= document.getElementById("parent");
        var childs=parent.childNodes;
        for(let i=0;i<childs.length;i++){
            if(childs[i].nodeType==1){
                childs[i].style.backgroundColor="red";
            }
        }
       
    </script>

5.2获取子节点其他方法

   <ul id="parent">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // var childs=document.getElementById("parent").children;
        // console.log(childs.length)
        // firstChild 获取第一个子节点
        // lastChile  获取最后一个字节点
        // lastElementChild 获取最后一个元素子节点
        var fc=document.getElementById("parent").firstChild;
        var fElement=parent.firstElementChild;
        console.log(fc);
        console.log(fElement);
    </script>

6.获取兄弟节点

 <div>
        <p>hello world 01</p>
        <p id="test">hello world 02</p>
        <p>hello world 03</p>
    </div>
    <script>
        // previousSibling 获取前面的兄弟节点
        // previousElementSibling
        // nextSibling获取下一个兄弟节点
        // nextElementSibling 获取下一个兄弟的元素节点
        let test=document.getElementById("test");
        let beforetest=test.previousSibling;
        let eSibling=test.previousElementSibling;
        let neSibling=test.nextElementSibling;
        let nSibling=test.nextSibling;
        // console.log(beforetest);
        console.log(eSibling);
        console.log(neSibling);
        console.log(nSibling);
    </script>

7.offset的用法

css部分

   <style>
        *{margin: 0;padding: 0}
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px;
            position: absolute;
            left: 100px;
        }
    </style>

js部分

    <div id="test">

    </div>
    <script>
        // offsetLeft 元素水平偏移位置
        // offsetTop 垂直方向偏移的位置
        // offsetWidth  获取元素的宽度   特点  只能读取属性，不能修改属性
        // offsetHeight  获取元素的高度  
        let tset=document.getElementById("test");
        let offL=test.offsetLeft;   
        console.log(offL);
    </script>

8.传属性

当传入的属性是变量时

  <p id="test">hello world</p>
    <script>
        var p=document.getElementById("test");
        // test.style.color="red";
        // 当传入的属性是变量的时候使用
        // test.style["color"]="blue";
        // 当传入的属性是变量时  不能直接点出来
        function changeStyle(ele,attr,value){
            ele.style[attr]=value;
        }
        changeStyle(p,"backgroundColor","green");
    </script>

9.通过属性设置样式

  <P id="test">hello world</P>
    <script>
        // 同过设置属性的方式，设置样式
        let test =document.getElementById("test");
        test.setAttribute("style","color:red");

    </script>

10.对属性的操作

 <p class="one" id="test">hello world </p>
    <script>
        // 1.获取属性值  getAttribute
        // 2.设置属性值  setAttribute    
        // 3.移除属性值  removeAtrribute
        let test=document.getElementById("test");
        let cValue=test.getAttribute("class");
        test.setAttribute("class","two");
        test.removeAttribute("class");
        console.log(cValue);    
    </script>

11.动态添加title

  <p id="test">hello world</p>
    <script>
        let test=document.getElementById("test");
        test.setAttribute("title","title");
    </script>

12.浏览器可视窗口大小

    <p>hello world</p>
    <script>
        var windowWidth=window.innerWidth;
        var windowHeight=window.innerHeight;
        var wd=document.documentElement.clientWidth;
        var hd=document.documentElement.clientHeight;
        // ie浏览器
        // 内容的高度
        var bw=document.body.clientWidth;
        var bh=document.body.clientHeight;
        console.log(windowWidth);
        console.log(windowHeight);
        console.log(wd);
        console.log(hd);
        console.log(bw);
        console.log(bh);
        
    </script>

13.获取页面内容的宽高

    <script>
        var width=document.documentElement.scrollWidth;
        var height=document.documentElement.scrollHeight;
        console.log(width);
        console.log(height);    
    </script>

14.文档碎片

   <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>

15.表格

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部分

 <!-- tHead  获取表格的标题 -->
    <script>
        // thead,tBodies,row,cells
        // 1.标题的背景颜色 #eee;
        // 2.tbody下奇数行#ff2d51  偶数行为#44cef6
        var table=document.getElementById("table");
        var thead=table.tHead;
        var tbody=table.tBodies[0];
        var rows=tbody.rows;
        var firstCell=tbody.rows[0].cells[0];
        thead.style.backgroundColor="#eee";
        // console.log(thead);
        // console.log(tbody);
        for(let i=0;i<rows.length   ;i++){
            if(i%2==0){
                rows[i].style.backgroundColor="#ff2d51";
            }else{
                rows[i].style.backgroundColor="#44CEF6";
            }
        }
        firstCell.innerHTML="银泰百货";
        console.log(firstCell);
    </script>

16.动态添加表格

css部分

    <style>
        table,th,td{
            border: 1px solid #333;
            width: 500px;
            line-height: 50px;
            
        }
        table{
            text-align: center;
            border-collapse: collapse;
        }
        tbody tr:nth-child(even){
            background: red;
        }
        tbody tr:nth-child(odd){
            background: skyblue;
        }
    </style>

html部分

<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>苹果</td><td>8k</td></tr>
        </tbody>
    </table>

script部分

<script>
        var phone=document.getElementById("phone");
        var  price=document.getElementById("price");
        var btn=document.getElementById("btn");
        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);
            tbody.appendChild(tr);
        }
    </script>

17.函数

    <script>
        // go()可以在前面调用;
        // 1.直接书写的方式
        function go(){
           console.log("hello world");
        }
        go();
        // 2.变量申明的方式（不推荐）
        var one=function(){
            console.log("one");

        }
        one();
        // 3.构造函数的方式声明（不推荐）
        var two =new Function("two","console.log(two)")
        two("a");

    </script>

18.箭头函数

 <script>
        
        var go=()=>{
            console.log("hello world");
        }
        go();   
    </script>

19.函数的传参

   <script>
        function go(a,b){
            console.log(a);
            console.log(a+b);
            console.log("没有参数");
        }
        go(4,4);
        // JS中如何支持重载  用 arguments 对象
        // 函数内部有一个arguments 对象来管理函数传入的参数
        function test(){
            console.log(arguments);

        }
        test(2,3,4);
    </script>

20.JS中的重载

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

            }else{
                console.log("hello world");
            }
        }
        // test();
        test(1);
        // test(2,3);
    </script>

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

    <script>
        // 1.基本类型只传值
        // 2.引用类型传值也传地址
        // var a=10;
        // var b=a;
        // console.log(b);
        var arr=[1,2,3];
        var b=arr;
        arr[arr.length]=4;
        console.log(b);

        
        var obj={
            name:"chengchao"
        }
        var jiang=obj;
        obj.age=30;
        console.log(jiang);
    </script>