JavaScript笔记

记住用户名

        // 获取两个值来保存上面输入的用户名和密码信息
        var uservalue = localStorage.getItem("username")
        var passvalue = localStorage.getItem("password")
        //确保两者都不为空值，但凡有一个为空值都不能进行
        if(uservalue && passvalue){
            username.value = uservalue
            password.value = passvalue
        }
        btn.onclick = function(){
           console.log(username.value,password.value)//输出用户输出的信息
        }
        // 将username和password以及两者的值储存在服务端
        //点击btn2之后，会发现内容自动保存到服务端，就不会重新加载后失去
        btn2.onclick = function(){
           localStorage.setItem("username",username.value)
           localStorage.setItem("password",password.value)
        }

操作元素属性

分为常规（id，class，tag....）和非常规（html，head，body）

// 非常规类型
console.log(document.documentElement)
console.log(document.head)
console.log(body)
//常规类型 getElementById getElementsByClassName
var item = document.getElementById("box")//获取box元素
var item = document.getElementsByClassName("list")
var item = document.getElementsByClassName("li1")//伪数组

// 修改内部元素
item[1].innerHTML="我改变啦"

//可以通过Array.from将伪数组转换为真的数组
var newitem = Array.from(item)
console.log(item)

使用name属性来获取（多用于表单标签）

var item = document.getElementsByName("username")//通过name属性来获取input
console.log(item[0])//返回 <input type="text" name="username" id="user">
console.log(item[1])//返回 undefined
//修改内容
item[0].value="我又改变啦"

和css相同方法选择标签属性

// querySelector--仅返回一个对象 querySelectorAll--返回伪数组
var item = document.querySelector("ul li")
var items = document.querySelectorAll("ul li")
console.log(items)

自定义属性

li.setAttribute("index")
console.log(li.getAttribute("index"))
li.removeAttribute("index")

// h5中的新规定===>data-***,dataset
//<div id="box" data-xiaoming="555">
console.log(box.dataset)
// box.dataset.xiaoming="别哭了"
delete box.dataset.xiaoming

点击显示密码

        // 点击显示密码
        // 先获取密码框
        var password = document.getElementById("pass")
        // 获取按钮
        var password = document.getElementById("btn")
        // 给按钮绑定单击响应函数
        btn.onclick=function(){
            if(pass.type=="password"){
                pass.type="text"
            }else{
                pass.type="password"//注意此处是字符串形式
            }
        }

实现全选

    <div>
        <input type="checkbox" id="all">全选
        <ul class="items">
            <li>
                <input type="checkbox">苹果
            </li>
            <li>
                <input type="checkbox">香蕉
            </li>
            <li>
                <input type="checkbox">菠萝
            </li>
            <li>
                <input type="checkbox">梨子
            </li>
        </ul>
    </div>

        // 获取全选和单选框
        var oall = document.getElementById("all")
        var oitems = document.querySelectorAll(".items input")
        // console.log(oitems)
        // 点击全选按钮能将所有子标签全选
        oall.onclick=function(){
            for(var i=0;i<oitems.length;i++) {
                // console.log(oall.checked)//点击全选按钮，会返回ture，只要让每个小元素都返回ture就可以实现全选
                oitems[i].checked=oall.checked
            }
        }

        // 全选所有子标签，可以自动勾选全选标签
        // 每次都将count记作0，再通过勾选的内容实现加一，一旦结果为4就勾选全选
        for(var i=0;i<oitems.length;i++){
            oitems[i].onclick=function(){
                var count = 0//每次都从0开始
                for(var m=0;m<oitems.length;m++){
                    if(oitems[m].checked==true){
                        count++
                    }
                }
                if(count==oitems.length){
                    oall.checked=true
                }else{
                    oall.checked=false
                }
            }
        }

操作元素文本内容

innerHTML/innerText/value

    <div id="box">
        <input type="text">
        哈哈哈哈哈
    </div>
    <div id="box1">
        哈哈哈哈哈
    </div>
    <div id="box2">
        哈哈哈哈哈
    </div>

        console.log(box.innerHTML)//返回表单和哈哈哈哈哈
        console.log(box.innerText)//仅返回哈哈哈，只会返回文本内容
        box1.innerHTML="<h1>笑什么笑</h1>"
        box2.innerText="<h1>我就笑怎么了</h1>"//不会解析内部标签

操作文本样式

        // 内部样式，外部样式，行内样式都可以通过getComputedStyle获取，只能读取不能赋值写样式
        var obox = document.getElementById("box")
        var res = getComputedStyle(obox).backgroundColor//background-color这种连字符的必须要换分为驼峰式或者用[]括起来
        
        // 只能是行内样式方法 style
        console.log(box.style.width)
        console.log(box.style["background-color"])
        box.style.width="100px"

