JavaScript学习笔记

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（DOM） Document object model (整合js，css，html)、浏览器对象模型（BOM） Broswer object model（整合js和浏览器）、
Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的。

JavaSript组成

常用方法

以下为JavaSrcipt常用方法

x.length                －－－－获取字符串的长度
x.toLowerCase()         －－－－转为小写
x.toUpperCase()         －－－－转为大写
x.trim()                －－－－去除字符串两边空格,但是不能去掉两边的换行符和制表符
x.charAt(index)         －－－－返回字符串中第index位置的字符
x.indexOf(findstr)      －－－－返回字符串中出现str的第一个位置(从前向后找)
x.lastIndexOf(findstr,fromIndex)   －－－－返回字符串中出现str的第一个位置(从后向前找)  ==> 用着有点不对
x.substr(start)         －－－－返回字符串从start位置开始到结尾的字符串
x.substr(start, length) －－－－start表示开始位置，length表示截取长度  ==> 前面是索引位置,后面是长度
x.substring(start)      －－－－返回字符串从start位置开始结尾的字符串
x.substring(start,end)  －－－－返回字符串从start位置开始,到索引end位置结束的字符串(左闭又开)  ===> 前面是索引位置,后面也是索引位置
x.slice(start, end)     －－－－切片操作字符串,(注意:无论下标是怎样的,查找的时候都是从前向后进行查找) [左闭右开]
其中slice的用法和substring的用法基本相同.
x.replace(findstr,tostr)   －－－－    字符串替换
x.split();                 －－－－分割字符串
x.concat(addstr)           －－－－    拼接字符串

下面是一些常用代码示例：

代码示例：

<script>
    var str1 = "I love Java"
    console.log("字符串的长度是:"+str1.length)
    console.log("字符串转化为小写:"+str1.toLowerCase())
    console.log("字符串转化为大写:"+str1.toUpperCase())
    var str2 = "Hadoop and Spark"
    console.log(str2.trim())
    console.log("字符串中第三个位置的字符是:"+str1.charAt(3))
    console.log("字符串中出现字母J的第一个位置是:"+str1.indexOf("J"))
    console.log("字符串中出现字符串Java的第一个位置是:"+str1.indexOf("Java"))
    
    console.log("字符串中从后向前出现字符串J的第一个位置是:"+str1.lastIndexOf("J"))
    console.log("返回字符串从第二个位置开始到结尾的字符串:"+str2.substr(2))
    console.log("返回字符串从第二个位置开始,并截取3个长度的串"+str2.substr(2,3))
    console.log("返回字符串从第二个位置开始到结尾的字符串"+str2.substring(2))
    console.log("返回字符串从第二个位置开始到第五个位置的字符串(左闭右开)"+str2.substring(2,5))
    //下面这两行是无效的
    console.log("返回字符串从第二个位置开始到-1位置的字符串"+str2.substring(1,-2))
    console.log("返回字符串从-5位置开始到-1位置的字符串"+str2.substring(-5,-2))
    //切片的相关操作:看来切片的功能是最强大的
    console.log("返回字符串从第二个位置开始到结尾的字符串"+str2.slice(2))
    console.log("返回字符串从第二个位置开始第五个位置的字符串(左闭右开)"+str2.slice(2,5))
    console.log("返回字符串从第二个位置开始到-1位置的字符串"+str2.slice(1,-2))
    console.log("返回字符串从-5位置开始到-1位置的字符串"+str2.slice(-5,-2))
</script>

运行结果：

1、Array.prototype.join(separator) :循环遍历数组中的每一个元素(数组中的元素可以是字符串,
  也可以是数字),并用指定的分隔符separator将它们拼接起来,结果返回一个字符串。
2、Array.prototype.concat:用于字符串的拼接的操作(当然也可以拼接数组)
3、Array.prototype.sort:不是按照数字大小进行排序的,而是按照最高位的ASCII码排序的。(这是一个坑)
如何将数字按照大小排序呢?
    function sort_arr(m,n) {
        return n - m;
    }
