博客核心内容：

1、JavaScript中字符串的常见操作
2、JavaScript中数组的常见操作
3、JavaScript中日期的相关操作
4、JavaScript中函数的相关操作
5、JavaScript中的BOM对象
6、HTML DOM对象中的节点查找（全局查找以及局部查找）
7、JavaScript中增加时间的两种操作
8、如何获取节点对应的文本值以及如何对标签内部的文本值进行赋值（很常用）
9、如何对一个标签的属性进行赋值和取值
10、节点操作（重点）
11、模态对话框
12、复选框如何表示选中与未选中以及相应案例
13、如何自JavaScript当中改变css样式
14、事件介绍（onsubmit、onkeyup、onfocus）
15、定时器Jquery补充版本
16、补充（JS当中的其他事件）

概括：一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript） 、文档对象模型（DOM） Document object model (整合js，css，html)、浏览器对象模型（BOM） Broswer object model（整合js和浏览器）、
Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的。
简单地说，ECMAScript 描述了以下内容：
语法
类型
语句
关键字
保留字
运算符
对象 (封装 继承 多态) 基于对象的语言,使用对象.

本篇博客将围绕上面三部分进行叙述。

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)           －－－－    拼接字符串

其实JavaScript中字符串的操作和Java、Python基本差不都，下面截取一张Java中常见字符串的操作。



代码示例：

<script>
    var str1 = "I love Python"
    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("字符串中出现字母P的第一个位置是:"+str1.indexOf("P"))
    console.log("字符串中出现字符串Python的第一个位置是:"+str1.indexOf("Python"))
    //下面这个感觉结果不对啊
    console.log("字符串中从后向前出现字符串P的第一个位置是:"+str1.lastIndexOf("P"))

    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()的返回值。

示例程序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  // 上一个兄弟标签元素

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

获取标签的第一种方法:通过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>

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{
            /*将标题进行居中*/