渲染页面

        // 渲染页面
        var box=document.getElementById("box")
        var ul=document.getSelection("ul")
        // 定义一个新数组用来存储内部信息
        var filmlist=[
            {url:"http",
            title:"title",
            grade:7.2}
            {url:"http",
            title:"title",
            grade:7.2}
            {url:"http",
            title:"title",
            grade:7.2}   
        ]
        var filmItem = filmlist.map(
            function(item){//item是数组内每个元素依次进来,然后会获取每个元素内部的属性一一对应，数组内有多少元素就返回多少元素
                return `<li>
                    <img src="${item.url}" alt="">
                    <h3>${item.title}</h3>
                    <p>观众评分${item.grade}</P>
                        </li>`
            }
        )
        ul.innerHTML=filmItem.join("")//返回的元素是对象，将其转换为字符串，然后插入ul内部，以后每次更改数组内的内容就可以

选项切换

classList.remove 移除属性

classList.add添加属性

toggle切换属性，有就删除，没有就添加

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .header {
            width: 400px;
            height: 20px;
        }
        .header ul {
            display: flex;
            justify-content: space-between;
            position: relative;
            border: 1px solid pink;
            background-color: pink;
        }
        .bottom ul li {
            display: none;
            position: absolute;
            left: 0;
            top: 20;
            width: 400px;
            height: 400px;
            background-color: paleturquoise;
        }
        .header .active{
            background-color: pink;
        }
        .bottom .active{
            display: block;
        }
    </style>

   <div class="header">
        <ul>
            <li class="active"><button>草莓</button></li>
            <li><button>苹果</button></li>
            <li><button>菠萝</button></li>
            <li><button>西瓜</button></li>
        </ul>
    </div>
    <div class="bottom">
        <ul>
            <li class="active">好吃</li>
            <li>一般</li>
            <li>好好吃</li>
            <li>特别好吃</li>
        </ul>
    </div>

        var headerItem = document.querySelectorAll(".header li")
        var bottomItem = document.querySelectorAll(".bottom li")
        for(var i=0;i<headerItem.length;i++){
            //给每个li标签添加自定义属性
            headerItem[i].dataset.index=i
            //给每个li标签添加单击响应函数
            headerItem[i].onclick=handler//不加（）
        }
        function handler(){
            var index = this.dataset.index
            for(var m=0;m<headerItem.length;m++){
                headerItem[m].classList.remove("active")//移除header所有active标签
                bottomItem[m].classList.remove("active")//移除bottom所有active标签
            }
            // 给点击的标签特殊添加active标签
            headerItem[index].classList.add("active")
            bottomItem[index].classList.add("active")
        }

节点

认识节点

//创建新节点createElement（"节点名 "）
//插入节点
//appendChild  父元素.appendChild（被插入节点）
//inserBefore（要插入的节点，在谁的前面插入）
//删除节点removechild(被删除节点)
//box.remove()删除自己及后代
//替换节点replaceChild（替换上去的节点，被替换的节点）
//克隆节点，不写参数为false，不会克隆后代，写参数就会克隆后代
console.log(box.attributes[0/1/2...])//操作所有节点
console.log(box.getAttribute("index"))//操作指定节点
//childNodes操作所有节点
console.log(box.childNodes)
//children操作元素节点
console.log(box.children)
//firstChild第一个节点
//firstElementChild第一个元素节点
//lastChild最后一个节点
//lastElementChild最后一个元素节
//previousSibling找上面的节点
//previousElementSibling找上方的元素节点
//nextSibling找下面的节点
//nextElementSibling找下方的元素节点
//parentNodes找父节点
//parentElement找父元素节点

节点属性

动态删除

    <!-- 动态删除 /点击按钮，删除一行元素 -->
    <ul id="box">

    </ul>

    <script>
        var arr=["喜洋洋","沸羊羊","懒洋洋"]
        for(var i=0;i<arr.length;i++){
            // 创建li标签在ul内部（通过创建节点的方式）
            var oli=document.createElement("li")
            // 将数组内的值分别放入li标签内部
            oli.innerHTML=arr[i]
            //会得到三组li标签，内部分别包含数组上面三个元素

            // 创建按钮在li标签后面
            var btn=document.createElement("button")
            // 按钮内部放入文本节点
            btn.innerHTML="delete"
            // 给每个按钮都绑定单击响应函数，每次点击会执行删除程序
            btn.onclick=function(){
                // 被点击的按钮所在的一个li都会被删除
                this.parentNode.remove()
            }
            // 插入创建的标签到页面中
            oli.appendChild(btn)//将按钮插入li标签中
            box.appendChild(oli)//将li标签插入html页面中
        }

    </script>

获取元素尺寸

offsetwidth：获取的是元素 内容+padding+border的宽度

offsetHeight：获取的是元素 内容+padding+border的高度

offsetLeft:向左偏移的距离

offsetTop:向上偏移的距离

offsetLeft/offsetTop是距离定位父级，如果父级元素没有定位，偏移量相对于body

clientwidth：获取的是元素 内容+padding的宽度（不包含滚动条）

clientHeight：获取的是元素 内容+padding的高度（不包含滚动条）

innerWidth:包含滚动条的页面宽度

innerHeight：包含滚动条的页面高度

• 获取到的尺寸是没有单位的数字

• 当元素在页面中不占位置的时候，获取到的是0：display：none

        // 获取浏览器的宽度和高度（包含滚动条）
        console.log("宽度",window.innerWidth)
        console.log("高度",window.innerHeight)
        // 获取可视窗口的大小（不包含滚动条）
        console.log("宽度",document.documentElement.clientWidth)
        console.log("高度",document.documentElement.clientHeight)