然后sort中的参数写的是sort_arr这个函数。
4、数组的切片操作和字符串的切片操作是一样的.
5、数组中的push pop这两个方法模拟的是一个栈操作
    x.push(value, ...)  压栈
    x.pop()             弹栈

代码示例：

<script>
    var arr1 = ["spark","Hadoop",10]
    var arr2 = new Array("spark","Hadoop",10)
    for (var i=0;i<arr1.length;i++){
        console.log(arr1[i])
    }
    for (var j=0;j<arr2.length;j++){
        console.log(arr2[j])
    }
    console.log("-------------")
    str3 = arr1.join("_")
    console.log(str3)
    str4 = arr2.join("-")
    console.log(str4)
    console.log("-------------")
    var a = [1,2,3]
    var b = a.concat([4,5])
    var c = a.concat(7,8)
    console.log(a.toString())
    console.log(b.toString())
    console.log(c.toString())
    console.log("-------------")
    var d = [100,56,34,8,6,7]
    e = d.sort()
    //数组本身的顺序发生了变化
    console.log(d)
    console.log(e)
    var arr4 = ["abc","hbfds","dfe","b"]
    arr4.sort()
    console.log(arr4)
    function sort_arr(m,n) {
        return n - m;
    }
    var d2 = [100,56,34,8,6,7]
    d2.sort(sort_arr)
    console.log(d2)
    //数组中的切片方法,和我们字符串中的方法是一样的:
    var arr5 = ["spark","Hadoop","hbase","scala","Django"]
    console.log("返回数组中第1个索引位置之后的列表"+arr5.slice(1))
    console.log("返回数组中第1个索引位置到第四个索引位置之后的列表"+arr5.slice(1,4))
    console.log("返回数组中第1个索引位置到第-1个索引位置之后的列表"+arr5.slice(1,-1))
    console.log("返回数组中第-3个索引位置到第-1个索引位置之后的列表"+arr5.slice(-3,-1))
    //数组中的插入和删除的方法:push 和 pop
    var arr6 = ["spark","Hadoop","hbase","scala","Django"]
    arr6.push("dj")
    console.log(arr6.toString())
    arr6.pop("dj")
    console.log(arr6.toString())
</script>

运行结果：

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

代码示例：

<script>
    <!--构造一个函数,获取当前最新的时间-->
    function getCurrrentDate() {
        //1、创建Date对象
        var date = new Date()
        console.log(date.toString())
        //2、获取当前年份
        var year = date.getFullYear()
        console.log("当前年份是:"+year)
        //3、获取当前月份,js中月份是从0到11,所以我们要加1
        var month = date.getMonth() + 1;
        console.log("当前月份是:"+month)
        //4、获得当前日期(即几号)
        var day = date.getDate()
        console.log("当前日期是:"+day)
        //5、获得当前小时
        var hour = date.getHours()
        console.log("当前小时是:"+hour)
        //6、获得当前分钟
        var min = date.getMinutes()
        console.log("当前分钟是:"+min)
        //7、获得当前秒
        var sec = date.getSeconds();
        console.log("当前秒是:"+sec)
        //8、获得当前星期几
        var week = date.getDay() //在js当中星期几是用数字表示的
        console.log("当前星期几:"+week)
        return year + "年" +changeNum(month)+"月"+day+"日"+hour+"时"+min+"分"+sec+"秒"+parseWeek(week)
    }
    console.log(getCurrrentDate())
    //解决:自动补齐两位数字的方法
    function changeNum(num) {
        if (num < 10)
            return "0"+num;
        else
            return num;
    }
    console.log(changeNum(6))
    //解决:将数字0-6转换成星期日到星期六
    function parseWeek(week) {
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        return arr[week];
    }
    console.log(parseWeek(0));
</script>

运行效果：

function 函数名 (参数){ <br>    函数体;
    return 返回值;
}
功能说明：
可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。
函数的内置对象arguments:函数参数的集合

函数的内置对象arguments的相关应用

<script>
    //内置对象arguments的应用1
    function add(x,y)
    {
        var sum = 0
        for (var i=0;i<arguments.length;i++)
        {
            sum += arguments[i]
            console.log(arguments[i])
        }
        console.log("总和是:"+sum)
    }
    add(2,3)
    //内置对象arguments的应用2:判断函数参数的个数是否正确
    function add_sum(a,b,c)
    {
        if (arguments.length != 3)
            console.log("函数的参数个数不对!")
        else
            alert("传入参数的个数success!")
    }

