JS提高

最新推荐文章于 2024-07-28 14:43:22 发布
最新推荐文章于 2024-07-28 14:43:22 发布
阅读量371 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/99349794
版权

《JavaScript提高-笔记》

JS事件的处理

目标

学习使用命名函数和匿名函数设置事件

什么是事件

​ 用户可以对网页的元素有各种不同的操作如：单击，双击，鼠标移动等这些操作就称为事件。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

[外链图片转存失败(img-tHKAZy81-1565620905825)(/)]

设置事件的两种方式

  1. 方式一：命名函数

    <input type="button" onclick="函数名()">

JS所有的事件名称都是以on开头

  2. 方式二：匿名函数

    元素对象.onclick = function() {
	
}

这种方式的事件处理函数不能重用
事件处理案例

有两个按钮，点第1个弹出一个信息框，点第2个弹出另一个信息框。分别使用两种不同的方式激活事件

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件驱动函数2种写法</title>
</head>
<body>
<!--产生事件-->
<input type="button" onclick="clickMe()" value="点我试试">
<input type="button" value="匿名函数" id="b2">

<script type="text/javascript">
    //事件处理函数：命名函数
    function clickMe() {
        alert("试试就试试");
    }

    /*
    因为通过id得到元素，所以要写在button的后面
    匿名函数写法
    元素对象.onclick = function() {   }
     */
    document.getElementById("b2").onclick = function () {
        alert("被你发现了");
    }
</script>
</body>
</html>

注意: 在JS来找HTML的标签，script代码要写到HTML标签的下面

小结

  1. 事件处理中命名函数的写法

    <input onclick = "函数名()"/>

  2. 事件处理中匿名函数的写法

    元素对象.onclick = function() {
    
}

事件介绍：onload、ondblclick

目标

  1. 网页加载完毕事件
  2. 鼠标双击
网页加载完成事件

  1. 事件名：window.onload

  2. 当网页加载完毕后会触发这个事件

  3. 示例：页面加载完毕以后，才执行相应的JS代码

  4. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script>
        // 使用onload事件，在页面加载完毕以后再执行这段代码
        window.onload = function () {
            // alert("加载完了...");
            document.getElementById("b1").onclick = function () {
                alert("被点击了...");
            }
        }
    </script>
</head>
<body>
<div>
早上好
</div>
<input type="button" value="来啊!" id="b1">
<input type="button" value="点我啊!" id="b2">
</body>
</html>
鼠标双击击事件

双击：ondblclick

案例演示

需求：双击清除文本内容

