深入解析JavaScript

最新推荐文章于 2022-12-18 17:45:41 发布

一只懒得睁眼的猫

最新推荐文章于 2022-12-18 17:45:41 发布

阅读量6.1k

点赞数 13

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/a2011480169/article/details/76706014

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

博客核心内容：

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 描述了以下内容：
语法
类型
语句
关键字
保留字
运算符
对象 (封装继承多态) 基于对象的语言,使用对象.
这里写图片描述
本篇博客将围绕上面三部分进行叙述。

1、JavaScript中字符串的常见操作

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>

运行结果：
这里写图片描述

2、JavaScript中数组的常见操作

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>

运行结果：
这里写图片描述

3、JavaScript中日期的常见操作

获取日期和时间
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>

运行效果：
这里写图片描述

4、JavaScript中函数的常见操作

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  
函数的参数个数不对!

5、JavaScript中的BOM对象

注意：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>

部分截图：
这里写图片描述

6、HTML DOM对象中的节点查找（全局查找与局部查找）

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>

7、Js中增加事件的两种操作

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

8、如何获取节点对应的文本值以及如何对标签内部的文本值进行赋值（很常用）

获取节点对应的文本值:当标签里面没有标签的时候，两个属性是没有区别的
方法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>

运行结果：
这里写图片描述

9、如何对一个标签的属性进行赋值和取值

对于这个知识点，我当年学的时候遇到了很多的坑，每次遇到这里都是各种百度，总之就是各种坑……….
这里写图片描述
就是上面的这么简单，总结如下：
在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>

10、关于classlist的相关操作

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>

效果展示：

10、节点操作

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>

效果展示：

11、模态对话框

代码示例：

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

效果展示：

12、复选框如何表示选中与未选中以及相应的案例

这里写图片描述
代码示例：

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

13、如何在JavaScript当中改变css样式

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

效果展示：

14、JavaScript中的事件介绍

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>

15：补充
jquery版本:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input style="width: 300px" type="text">&nbsp;<button name="class1">start</button>&nbsp;<button name="class2">stop</button>
    <script src="jquery-3.1.1.js"></script>
    <script>
         button_start = $("button").eq(0)
         button_end = $("button").eq(1)
         input_button = $("input").eq(0)

         var ID;

         // undefined
         button_start.click(function(){
             if (ID == undefined){
                 input_button.val(new Date().toString())
                 ID = setInterval(set_time,2000)
             }
         })
         button_end.click(function(){
              clearInterval(ID)
              console.log('ID此时的数值是:'+ID)
              ID = undefined
         })
         function set_time() {
             input_button.val(new Date().toString())
         }
    </script>
</body>
</html>

OK，写到这里，睡觉了！

一只懒得睁眼的猫

关注

13
点赞
踩
65

收藏

觉得还不错? 一键收藏
打赏
5
评论
深入解析JavaScript

博客核心内容：1、JavaScript中字符串的常见操作 2、JavaScript中数组的常见操作 3、JavaScript中日期的相关操作 4、JavaScript中函数的相关操作 5、JavaScript中的BOM对象 6、HTML DOM对象中的节点查找（全局查找以及局部查找） 7、JavaScript中增加时间的两种操作 8、如何获取节点对应的文本值以及如何对标签内部的文本值
复制链接

扫一扫