运行结果：

2  
3 
总和是:5  
函数的参数个数不对!

注意：jQuery当中没有定时器，只有Js当中有
window对象：
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
//setInterval可以让一个函数循环往复的操作.
setInterval(func,time)：按照指定的周期（以毫秒计）来调用函数或计算表达式,从而设置一个定时器。
clearInterval(arg)      取消由 setInterval() 设置的定时器,arg的数值是setInterval()的返回值。
//setTimeout只会让一个函数执行一次.
setTimeout(func,time) ：在指定的毫秒数后调用函数或计算表达式。
clearTimeout(arg)     ：取消由 setTimeout() 方法设置的定时器,arg的数值是setTimeout()的返回值。12345678910111234567891011

示例程序1：

<script>
    <!--我们对一个BOM对象操作,实际上就是对一个窗口对象经操作-->
//  alert的使用
    aa = alert("确定")
    console.log(aa)
//  confirm的使用
    bb = confirm("是否确认操作?")
    console.log(bb)
    if (bb)
        console.log("OK")
    else
        console.log("False")
// prompt的使用：类似于Python中的Input按钮
    cc = prompt("please input a number:")
    console.log("用户输入的数值是:"+cc)
</script>

示例程序2：

<script>
    <!--每隔一秒钟打一个OK-->
    function print_ok() {
        console.log("OK")
    }
    //注意:首次执行时间是2秒钟之后,而不是上来就开始执行
    var ID = setInterval(print_ok,2000)
    console.log("ID的数值是:"+ID)
    //print_ok还没有执行,就已经被取消了
    clearInterval(ID)
    //注意:首次执行时间是3秒钟之后,而不是上来就开始执行,并且只会执行一次
    var ID2 = setTimeout(print_ok,3000)
    console.log("ID2的数值是:"+ID2)
    clearTimeout(ID2)
</script>

示例程序3：定时器的应用（很重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [type="text"]{
            width: 250px;
        }
    </style>
</head>
<body>
    <input type="text">&nbsp;<button>start</button>&nbsp;<button>stop</button>
</body>
<script>
     button_ele = document.getElementsByTagName("button")
     input_ele = document.getElementsByTagName("input")[0]
     //给标签按钮增加一个事件监听器
     var ID;
     console.log("ID的初始数值是:"+ID)
     button_ele[0].onclick = function(){
         //一旦ID已经有了数值,用户的操作就置为无效:否则点一次开了一次定时器
         if (ID == undefined){
             input_ele.value = new Date().toString()
             //1s钟之后就会周而复始的更新值
             ID = setInterval(set_time,1000)
         }
     }
     button_ele[1].onclick = function(){
         clearInterval(ID)
         console.log("ID此时的数值是:"+ID)
         ID = undefined;
     }
     function set_time() {
         input_ele.value = new Date().toString()
     }
</script>
</html>

部分截图：

HTML DOM:
HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
document与element节点是重点

直接查找节点：
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)  ===> 这个只有在属性中含有name属性的时候才可以用
导航节点属性:
parentElement 或者 parentNode        // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

节点的查找实际上分为两种方式：全部查找与局部查找

1 2	获取标签的第一种方法:通过document全局查找获取标签的第二种方法:获取父标签在父亲的局部范围内去查找

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <div id="div1">
            <div name="yuan">i am div2</div>
            <div class="div2">i am div1</div>
            <div id="div3">i am div3</div>
            <p>hello p</p>
      </div>