[外链图片转存失败(img-7lMPUlcy-1565620905825)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件介绍：onload、ondblclick</title>
    <script>
        // onload事件
        window.onload = function () {
            // alert("网页加载完成了");
        }
    </script>
</head>
<body>

姓名1: <input id="i1"/><br/>
姓名2: <input id="i2"/><br/>
<input type="button" value="双击复制" ondblclick="click01()"/>
<script>
    // 命名函数设置事件
    function click01() {
        // 1.找到上面的输入的内容
        var content = document.getElementById("i1").value;
        // 2.将内容设置给下面的输入框
        document.getElementById("i2").value = content;
    }
</script>
</body>
</html>

小结

  1. 加载完成事件名：window.onload
  2. 双击事件名：ondblclick

事件介绍：鼠标移入和移出

目标

  1. 学习鼠标移入事件
  2. 学习鼠标移出事件
事件名
  1. 鼠标移入：onmouseover
  2. 鼠标移出：onmouseout
示例

需求：将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px
[外链图片转存失败(img-nDgzSY6i-1565620905825)(/)]

步骤
  1. 使用img标签显示一张图片
  2. 设置鼠标移入事件，在这个移入事件中img标签换一张图片
  3. 设置鼠标移出事件，在这个移出事件中img标签换一张图片
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移上/移出</title>
</head>
<body>
<img src="img/0.jpg" id="pic" width="600" onmouseover="changePic(this)">

<script type="text/javascript">
    // 设置鼠标移入事件
    function changePic(obj) {
        obj.src = "img/4.jpg";
    }

    // 鼠标移出事件
    document.getElementById("pic").onmouseout = function () {
        document.getElementById("pic").src = "img/2.jpg";
    }
</script>
</body>
</html>

小结

  1. 鼠标移入(上)：onmouseover
  2. 鼠标移出：onmouseout

事件介绍：得到焦点、失去焦点、改变事件

目标

  1. 得到焦点
  2. 失去焦点
  3. 改变事件
事件名
  1. 得到焦点：onfocus
  2. 失去焦点： onblur
焦点事件示例

当文本框获取到焦点时显示正在输入，得到焦点时显示请输入

[外链图片转存失败(img-rMpwMDm5-1565620905829)(/)]

实现步骤
  1. 编写界面
  2. 设置输入框得到焦点的事件，在事件中，将文字换成正在输入
  3. 设置输入框失去焦点的事件，在实践中，将文字换成请输入
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>得到焦点和失去焦点</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>

用户名: <input onfocus="f3()" onblur="f4()"/><span id="sp">请输入</span>

<script>
    // 得到焦点的事件
    function f3() {
        // innerHTML: 修改标签里面的内容
        document.getElementById("sp").innerHTML = "正在输入";
    }
    
    // 失去焦点事件
    function f4() {
        document.getElementById("sp").innerHTML = "请输入";
    }
</script>
</body>
</html>
内容改变事件

事件名：onchange

  1. 选中不同的城市，出现一个信息框显示选中城市的值
  2. 用户输入英文字母以后，文本框的字母全部变成大写

[外链图片转存失败(img-UGEYofSe-1565620905829)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件</title>
</head>
<body>

请输入英文: <input id="i1" onchange="f5()"/>

城市:
<select id="se" onchange="f6()">
    <option value="gz">广州</option>
    <option value="dg">东莞</option>
    <option value="sz">深圳</option>
</select>

<script>
    function f5() {
        // 得到输入框的值
        var str = document.getElementById("i1").value;

        // 将小写转成大写
        // alert(str.toUpperCase());
        document.getElementById("i1").value = str.toUpperCase();
    }

    function f6() {
        var val = document.getElementById("se").value;
        alert(val);
    }
</script>
</body>
</html>

小结

  1. 得到焦点事件名: onfocus
  2. 失去焦点事件名: onblur
  3. 改变事件事件名: onchange

数组的使用

目标

  1. 学习JS中数组的创建
  2. 学习JS数组中的常用方法
回顾Java中的数组

数组: 长度固定，只能存储同一种类型的数据

int[] arr = new int[5];

集合: 长度可变，有对数据增删改查的方法

ArrayList<String> list = new ArrayList<>();
list.add("a");
list.add("b");
list.add("c");

list.get(0);
JS创建数组的四种方式

Array是JavaScript的内置对象，我们可以直接使用。

创建数组的⽅方式说明
new Array()创建一个长度为0的数组
new Array(5)创建一个长度为5的数组
new Array(2,4,10,6,41)指定数组中的元素值创建数组
[4,3,20,6]指定数组中的元素值创建数组
JS数组的特点
  1. 数组中元素的类型可以不同
  2. 长度可以动态变化
  3. 数组中还有方法
数组的常用方法

[外链图片转存失败(img-p9oILXNm-1565620905829)(/)]

字符串的比较规则
  • 字符串按字母的ASCII码值比较大小，如果第1个字母相同，则比较第2个。
方法演示案例

[外链图片转存失败(img-MKiLabZo-1565620905829)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS数组</title>
</head>
<body>
<script>
    // 数组创建
    var array1 = new Array();
    document.write(array1 + "<br/>");

    var array2 = new Array(5);
    document.write(array2 + "<br/>");

    // 数组元素类型可以不同
    var array3 = new Array(true, 1.1, 22, "hello");
    document.write(array3 + "<br/>");
    
    var array4 = [11, 'hello', false, 2.2];
    document.write(array4 + "<br/>");

    // 数组添加数据
    array4.push(22222);
    document.write(array4 + "<br/>");

    // 数组删除数据
    array4.pop();
    document.write(array4 + "<br/>");

    // 数组修改数据
    array4[0] = 100;

    // 数组获取数据
    document.write("数组获取数据: " + array4[0] + "<br/>");

    // 数组长度
    document.write(array4.length + "<br/>");

    // 遍历数组
    for (var i = 0; i < array4.length; i++) {
        document.write(array4[i] + "<br/>");
    }

    document.write("数组方法" + "<br/>");
    // 数组方法
    var array5 = [1, 2, 3];
    var array6 = [4, 3, 2];
    // 数组拼接
    var array7 = array5.concat(array6);
    document.write("concat: " + array7 + "<br/>");

    // 数组反转
    array7.reverse();
    document.write("数组反转: " + array7 + "<br/>");

    // 将数组转成字符串,以指定内容连接,和字符串分割相反
    var s = array7.join("^_^");
    document.write("数组拼接" + s + "<br/>");

    // 数组排序
    var arr = ['ac','abcdefg','x','AB','3' ];
    document.write("排序前: " + arr + "<br/>");
    arr.sort();
    document.write("排序后: " + arr + "<br/>");

    // 数组中是数字,会先将数字变成字符串,然后按照字符串的规则排序
    var array8 = [100, 9, 46, 20];
    document.write(typeof(array8[0]) + "<br/>");
    document.write("排序前: " + array8 + "<br/>");
    array8.sort()
    document.write("排序后: " + array8 + "<br/>");

    // 按照自己的规则来排序
    array8.sort(function (a, b) {
        // return a - b;
        return b - a;
    });
    document.write("比较器排序后: " + array8 + "<br/>");
</script>
</body>
</html>

小结

方法名功能
push()添加元素
pop()删除元素
concat()合并数组
reverse()数组元素反转
join(separator)将数组元素个参数进行拼接，形成一个字符串
sort()数组排序

JS内置对象：日期对象

目标

学习JS日期对象方法的使用

创建日期对象
var 变量名 = new Date()
说明：创建一个当前时间的日期对象
日期对象的方法

[外链图片转存失败(img-iSPbYbCt-1565620905829)()]

方法效果

[外链图片转存失败(img-4JcwXGJ3-1565620905829)(/../../../../%E5%B9%BF%E5%B7%9E%E9%BB%91%E9%A9%ACJavaEE%E5%B0%B1%E4%B8%9A117%E6%9C%9F/day22/source/img/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>
<script>
    // 创建Date表示现在的时间
    var date = new Date();
    document.write(date + "<br/>");

    // 以本地的时间显示
    document.write("本地时间:" + date.toLocaleString() + "<br/>");
    document.write("年:" + date.getFullYear() + "<br/>");
    document.write("月:" + date.getMonth() + "<br/>");
    document.write("日:" + date.getDate() + "<br/>");
    document.write("星期:" + date.getDay() + "<br/>");
    document.write("1970年1月1日00:00:00以来的毫秒值:" + date.getTime() + "<br/>");
</script>
</body>
</html>

小结

说说下面Date方法的作用

  1. getFullYear() 获取年
  2. getDay() 获取星期
  3. getTime() 获取自1970年1月1日以来毫秒值
  4. toLocaleString() 转成本地时间

使用JS修改CSS的样式

目标

学习JS操作CSS样式

在JS中操作CSS属性命名上的区别
CSS中写法JS中的写法说明
colorcolor如果只有一个单词，JS写法与CSS一样的
font-sizefontSize如果有多个单词，使用驼峰命名法

[外链图片转存失败(img-2REoZvNO-1565620905829)(/)]

JS操作样式方式一
方式说明
元素对象.style.属性名=“属性值”;每一行代码只能修改一个样式，如果有多个样式必须写多条代码实现
JS操作样式方式二
方式说明
元素对象.className=“类名”;一条代码可以一次修改多个样式，前提先要创建一个类样式
示例：点按钮，修改p标签的字体、颜色、大小

[外链图片转存失败(img-PycjeJfu-1565620905829)(/]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过js修改css样式</title>
    <style type="text/css">
        .aa {
            color: red;
            font-size: 50px;
        }

        .bb {
            color: orange;
            font-size: 100px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
<p id="p1">这是第一自然段</p>
<p id="p2" class="aa">这是第二自然段</p>

<input type="button" value="JS改变CSS样式" id="btn1"/>
<input type="button" value="JS改变类样式" id="btn2"/>

<script type="text/javascript">
    // 按钮一点击时设置第一个p标签的样式
    // 语法: 元素对象.style.样式名="样式值"
    document.getElementById("btn1").onclick = function () {
        var p1 = document.getElementById("p1");
        p1.style.color = "blue";
        p1.style.fontFamily = "宋体";
        p1.style.fontSize = "30px";
    }

    // 按钮二点击时设置第二个p标签的class属性的值
    // 语法: 元素对象.className="类名"
    document.getElementById("btn2").onclick = function () {
        document.getElementById("p2").className = "bb";
    }
</script>
</body>
</html>
网页变化

[外链图片转存失败(img-bJALHA11-1565620905829)(/)]

小结

JS修改CSS样式的两种方式?

单独修改一个样式: 元素对象.style.样式名 = "样式值"；
一次改多个样式,就是修改标签class的值: 元素对象.className = "类名"；

案例：鼠标移动到文字上显示提示文字

目标

[外链图片转存失败(img-AWkIRrCF-1565620905829)(/g)]

技术点
display样式说明
none表示元素不可见
block以块标签显示，有换行
inline以内联标签显示，没有换行
步骤
  1. 网页上有一个a标签链接，a标签下有一个不可见的div
  2. 鼠标移到a标签，设置div的样式，让div可见
  3. 鼠标移出a标签，设置div的样式，让div不可见
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS案例</title>

    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        #info {
            width: 180px;
            height: 30px;
            border: 1px dashed orange;
            border-radius: 5px;
            text-align: center;
            background-color: lightyellow;
            /* display: none 隐藏元素*/
            display: none;
        }
    </style>
</head>
<body>
<a id="a1" href="http://ntlias3.boxuegu.com/" onmouseover="f1()" onmouseout="f2()">黑马程序员官网</a>
<div id="d1">点我有惊喜,大大的惊喜!</div>

<script>
    // 鼠标移入
    function f1() {
        // 1. 鼠标移到a标签，设置div的样式，让div可见
        document.getElementById("d1").style.display = "block";
    }

    // 2. 鼠标移出a标签，设置div的样式，让div不可见
    function f2() {
        document.getElementById("d1").style.display = "none";
    }
</script>
</body>
</html>

小结

隐藏元素使用什么样式？

display = none

块级标签显示

display = block;

内联标签显示

display = inline;

BOM介绍

目标

  1. 学习BOM的概念
  2. 学习BOM中的3个对象作用
什么是BOM

Browser Object Model: 浏览器对象模型。BOM操作的是浏览器上的对象

[外链图片转存失败(img-R4oNwrko-1565620905833)(/)]

BOM对象
BOM常用对象作用
window表示浏览器窗口对象
location表示地址栏对象
history表示浏览历史记录对象

小结

说出BOM中的3个对象作用?

windows: 表示浏览器窗口

location: 表示浏览器的地址栏

history: 表示浏览器的历史记录

BOM：window中的三个对话框方法

目标

学习window中的三个对话框

语法

[外链图片转存失败(img-N2cdwSus-1565620905833)(/)]

confirm案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认框</title>
</head>
<body>
<script>
    // window中的内容可以省略window不写
    // 1.提示框
    // window.alert("确定吗?");
    // alert("确定吗?");

    // 2.输入框
    // prompt("请输入行数?", "9");

    // 3.确认框, 点击确定返回true, 点击取消返回false
    var r = confirm("确定吗?");
    document.write(r + "<br/>");
</script>
</body>
</html>

小结

window中的方法说明
alert()提示框
prompt()输入框
confirm()确认框

BOM：location对象

目标

学习location对象的方法和属性

[外链图片转存失败(img-7bAC3ACA-1565620905833)(/)]

location对象作用：地址栏，是window的一个属性。完整写法：window.location。

location常用属性

[外链图片转存失败(img-A1mN4FLM-1565620905833)(/)]

  1. location是window的一个属性
  2. 可以省略href属性
window.location.href = "地址";
window.location = "地址";
location.href = "地址";
location = "地址";
location常用方法

[外链图片转存失败(img-DvABlh1y-1565620905837)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
<input type="button" value="刷新" onclick="location.reload()"><br/><br/>
<script>
    // 获取:浏览器上访问的地址字符串
    // document.write(location.href + "<br/>");

    // 设置浏览器访问地址,属性相当于跳转到新的页面
    // location.href = "http://www.baidu.com";

    // search得到?后面的参数
    // alert(location.search)

    // 如果location没有写任何属性，默认就是href属性赋值
    // location = "http://www.baidu.com";
    document.write(new Date() + "<br/>");
</script>
</body>
</html>

小结

  1. location学习了哪两个属性
    location.href : 得到/修改 地址栏上地址
    location.search: 得到地址栏上?及以后的内容

  2. location与window是什么关系?

    location是window的一个属性，可以省略window

BOM：history对象

目标

学习history对象的3个方法

[外链图片转存失败(img-O6YjilHC-1565620905837)(/)]

history作用

表示访问过的历史记录，如果没有历史记录，这个对象中的方法不可用。

[外链图片转存失败(img-nVWbaRdR-1565620905837)(/)]

[外链图片转存失败(img-xaZfckiL-1565620905837)(/)]

注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。

读取的是浏览器缓存中数据，如果要访问服务器的数据，需要刷新。

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录对象</title>
</head>
<body>
<a href="07_date.html">显示时间</a>
<input type="button" value="前进" onclick="history.forward()"/>
<input type="button" value="前进go" onclick="history.go(1)"/>
</body>
</html>

小结

方法作用
forward()/go(1)前进
back()/go(-1)后退

案例：倒计时页面跳转

目标

window对象与location对象的综合案例应用

window中计时器有关的方法
方法名作用
setTimeout(函数名, 间隔毫秒数)在指定的毫秒数后执行指定的代码(只会执行一次)，返回值：返回一个整数的计时器。
clearTimeout(计时器)清除计时器，参数计时器。
setInterval(函数名,间隔毫秒数)开启一个定时任务，每隔指定的毫秒数执行指定的方法返回值：返回一个整数的计时器器。
clearInterval(计时器)清除计时器，参数计时器。
需求

页面上显示一个倒计时5秒的数字，到了5秒以后跳转到另一个页面

[外链图片转存失败(img-Tt4RY5jV-1565620905837)(/)]

分析
  1. 在页面上创建一个span用于放置变化的数字。
  2. 定义一个全局变量为5，每过1秒调用1次自定义refresh()函数
  3. 编写refresh()函数，时间-1秒，修改span中的数字
  4. 判断变量是否为0，如果是0则跳转到新的页面
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时5秒</title>
</head>
<body>
<span id="count">5</span>秒后跳转
<script type="text/javascript">
    var count = 5;

    // 每过1秒修改1次span中数字
    window.setInterval("refresh()", 1000);

    // 被调用的函数
    function refresh() {
        // 减1
        count--;
        // 更新span
        document.getElementById("count").innerHTML = count;
        if (count == 0) {
            // 跳转到其它页面
            location.href = "http://www.baidu.com";
        }
    }
</script>
</body>
</html>

小结

  1. 每过一段时间执行的方法是： setIntervale(函数名，时间间隔)
  2. 某个时间后执行一次的方法是：setTimeOut(函数名，时间间隔)
  3. 跳转到另一个页面使用: location.href = “新的地址”;
  4. 更新数字显示使用：找到span标签.innerHTML = “新内容”

案例：轮播图

目标

每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。

[外链图片转存失败(img-1A0AVyxW-1565620905837)(/)]

步骤
  1. 页面中有一个div标签，div标签内包含一个img标签。设置div为居中；img的宽度500px;
  2. 五张图片的名字依次是0~4.jpg，图片一开始的src为第0张图片。
  3. 编写函数：refresh()，使用setInterval()函数，每过3秒调用一次。
  4. 定义全局变量：num=1，表示现在是第几张图片。
  5. 在refresh()方法中，设置图片的src属性为img/num.jpg。
  6. 判断num是否等于5，如果等于5，则num=0；否则num++。
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

    <style type="text/css">
        body {
            background-color: white;
        }

        .container {
            margin: auto;
            border: 1px solid yellowgreen;
            width: 500px;
            height: 375px;
        }

        #pic {
            width: 500px;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="img/0.jpg" id="pic">
</div>

<script type="text/javascript">
    // setInterval定时调用方法
    // 每过2000毫秒调用refresh方法
    window.setInterval("refresh()", 2000);


    // 表示下一张图片的名称
    var num = 1;
    function refresh() {
        // 通过id获取img标签
        var img = document.getElementById("pic");

        // 给img标签的src重新设置一张图片
        img.src = "img/" + num + ".jpg";
        num++;
        // 如果已经是最后一张图片,切换成最前面一张
        if (num == 5) {
            num = 0;
        }
    }
</script>
</body>
</html>

小结

方法描述
document.getElementById(“id”)通过id找到元素
window.setInterval(“函数名()”,时间)
window.setInterval(函数名,时间)		每隔指定时间执行对应的函数

innerHTML和innerText的区别

目标

学习innerHTML和innerText的区别

语法
元素的属性作用
innerHTML获得：得到标签中主体内容，包含子标签
设置：修改标签中的主体内容
innerText获得：得到标签中纯文本的内容
设置： 修改标签中主体内容为纯文本，而不是HTML，它的标签不起作用。
案例效果

[外链图片转存失败(img-VNxcwj2d-1565620905837)(/)]

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML和innerText</title>
</head>
<body>
<div id="myDiv">
    <span>
        <a href="#">我是链接</a>
    </span>
</div>
<hr/>
<!--innerHTML和innerText区别-->
<input type="button" id="b1" value="得到HTML">
<input type="button" id="b2" value="得到Text">
<input type="button" id="b3" value="设置HTML">
<input type="button" id="b4" value="设置Text">

<script type="text/javascript">
    document.getElementById("b1").onclick = function () {
        alert(document.getElementById("myDiv").innerHTML);
    }

    document.getElementById("b2").onclick = function () {
        alert(document.getElementById("myDiv").innerText);
    }

    document.getElementById("b3").onclick = function () {
       document.getElementById("myDiv").innerHTML = "<h2 style='color:red'>人鬼情喂鸟</h2>"
    }

    document.getElementById("b4").onclick = function () {
        document.getElementById("myDiv").innerText = "<h2 style='color:red'>人鬼情喂鸟</h2>"
    }
</script>
</body>
</html>

小结

元素的属性作用
innerHTML获取时: 会得到里面的标签

设置时: 标签起效果
innerText获取时: 不会得到里面的标签，只会得到里面的文本

设置时: 标签不起效果，看作普通文本

DOM介绍

目标

学习DOM的概念

DOM的概念

Document Object Model: 文档对象模型，就是网页上的标签

[外链图片转存失败(img-OCXvIZH6-1565620905837)(/)]

每个HTML文档，浏览器在进行解析的时候，都会在内存中创建一棵DOM树，根在上面，下面是节点。节点是元素和属性，文本的父元素。文档就是document对象。

[外链图片转存失败(img-JegavApL-1565620905837)(/)]

浏览器显示的过程

[外链图片转存失败(img-cmr9E4OY-1565620905841)(/)]

DOM查找元素的四个方法(重点)

目标

学习DOM查找元素的四个方法

查找节点的方法

[外链图片转存失败(img-aFdrhBXE-1565620905841)(/)]

[外链图片转存失败(img-c2dj4hLG-1565620905841)(/)]

案例：查找节点

[外链图片转存失败(img-HXqKuFym-1565620905841)(/)]

步骤
  1. 点第1个按钮，给所有tr奇数行和偶数行添加不同的背景色
  2. 点击第2个按钮，选中所有商品
  3. 点击第3个按钮给所有的a链接添加href属性
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素</title>

    <style>
        table {
            width: 60%;
            margin: auto;
        }
    </style>
</head>
<body>

<input type="button" value="(通过标签名)给tr的奇数行添加背景色" onclick="f1()"/>
<input type="button" value="(通过name属性)选中所有的商品" onclick="f2()"/>
<input type="button" value="(通过类名)给a添加链接" onclick="f3()"/>
<hr/>
<table border="1px" cellpadding="5px" cellspacing="0px">
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>200</td>
        <td>200</td>
        <td>200</td>
    </tr>
    <tr>
        <td>300</td>
        <td>300</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>400</td>
        <td>400</td>
    </tr>
</table>
<input type="checkbox" name="product"> 自行车
<input type="checkbox" name="product"> 电视机
<input type="checkbox" name="product"> 洗衣机
<hr/>
<a class="company">传智播客</a><br/>
<a class="company">传智播客</a><br/>
<a class="company">传智播客</a><br/>


<script>
    // (通过标签名)给tr的奇数行添加背景色
    function f1() {
        // 多个标签放在集合中
        var eles = document.getElementsByTagName("tr");

        // 遍历集合
        for (var i = 0; i < eles.length; i++) {
            if (i % 2 == 0) { // i =0, 2
                eles[i].style.backgroundColor = "lightgreen";
            } else { // i = 1, 3
                eles[i].style.backgroundColor = "lightyellow";
            }
        }
    }

    // (通过name属性)选中所有的商品
    function f2() {
        var eles = document.getElementsByName("product");
        for (var i = 0; i < eles.length; i++) {
            // 以前标签中选中<input checked="checked"/>
            // js中: eles[i].checked = true;
            eles[i].checked = true;
        }
    }

    // (通过类名)给a添加链接
    function f3() {
        var eles = document.getElementsByClassName("company");
        for (var i = 0; i < eles.length; i++) {
            eles[i].href = "http://ntlias3.boxuegu.com/";
        }
    }
</script>
</body>
</html>

小结

获取元素的方法作用
document.getElementById(“id”)找到指定id的元素，返回一个元素
document.getElementsByTagName (“标签名”)通过标签名找到多个标签
document.getElementsByName(“name”)通过name属性值找到多个标签
document.getElementsByClassName(“类名”)通过class属性值找到多个标签

DOM增删的方法

目标

学习DOM创建节点，添加节点，删除节点

添加元素的步骤
  1. 创建元素，使用方法：document.createElement(“标签名”)
  2. 将元素添加到DOM树上，才会在网页显示出来
创建元素方法名作用
document.createElement(“标签名”)创建一个元素，参数是标签名。如：td
添加和删除元素方法名作用
父元素.appendChild(子元素)将子元素添加父元素上
父元素.removeChild(子元素)通过父元素删除子元素(他杀)
元素.remove()元素删除本身(自杀)
通过关系找节点方法

[外链图片转存失败(img-lCbalAL0-1565620905841)(/)]

小结

  1. 创建元素：document.createElement(“标签名”);
  2. 添加成最后一个子元素：父元素.appendChild(子元素);
  3. 删除子元素：父元素.removeChild(子元素);
  4. 删除本身：元素.remove();

案例：学生信息管理

目标

  1. 当点击“添加”按钮时，文本框中的数据添加到表格中且文本框置空
  2. 当点击“删除”按钮时，该行数据被删除，删除前确认
  3. 当点击表格第一行的复选框的时候，下面每一行都选中。当取消的时候，下面每一行都取消
效果

[外链图片转存失败(img-lhorLLS6-1565620905841)(/)]

步骤
  1. 添加的实现：当点击按钮时，得到文本框中的文本，创建tr节点；将这行的内容使用innerHTML直接设置到tr的内部。
  2. 把tr追加到tbody元素中。
  3. 删除操作：将当前点击按钮所在的一行tr，从tbody中删除。
  4. 上面的复选框值改变，则下面所有复选框的选择状态和上面的一样。
代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <style type="text/css">
        table {
            width: 500px;
            border-collapse: collapse;
        }

        td {
            text-align: center;
        }

        th {
            background-color: lightgrey;
        }
    </style>
    <script type="text/javascript">
        //添加一行
        function addRow() {
            //得到文本框中的值
            //得到学号，姓名
            var no = document.getElementById("no").value;
            var name = document.getElementById("name").value;
            //trim去掉前后的空格
            if (no.trim() == "" || name.trim() == "") {
                alert("学号或姓名不能为空");
                return;
            }
            //创建tr元素
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>" +
                "<input type=\"checkbox\" name=\"item\">" +
                "</td>" +
                "<td>" + no + "</td>" +
                "<td>" + name + "</td>" +
                "<td>" +
                "<input type=\"button\" value=\"删除\" οnclick=\"deleteRow(this)\">" +
                "</td>";
            //把tr做为tbody的子元素挂上去
            var tbody = document.getElementsByTagName("tbody")[0];
            //追加成最后一个子元素
            tbody.appendChild(tr);
            //清空文本框
            document.getElementById("no").value = "";
            document.getElementById("name").value = "";
        }


        //删除一行
        function deleteRow(obj) {
            //obj表示button按钮
            if (confirm("真的删除吗?")) {
                //obj 按钮 -> 父元素td -> 父元素tr -> remove()
                obj.parentNode.parentNode.remove();
            }
        }

        //全选全不选
        function selectAll() {
            //得到最上面的是否选中
            var all = document.getElementById("all");
            //得到所有的复选框
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = all.checked;  //设置checked为true表示选中
            }
        }
    </script>
</head>
<body>
<div>
    <table border="1" cellspacing="0" cellpadding="3">
        <tr>
            <th>
                <input type="checkbox" id="all" onclick="selectAll()">
            </th>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item">
            </td>
            <td>00001</td>
            <td>潘金莲</td>
            <td>
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item">
            </td>
            <td>00002</td>
            <td>鲁智深</td>
            <td>
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
    </table>
    <br/>
    学号：<input type="text" id="sid" value=""/>
    姓名：<input type="text" id="name" value=""/>
    <input type="button" id="addBtn" value="添加" onclick="addRow()"/>
</div>
</body>
</html>

小结

  1. 添加功能的实现，得到输入的内容，创建tr标签，将输入的内容放到tr中，将tr放到tbody中
  2. 删除功能的实现，知道哪个删除按钮被点击，找到这个删除按钮的爸爸的爸爸，自杀
  3. 全选功能的实现，得到标题上的复选框的选中状态，找到下面那些复选框，下面那些复选框的状态和上面那个复选框的状态一致即可
罪恶的拓海
关注
innerHTML和innerText的区别
05-10
js中innerHTML与innerText的用法与区别
动态载入js提高网页打开速度的方法
12-12
一般来说如果一次性的载入所有需要的JavaScript代码，就会造成初始网页打开速度变慢，但是很多载入的代码又并不需要使用，这种无谓的性能浪费应该予以避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档...
JS中的提升
Zpp的前端学习博客
06-25 1139
1. 什么是提升   对于JS引擎，无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。即所有声明（变量和函数）都会被“移动”到各自作用域的最顶端，该过程称为“提升”。   例如，var a = 2; 可以看做是一个声明，但实际上对于JS引擎来说，是两个单独的声明，var a 是编译阶段的任务，a = 2是执行阶段的任务。 a = 2; var a; console.log(a)...
js进阶语法---变量提升，函数提升，以及参数的命名冲突问题
最新发布
I_am_shy的博客
07-28 1047
变量提升：当声明一个变量时，这个声明过程会被预处理机制塞入到预处理块中优先执行，这就是变量提升,使用var定义的变量拥有变量提升函数提升：当声明一个函数时，这个声明过程会被预处理机制塞入到预处理块中优先执行，这就是函数提升，使用function定义的函数拥有函数提升当一个变量和函数在正常的顺序中没有声明但被调用时就可能产生“提升”变量提升---参数传递---函数提升 （声明函数名---变量提升---参数传递---函数体赋值）所以最终这个名称会被函数夺取，这就是函数提升优先级最高的原因。
js提升
ainizzyforever的博客
07-19 249
JS提升 Web APIs和JS基础关联性 API: 功能实现的接口 Web API: 浏览器提高的一套操作浏览器功能和页面元素的API（BOM和DOM） MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API（webapi常用的API接口） DOM 文档对象模型， 处理可扩展标记语言（HTML, XML）的标准编程接口，W3C定义了一系列DOM接口，通过接口可以改变网页内容，结构和样式。 获取对象 ...
回顾JS中的提升机制
热爱前端的大三在校生
09-23 209
对一些计算机语言来说，程序被执行时，对命令的翻译通常是自上而下逐行执行的，这通常被称为对另外一些语言来说，这种翻译是预先进行的，被称为，这样在程序执行的时候，运行的就是计算机指令。JavaScript通常被认为是，因为每次执行js源码时都需要进行处理。但这么说也不是完全准确的，，JavaScript引擎实际上是程序，然后立即执行编译后的代码。而JavaScript中的变量声明和函数提升的直接原因就是编译阶段编译器所做的事。
innerHTML与innerText区别
热门推荐
蜗牛学习笔记
03-08 8万+
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
延时加载JavaScript代码提高速度
01-21
延时加载js代码提高速度，具体内容如下所示： 如果网页中存在大量的javascript代码会极大的影响网页的访问速度，下面就简单介绍一下如何处理此问题。 一.延时加载js文件: 可以使用定时器函数setTimeout()让外部的js...
Atom＆VSCode-现代JavaScript片段，通过支持JavaScript，Babel，TypeScript，JSX和无分号代码，可提高生产率。 使用StandardJS样式。-JavaScript开发
05-26
modern-javascript-snippets Atom...但我以前的Sublime javascript-charlike-snippets，standardjs-snippets和es6-javascript之间也混杂在一起。 它使用标准样式作为基础。 但是可以通过一点自动化轻松地进行更改，因此
gpu.js：GPU加速JavaScript
02-02
GPU.js是一个JavaScript加速库，用于Web和NodeJavaScript中的GPGPU（GPU上的通用计算）。 GPU.js会自动将简单JavaScript函数转换为着色器语言，并对其进行编译，使其在您的GPU上运行。 如果没有GPU，则这些功能仍将...
ace.js实现的编辑器
03-26
ace.js编辑器是一个功能强大的开源代码编辑器，它以JavaScript为基础，并通过浏览器提供丰富的编辑功能。以下是关于ace.js编辑器的详细描述： 首先，ace.js编辑器支持多种编程语言，包括但不限于JavaScript、HTML、...
JavaScript 提升
zsx0728的博客
04-15 378
文章目录变量提升函数提升参考文档     在本教程中，您将通过示例学习 JavaScript。     JavaScript 中的提升是一种在声明之前可以使用函数或变量的行为。例如， // using test before declaring console.log(test); // undefined var test;     上面的程序执行，输出将是 undefined。上述程序等同于： // using test before declaring var test; console.log
js 再提高
JessePinkmen的博客
11-08 309
11.8 js 再提高 循环 数组常用操作方法 工作场景实例 字符串及操作 定时器demo 补充知识点：变量作用域 调bug 封闭函数 1.循环for while 循环目的就是遍历，重复执行 for循环相比较更方便,因为while可能会忘记写增量，工作部署中会导致服务器宕机,下面给出语法规则： while和for与c语言里用法一样 &lt;script&gt; // 设定初始值 var i ...
聊聊js中的提升
tanzhenyan的博客
09-21 868
说明：js中函数声明和变量声明都会被提升很多人直觉上认为， JavaScript 代码在执行时是由上到下一行一行执行的。但实际上并不是这样：1.js变量提升a = 3; var a; console.log( a );//3很多人认为会输出undefined ，因为 var a 声明在 a = 3之后，他们自然而然地认为变量被重新赋值了，因此会被赋予默认值 undefined 。但是，真正的输出结果
js 提升
weixin_30348519的博客
10-27 83
a = 2; console.log(a); var a; /*这里会输出2 如果按从上往下的执行顺序的话应该输出的是undefined,但是js编译器会把声明变量全部提升到顶部来进行变量声明。所以上面代码等同于:*/ var a; a = 2; console.log(a); 从上面例子初步理解了js变量提升后再看下面个例子: console.log(a); ...
JS提升（hoisting）
qq_39756331的博客
11-25 84
近期在学习js，了解到js的一个名词，就是hoisting，进而了解了下js的解析机制 详情可参考：http://www.runoob.com/js/js-hoisting.html js的解析过程分为两个阶段：编译阶段和执行阶段 编译阶段：即我们常说的预处理阶段，javascript解析器把js脚本代码转换为字节码 在这个阶段，解析器所做的事有： 将所有变量和函数进行预处理，hoist...
JS之变量提升代码
weixin_30678821的博客
10-14 85
JS之变量提升代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS之变量提升代码</title> </head> <body> <scr...
JS变量提升
YYJ_LJ的博客
02-10 2362
javascript变量提升详解 js变量提升 对于大多数js开发者来说，变量提升可以说是一个非常常见的问题，但是可能很多人对其不是特别的了解。所以在此，我想来讲一讲。 先从一个简单的例子来入门： a = 2; var a; console.log(a); 你觉得以上的代码会输出什么？是输出undefined吗？如果是按照程序的自上而下执行的话，那么这一段代码确实是输出undefined。然而，javascript并不是严格的自上而下执行的语言。 这一段代码的输出结果是2，是不是感到很意外
js 提高速度 小数位数
09-05
要提高JavaScript的速度，可以采用以下几种方法来控制小数位数： 1. 使用toFixed()方法：toFixed()方法用于将一个数字转换为指定小数位数的字符串。通过指定小数位数，可以将浮点数处理为所需的小数位数，从而减少不必要的小数位数的计算和展示。 2. 使用Math.round()方法：Math.round()方法可以将一个浮点数四舍五入为最接近的整数。通过将浮点数进行四舍五入，可以减少小数位数的计算和展示，从而提高速度。 3. 避免重复计算：如果在多个地方需要使用同样的小数位数的结果，可以将结果保存在一个变量中，避免重复计算。 4. 使用压缩和混淆工具：使用压缩和混淆工具可以减少JavaScript代码的大小，从而提高加载速度。通过将代码压缩和混淆，可以减少不必要的空格、注释和变量名长度，从而提高执行速度。 5. 减少循环和迭代次数：在代码中尽量避免使用过多的循环和迭代，特别是在大数据集上的操作。循环和迭代次数越多，速度越慢。可以尝试使用其他的算法或数据结构来避免不必要的循环和迭代，从而提高速度。 总之，提高JavaScript的速度和控制小数位数是相互关联的。通过合理地选择和使用上述方法，可以在减少不必要的小数位数计算的同时，提高JavaScript的执行速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值