首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

JavaScript基础:javaScript基本语法,javaScript DOM,javaScript事件,javaScript综合案例

时间：2021-02-17 14:39:45   收藏：0   阅读：0

课堂讲义

1.1、JavaScript介绍

1.2、快速入门

  1. 创建一个 HTML

  2. 在标签下面编写一个<script>标签

  3. 在<script>标签中编写代码

  4. 通过浏览器查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS快速入门</title>
</head>
<body>
    <button id="btn">点我呀</button>
</body>
</html>

引入js的方式一：内部方式

引入js的方式一：外部方式

区别：

  1. 开发中，使用外部方式

  2. 在学习阶段，可以使用内部方式（这样可以避免来回切换js和html）

1.3、开发环境搭建

1.4、快速入门总结

2、JavaScript基本语法 ***

2.1、注释

2.2、输入输出语句

2.3、变量和常量

2.4、原始数据类型和typeof方法

2.4.1、原始数据类型

技术图片

 

 

2.4.2、typeof

2.5、运算符

2.6、流程控制和循环语句

2.7、数组

2.8、函数

2.9、小结

3、JavaScript DOM

3.1、DOM介绍

技术图片

 

 

3.2、Element元素的获取操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>

3.3、Element元素的增删改操作

3.4、Attribute属性的操作

3.5、Text文本的操作

3.6、DOM小结

4、JavaScript 事件

4.1、事件介绍

4.2、事件操作

绑定事件

4.3、事件小结

5、JavaScript综合案例 ***

5.1、案例效果介绍

技术图片

 

 

5.2、添加功能的分析

  1. 为添加按钮绑定单击事件。

  2. 创建 tr 元素。

  3. 创建 4 个 td 元素。

  4. 将 td 添加到 tr 中。

  5. 获取文本框输入的信息。

  6. 创建 3 个文本元素。

  7. 将文本元素添加到对应的 td 中。

  8. 创建 a 元素。

  9. 将 a 元素添加到对应的 td 中。

  10. 将 tr 添加到 table 中。

5.3、添加功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");
        //3.创建4个单元格元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4.将td添加到tr中
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //6.根据获取到的信息创建3个文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //7.将3个文本元素添加到td中
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.appendChild(aText);
        //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>

5.4、删除功能的分析

技术图片

 

 

  1. 为每个删除超链接添加单击事件属性。

  2. 定义删除的方法。

  3. 获取 table 元素。

  4. 获取 tr 元素。

  5. 通过 table 删除 tr。

5.5、删除功能的实现

//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
    //3.获取table元素
    let table = obj.parentElement.parentElement.parentElement;
    //4.获取tr元素
    let tr = obj.parentElement.parentElement;
    //5.通过table删除tr
    table.removeChild(tr);
}

 

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！