</body>
<script>
      div2 = document.getElementsByClassName("div2")[0]
      console.log(div2)
      //父节点标签的查找方法：parentNode也可以
      div2_par = div2.parentElement
      console.log(div2_par)
      div2_parr = div2.parentNode
      console.log(div2_parr)
      //子节点标签的查找方法:别用childNodes
      div2_par_child = div2_par.children
      console.log(div2_par_child)
      //第一个子标签元素:firstChild别用
      div2_par_firstchild = div2_par.firstElementChild
      console.log(div2_par_firstchild)
      //最后一个子标签元素：lastChild别用
      div2_par_lastchild = div2_par.lastElementChild
      console.log(div2_par_lastchild)
      div2_ele = document.getElementsByClassName("div2")[0]
      //上一个兄弟标签
      div2_ele_up = div2_ele.previousElementSibling
      console.log(div2_ele_up)
      //下一个兄弟标签
      div2_ele_down = div2_ele.nextElementSibling
      console.log(div2_ele_down)
</script>
</html>

运行结果：

代码示例2：全局查找与局部查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div class="item"></div>
   <div id="d1">
       <div class="item">hello you</div>
   </div>
</body>
<script>
    //获取标签的第一种方法:通过document全局查找
    var eles = document.getElementsByClassName("item")
    console.log(eles[1])
    //获取标签的第二种方法:获取父标签在父亲的局部范围内去查找
    var div_d1 = document.getElementById("d1")
    //在div_d1的局部范围内去查找
    var hello_div = div_d1.getElementsByClassName("item")
    console.log(hello_div[0])
</script>
</html>

方法1：
onclick="fun1()"
方法2：
    item2_ele.onclick = function(){
        alert("OK_two")
    }

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" class="item1" value="click_one" onclick="fun1()">
    <input type="button" class="item2" value="click_two">
</body>
<script>
    function fun1() {
        alert("OK_one!")
    }
    item2_ele = document.getElementsByClassName("item2")[0]
    item2_ele.onclick = function(){
        alert("OK_two")
    }
</script>
</html>

获取节点对应的文本值:当标签里面没有标签的时候，两个属性是没有区别的
方法1:console.log(ele.innerText)  ==> 获取一个标签里面的所有文本
方法2:console.log(ele.innerHTML)  ==> 获取一个标签里面的所有文本以及相应的内部标签
两者的区别:
innertText只获取标签内部对应的文本(仅获取文本,结果是一个字符串),而innerHTML将标签内部的
标签都会给拿出来(识别标签)
eg:
PPP
<p>PPP</p>
如何对标签内部的文本进行赋值:
方法1:ele2[0].innerText = "<a href=''>点击</a>"
方法2:ele2[0].innerHTML = "<a href=''>点击</a>"
两者的区别:
无论怎么赋值,都是用你当前当前的内容替换掉标签里面的所有的内容,但是前者文本渲染,
后者按标签去渲染(即后者识别标签),所以通常后者用的多。
但是我自己在操作的时候很少去赋值一个标签,基本上都是克隆。

示例1：获取节点对应的文本值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">DIV</div>
    <div class="c2">
        <p>PPP</p>
    </div>
</body>
<script>
    var ele = document.getElementsByClassName("c1")[0]
    //打印出节点
    console.log(ele)
    //获取节点对应的文本值
    console.log(ele.innerText)
    console.log(ele.innerHTML)
    var ele2 = document.getElementsByClassName("c2")
    //打印出节点
    console.log(ele2[0])
    //获取节点对应的文本值:innertText只获取标签内部对应的文本(仅获取文本,结果是一个字符串),而innerHTML将标签内部的
    //标签都会给拿出来(识别标签)
    console.log(ele2[0].innerText)
    console.log(typeof ele2[0].innerText)
    console.log(ele2[0].innerHTML)
    console.log(typeof ele2[0].innerHTML)
</script>
</html>

效果：

示例2：如何对标签内部的文本值进行赋值（innerText）

<body>
    <div class="c1">DIV</div>
    <div class="c2">
        <p>PPP</p>
    </div>
</body>
<script>
    var ele = document.getElementsByClassName("c1")[0]
    var ele2 = document.getElementsByClassName("c2")
    //如何对标签内部的文本进行赋值:此时将会对标签里面的所有内容进行赋值
    ele2[0].innerText = "<a href=''>点击</a>"
    console.log(ele2[0].innerText)
</script>

效果展示：

示例3：如何对标签内部的文本值进行赋值（innerHTML）

<body>
    <div class="c1">DIV</div>
    <div class="c2">
        <p>PPP</p>
    </div>