懒加载

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li img{
            width: 200px;
            height: 200px;
        }
    </style>

<h1>懒洋洋真可爱</h1>
    <ul id="list">
        
    </ul>

<script>
        // 创建数组用来存储将来要改变的模板内容
        var arr1=[
            {
                url:"./3.PNG",
                text:"喜羊羊"
            },
            {
                url:"./3.PNG",
                text:"懒羊羊"
            },
            {
                url:"./3.PNG",
                text:"懒羊羊"
            },
            {
                url:"./1.JPG",
                text:"喜羊羊"
            },
            {
                url:"./2.PNG",
                text:"美羊羊"
            },
            {
                url:"./2.PNG",
                text:"懒羊羊"
            }
            
        ]
        var arr2=[
            {
                url:"./1.JPG",
                text:"喜羊羊"
            },
            {
                url:"./2.PNG",
                text:"美羊羊"
            },
            {
                url:"./2.PNG",
                text:"懒羊羊"
            },
            {
                url:"./1.JPG",
                text:"喜羊羊"
            },
            {
                url:"./2.PNG",
                text:"美羊羊"
            },
            {
                url:"./2.PNG",
                text:"懒羊羊"
            }
            
        ]
        


        // 创建一个函数，完成将内容创建并放入html文本的功能,调用函数就会把数组内容传入
        function renderHTML (arr){
          //方法一：将数组内的元素以映射的方法全部放到HTML页面中
            //用+=，确保后面来的元素只是加到前面的元素后，而不是覆盖前元素
            list.innerHTML += arr.map(
                function(item){
                    return `<li>
                <img src="${item.url}" alt="">
                <span>${item.text}</span>
                </li>`
                }
            ).join("")
            //方法二： 优化,利用创建节点添加的方式加入新元素
            for(var i=0;i<arr.length;i++){
            var oli=document.createElement("li")
            oli.innerHTML= `<li>
                <img src="${arr[i].url}" alt="">
                <span>${arr[i].text}</span>
                </li>`
            }
        }
        // 回调该函数,渲染第一次的页面
        renderHTML(arr1)

        // 滑动页面会启动该回调函数
        window.onscroll=function(){
            var listHeight=list.offsetHeight//表单的整体高度
            var listTop=list.offsetTop//表单的距离顶部的偏移量（标题的高）
            // console.log(listHeight,listTop)
            //获取滚动条的滚动长度
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            // 获取可视窗口的高度
            var windowHeight=document.documentElement.clientHeight
            // 只要当前页面和滚上去的距离相加等于原来的距离，就执行下一步，加载新页面
            if(Math.round(windowHeight+scrollTop)===(listHeight+listTop)){
                // console.log("over")
                // 重新渲染下一页数据
                renderHTML(arr2)
            }
        }
        
    </script>

事件

        var oDiv=document.querySelector("div")
        oDiv.onclick=function(){}
        //谁来触发事件--oDiv--该事件的事件源
        //触发了什么事件--onclick--这个事件类型就是click
        //触发之后做什么--function（）{}--这个事件就是处理函数

事件解绑

        // 事件解绑 dom节点.onclick=null
        btn.onclick=function(){
            this.onclick=null
        }

btn.ondblclick双击绑定执行

btn.contextmenu 右键单击（自定义邮件菜单）

鼠标事件

btn.mousedown/mousemove/mouseup鼠标按下这一刻/鼠标移动在指定区域/鼠标抬起

btn.mouseover/mouseout鼠标移入（对子元素也成立）/鼠标移出

btn.mouseenter鼠标移入（对子元素不产生效果）

键盘事件

window.onkeydown按下键盘/onkeyup抬起键盘

表单事件

input.onfocus获得焦点/onblur失去焦点

input.onchange获取焦点和失去焦点的时候对比内部条件不一样才会触发

username.oninput内容不同就会触发

// 必须创建表单结构

form.submit提交/reset重置

触摸事件（只针对移动端）

box.ontouchstart开始接触

box.ontouchmove开始移动

box.ontouchend松开

事件对象

cilentX/cilentY距离浏览器可视窗口的左上角的坐标值

pageX/pageY距离页面文档流的左上角的坐标值

offsetX/offsetY距离触发元素的左上角的坐标值

    <script>   
        box.onclink=function(evt){
            console.log(evt.cilentX,evt.cilentY)
            console.log(evt.pageX,evt.pageY)
            console.log(evt.offsetX,evt.offsetY)
        }
    </script>

DOM事件流

标准的dom事件流：

捕获：window=>document=>body=>outer

目标：inner

冒泡：outer=>body=>document=>window

阻止事件传播

        function handler(evt){
            console.log(this.parentNode)
            this.parentNote.remove()
            // 阻止事件发生
            evt.stopPropagation()

            // 在ie浏览器中
            evt.cancelBulbble=true
        }

事件委托

冒泡机制中，点击子元素父元素也会触发相同事件，所以可以直接把子元素的事件委托给父元素来做，用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作