JS提高

最新推荐文章于 2024-09-22 16:30:49 发布
最新推荐文章于 2024-09-22 16:30:49 发布
阅读量390 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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 1167
1. 什么是提升   对于JS引擎，无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。即所有声明（变量和函数）都会被“移动”到各自作用域的最顶端，该过程称为“提升”。   例如，var a = 2; 可以看做是一个声明，但实际上对于JS引擎来说，是两个单独的声明，var a 是编译阶段的任务，a = 2是执行阶段的任务。 a = 2; var a; console.log(a)...
js进阶——什么是提升
最新发布
2301_79858914的博客
09-22 637
JavaScript 中的提升（Hoisting）是一个重要的概念，它指的是 JavaScript 引擎在代码执行之前，会将变量和函数的声明提升到它们所在作用域的顶部。这意味着，即使变量或函数在代码中后面声明，它们的引用可以在声明之前进行。不过，不同类型的声明（如varletconst和函数声明）在提升中的行为有所不同。
js提升
ainizzyforever的博客
07-19 259
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 229
对一些计算机语言来说，程序被执行时，对命令的翻译通常是自上而下逐行执行的，这通常被称为对另外一些语言来说，这种翻译是预先进行的，被称为，这样在程序执行的时候，运行的就是计算机指令。JavaScript通常被认为是，因为每次执行js源码时都需要进行处理。但这么说也不是完全准确的，，JavaScript引擎实际上是程序，然后立即执行编译后的代码。而JavaScript中的变量声明和函数提升的直接原因就是编译阶段编译器所做的事。
innerHTML与innerText区别
热门推荐
蜗牛学习笔记
03-08 8万+
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
Atom＆VSCode-现代JavaScript片段，通过支持JavaScript，Babel，TypeScript，JSX和无分号代码，可提高生产率。 使用StandardJS样式。-JavaScript开发
05-26
modern-javascript-snippets Atom...但我以前的Sublime javascript-charlike-snippets，standardjs-snippets和es6-javascript之间也混杂在一起。 它使用标准样式作为基础。 但是可以通过一点自动化轻松地进行更改，因此
延时加载JavaScript代码提高速度
01-21
延时加载js代码提高速度，具体内容如下所示： 如果网页中存在大量的javascript代码会极大的影响网页的访问速度，下面就简单介绍一下如何处理此问题。 一.延时加载js文件: 可以使用定时器函数setTimeout()让外部的js...
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 403
文章目录变量提升函数提升参考文档     在本教程中，您将通过示例学习 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 321
11.8 js 再提高 循环 数组常用操作方法 工作场景实例 字符串及操作 定时器demo 补充知识点：变量作用域 调bug 封闭函数 1.循环for while 循环目的就是遍历，重复执行 for循环相比较更方便,因为while可能会忘记写增量，工作部署中会导致服务器宕机,下面给出语法规则： while和for与c语言里用法一样 &lt;script&gt; // 设定初始值 var i ...
聊聊js中的提升
tanzhenyan的博客
09-21 884
说明：js中函数声明和变量声明都会被提升很多人直觉上认为， JavaScript 代码在执行时是由上到下一行一行执行的。但实际上并不是这样：1.js变量提升a = 3; var a; console.log( a );//3很多人认为会输出undefined ，因为 var a 声明在 a = 3之后，他们自然而然地认为变量被重新赋值了，因此会被赋予默认值 undefined 。但是，真正的输出结果
js 提升
weixin_30348519的博客
10-27 96
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 95
近期在学习js，了解到js的一个名词，就是hoisting，进而了解了下js的解析机制 详情可参考：http://www.runoob.com/js/js-hoisting.html js的解析过程分为两个阶段：编译阶段和执行阶段 编译阶段：即我们常说的预处理阶段，javascript解析器把js脚本代码转换为字节码 在这个阶段，解析器所做的事有： 将所有变量和函数进行预处理，hoist...
JS之变量提升代码
weixin_30678821的博客
10-14 95
JS之变量提升代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS之变量提升代码</title> </head> <body> <scr...
JS变量提升
YYJ_LJ的博客
02-10 2376
javascript变量提升详解 js变量提升 对于大多数js开发者来说，变量提升可以说是一个非常常见的问题，但是可能很多人对其不是特别的了解。所以在此，我想来讲一讲。 先从一个简单的例子来入门： a = 2; var a; console.log(a); 你觉得以上的代码会输出什么？是输出undefined吗？如果是按照程序的自上而下执行的话，那么这一段代码确实是输出undefined。然而，javascript并不是严格的自上而下执行的语言。 这一段代码的输出结果是2，是不是感到很意外
提高前端性能的JavaScript静态资源压缩技术
资源摘要信息:"前端开发js静态资源压缩文件" 知识点一：前端开发 前端开发是指创建用户在互联网上直接接触到的界面和交互部分。它主要包括网页设计，网页制作，前端优化和前端架构。前端开发主要使用的技术包括HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值