</body>
<script>
    var ele = document.getElementsByClassName("c1")[0]
    var ele2 = document.getElementsByClassName("c2")
    //如何对标签内部的文本进行赋值:此时将会对标签里面的所有内容进行赋值
    ele2[0].innerHTML = "<a href=''>点击</a>"
    console.log(ele2[0].innerHTML)
    console.log(ele2[0].innerText)
    //即无论怎么赋值,都是用你当前当前的内容替换掉标签里面的所有的内容,但是前者文本渲染,后者按标签去渲染
</script>

运行结果：

对于这个知识点，我当年学的时候遇到了很多的坑，每次遇到这里都是各种百度，总之就是各种坑……….

就是上面的这么简单，总结如下：
在JavaScript中：

获取属性值的操作：
方法1：elementNode.getAttribute(属性名)  
方法2：elementNode.属性名
给属性赋值的操作：
方法1：elementNode.setAttribute(属性名,value) 
方法2：elementNode.属性名 = 属性值

到底啥是属性名和属性值啊？（呵呵）

示例程序：

<body>
    <input type="text" id="t1" value="123">
</body>
<script>
    var ele = document.getElementById("t1")
    //获取属性值
    //第一种方法：elementNode.getAttribute(属性名)
    console.log(ele.getAttribute("value"))
    console.log(ele.getAttribute("id"))
    console.log(ele.getAttribute("type"))
    //第二种方法：elementNode.属性名
    console.log(ele.value)
    console.log(ele.id)
    console.log(ele.type)
     //设置属性值
     //设置属性值1:elementNode.setAttribute(属性名,value)
     ele.setAttribute("value","456")
     ele.setAttribute("id","t2")
     ele.setAttribute("type","button")
    //设置属性值2:elementNode.属性名 = value
    ele.value = "789"
    ele.id = "t6"
    ele.type = "button"
</script>

1
2
3

elementNode.className  :查看标签对应的class名字(是个字符串,但是是个数组)
elementNode.classList.add:向class列表中添加一个属性
elementNode.classList.remove:向class列表中删掉一个属性

示例程序：

<body>
    <input type="text" class="d1 d2" value="python">
</body>
<script>
    ele = document.getElementsByTagName("input")[0]
    console.log(ele.className)
    console.log(typeof ele.className)
    //class属性对应的实际上是一个列表(数组)
    console.log(ele.classList)
    console.log(ele.classList[0])
    console.log(ele.classList[1])
    //给input标签的class增加一个属性
    ele.classList.add("d3")
    ele.classList.remove("d1")
    //class列表中有则不添加,没有删除也不报错
</script>

效果展示：

示例2：class的一个应用（左侧菜单案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left_menu{
            width:20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .content_menu{
            width: 80%;
            height: 500px;
            background-color: darkgray;
            float: left;
        }
        .title{
            /*将标题进行居中*/
            text-align: center;
            background-color: crimson;
            line-height: 40px;
            color: white;
        }
        /*含有con的属性会自动隐藏*/
        .hide{
            display: none;
        }
        .item{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="left_menu">
            <div class="item">
                <div class="title">菜单一</div>
                <div class="con ">
                    <p>111</p>
                    <p>111</p>
                    <p>111</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单二</div>
                <div class="con hide">
                    <p>222</p>
                    <p>222</p>
                    <p>222</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单三</div>
                <div class="con hide">
                    <p>333</p>
                    <p>333</p>
                    <p>333</p>
                </div>
            </div>
        </div>
        <div class="content_menu">哈哈</div>
    </div>
</body>
<script>
    var eles = document.getElementsByClassName("title")
    for (var i=0;i<eles.length;i++){
        eles[i].onclick = function(){
            //将标签的class列表去掉hide这个值
            this.nextElementSibling.classList.remove("hide")
            //javascript当中不能拿到坑爹的兄弟标签
            var arr_item = this.parentElement.parentElement.children
            console.log(arr_item)
            var ele_curr_p = this.parentElement
            for (var i=0;i<arr_item.length;i++){
                console.log(arr_item[i])
//              在这里面判断两个标签是否相同
                if (arr_item[i] != ele_curr_p){
                    arr_item[i].children[1].classList.add("hide")
                }
            }
        }
    }
</script>
</html>

效果展示：

JavaScript当中：
创建节点:
createElement(标签名) ：创建一个指定名称的元素.
给节点增加属性,并进行赋值:
elementNode.setAttribute(属性名,value)
注意：elementNode.属性名 = 属性值 方法将失效
添加节点:
追加一个子节点（将作为最后的子节点）
parentnode.appendChild(newnode)
删除节点:
parentnode.removeChild(子节点)：获得要删除的元素，通过父元素调用删除
替换节点:
parentnode.replaceChild(newnode, oldnode);

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent_node{
            width: 400px;
            height: 400px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <div class="parent_node">
        <h1>hello 码农</h1>
    </div>
    <button>add_img</button>
    <button>remove_h1</button>
    <button>replace_h1</button>
</body>
<script>
    //获取到增加、删除、替换按钮
    var add_button = document.getElementsByTagName("button")[0]
    var remove_button = document.getElementsByTagName("button")[1]
    var replace_button = document.getElementsByTagName("button")[2]
    //获取父节点
    var ele_div = document.getElementsByClassName("parent_node")[0]
    add_button.onclick = function(){
        //创建img节点
        var img_ele = document.createElement("img")
        //为节点的属性赋值
        img_ele.setAttribute("src","biancheng.png")
        //添加节点
        ele_div.appendChild(img_ele)
        //在创建一个input节点: <input type="text" id="t1" value="123" class="item">
        var ele_input = document.createElement("input")
        ele_input.setAttribute("type","text")
        ele_input.setAttribute("id","t1")
        ele_input.setAttribute("value","123")
        ele_input.setAttribute("class","123")
        //在添加节点
        ele_div.appendChild(ele_input)
    }
    remove_button.onclick = function () {
        //找到h1节点
        var h1_button = document.getElementsByTagName("h1")[0]
        //进行删除操作
        ele_div.removeChild(h1_button)
    }
    replace_button.onclick = function () {
        //找到h1节点
        var h1_button = document.getElementsByTagName("h1")[0]
        //创建一个input节点
        var ele_input = document.createElement("input")
        ele_input.setAttribute("type","text")
        ele_input.setAttribute("id","t2")
        ele_input.setAttribute("value","456")
        ele_input.setAttribute("class","456")
        //进行删除操作
        ele_div.replaceChild(ele_input,h1_button)
    }
</script>
</html>

效果展示：

代码示例：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            width: 100%;
            height: 1200px;
            background-color: firebrick;
        }
        .fade{
            /*参照物是当前屏幕:绝对脱离文档流*/
            position: fixed;
            /*满屏: 0 0 0 0 */
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: darkgray;
            /*设置透明度*/
            opacity: 0.8;
        }
        .model{
            /*绝对脱离文档流,参照物实际上是body*/
            width: 400px;
            height: 200px;
            background-color: wheat;
            position: absolute;
            top:50%;
            left:50%;
            /*下面的两个值实际上是高和宽的一半*/
            margin-left:-200px ;
            margin-top: -100px;
            border-radius: 5%;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="back">
        <input type="button" value="show" id="show">
    </div>
    <!--fade在这里面表示遮罩层:实际上就是一个大背景-->
    <div class="fade hide"></div>
    <!--弹出框:-->
    <div class="model hide">
        <input type="button" value="点击" id="click">
    </div>
</body>
<script>
    var ele = document.getElementById("show")
    var div_fade = document.getElementsByClassName("fade")[0]
    var div_model = document.getElementsByClassName("model")[0]
    var ele2 = document.getElementById("click")
    ele.onclick = function(){
        div_fade.classList.remove("hide")
        div_model.classList.remove("hide")
    }
    ele2.onclick = function(){
        //下面这种方式是推荐的
        this.parentElement.classList.add("hide")
        this.parentElement.previousElementSibling.classList.add("hide")
    }
</script>
</html>

效果展示：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>
    <hr>
    <!--border可以设置边框-->
    <table border="1">
        <tr>
            <th>  </th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <!--checkbox代表复选框的意思-->
            <td><input type="checkbox"></td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <!--checkbox代表复选框的意思-->
            <td><input type="checkbox"></td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <!--checkbox代表复选框的意思-->
            <td><input type="checkbox"></td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>
</body>
<script>
    <!--checked == true|"checked"表示复选框被选中-->
    var button_eles = document.getElementsByTagName("button")
    var ele_checkbox = document.getElementsByTagName("input")
    for (var i=0;i<button_eles.length;i++){
        button_eles[i].onclick = function(){
            if (this.innerText == "全选")
            {
                for (var j=0;j<ele_checkbox.length;j++){
                    ele_checkbox[j].checked = "checked"
                    ele_checkbox[j].checked = true
                }
            }
            else if(this.innerText == "反选")
            {
                for (var j=0;j<ele_checkbox.length;j++){
                    if (ele_checkbox[j].checked){
                        ele_checkbox[j].checked = false
                    }
                    else
                        ele_checkbox[j].checked = true
                }
            }
            else{
                for (var j=0;j<ele_checkbox.length;j++){
                    //复选框不选中的表达方式
                    ele_checkbox[j].checked = false
                }
            }
        }
    }
</script>
</html>

1
2
3

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <div class="item">hello you</div>
    </div>
    <input type="button" value="点我">
</body>
<script>
    div_item = document.getElementsByClassName("item")[0]
    console.log(div_item)
    input_button = document.getElementsByTagName("input")[0]
    console.log(input_button)
    //为点击按钮增加相应的事件监听器:点击字体之后变颜色
    input_button.onclick = function(){
        //注意:value值要加双引号
        div_item.style.color = "blue";
        div_item.style.fontSize="48px";
        div_item.style.backgroundColor = "red";
    }
</script>
</html>

效果展示：

onsubmit：
当表单在提交时触发,该属性也只能给form元素使用.
应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.(验证在前端与后端都要进行验证,在默认事件发生之前,先进行验证)
默认submit作用：在form表单中,当点击这个按钮后,会将form表单中所有的数据打包然后发到server端,这个事件是这个按钮自带的一个事件(默认的提交事件)。
阻止默认的提交事件的两种方法：
return false;
e.preventDefault()

onsubmit代码示例（事件默认是这样子的）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" id="form">
        姓名:<input type="text"><br>
        密码:<input type="password"><br>
        <input type="submit">
    </form>
</body>
<script>
    var ele = document.getElementById("form")
    //e指的是所有事件的状态：e实际上就是发生的事件:event对象封装了我们所有事件的状态
    ele.onsubmit = function(e){
        alert("123")  //这一行代码可以理解为登陆验证
        //通过return false可以阻止默认事件的发生(:向服务器端发送form表单的数据)
        //return false;
        //e.preventDefault()
    }
</script>
</html>

放行之前的效果：

放行之后的效果：

从效果上我们可以看出，如过在前端验证未通过，数据包将不能发送到服务端。

onkeydown:
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="test">
</body>
<script>
    var ele = document.getElementById("test")
    //按下鼠标之后的反应
    ele.onkeyup = function(event){
        //先做兼容
        event = event || window.event
        //keynum实际上是ASCII编码
        var keynum = event.keyCode
        console.log(keynum)
        var keychar = String.fromCharCode(keynum)
        if (keychar == "B"){
            alert("OK")
        }
    }
</script>
</html>

获取焦点与失去焦点的主要作用是用于提示用户的相关操作

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--placeholder在这里面实际上是一个提示的作用-->
    <input type="text" placeholder="侣神">
    <input type="text" value="侣神" id="search">
</body>
<script>
    var ele = document.getElementById("search")
    //获取焦点
    ele.onfocus = function(){
        this.value = ""
    }
    //失去焦点
    ele.onblur = function(){
        if (!this.value.trim())
        this.value = "用户名"
    }
</script>
</html>

OK，就写到这里！

欢迎star 我的博客：Lvshen’s Blog

JavaScript学习笔记

常用方法

函数的内置对象arguments的相关应用

节点的查找实际上分为两种方式：全部查找与局部查找

谢谢大爷~