JavaScript一 Li.066

JavaScript

JS的2种引入方式
- 直接在页面写
- 在页面引入

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

<!--引入js的方式一: 内部方式-->
<script type="text/javascript">
    document.getElementById("btn").onclick = function (){
        alert("点我干嘛")
    }
</script>
<script src="js/my.js"></script>
</body>
</html>

输入输出语句

输入框
- prompt(“提示内容”);
弹出警告框
- alert(“提示内容”);
控制台输出
- console.log(“显示内容”);
页面内容输出
- document.write(“显示内容”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入输出语句</title>
</head>
<body>

<script>
    /*
    * 输入框
    * prompt("提示内容");
    * 弹出警告框
    * alert("提示内容");
    * 控制台输出
    * console.log("显示内容");
    * 页面内容输出
    * document.write("显示内容");
    */
    prompt("请输入数据")

    alert("hello")

    console.log("打印logo")

    document.write("DaDaDa...")
    document.write("<br/>")
    document.write("DaDa")
    document.write("<h1>Hello</h1>")
</script>
</body>
</html>

变量和常量

JavaScrip属于弱类型语言, 定义变量时不区分具体的数据类型
定义局部变量
- let 变量名 = 值
定义全局变量
- 变量名 = 值;
定义常量
- const 常量名= 值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量和常量</title>
</head>
<body>
<script>
  // 1. 定义局部变量

  let name = "张三";
  let age = 23;
  document.write(name+", "+ age)
  document.write("<br/>")

  // 2. 定义全局变量
  {
      let l1 = "aa";
      l2 = "bb";
  }
  // document.writeln(l1)
  document.writeln(l2)
  document.write("<br/>")

  // 3. 定义常量
  const PI = 3.1415926
  // PI = 3.15
  document.write(PI)
</script>
</body>
</html>

原始数据类型

数据类型  说明
boolean   布尔类型,true或false
null      声明null值的声明关键字
undefined 代表变量未定义
number    整数或浮点数
string    字符串
bigint    大整数,例如let num=10n;

typeof用于判断变量的数据类型
- let age=18;
- document.write(typeof(age)); //number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>typeof方法</title>
</head>
<body>
<script>
    let l1 = true
    document.write(typeof (l1))
    document.write("<br/>")

    let l2 = null
    document.write(typeof (l2))
    document.write("<br/>")

    let l3
    document.write(typeof (l3))
    document.write("<br/>")

    let l4 = 10
    document.write(typeof (l4))
    document.write("<br/>")

    let l5 = "hello"
    document.write(typeof (l5))
    document.write("<br/>")

    let l6 = 100n
    document.write(typeof (l6))
    document.write("<br/>")

</script>
</body>
</html>

算数运算符

算术运算符

运算符 说明
+      加法运算
-      减法运算
*      乘法运算
/      除法运算
%      取余数
++     自增
--     自减

赋值运算符

运算符 说明
=      将箱封号右边的值赋值给箱封号左边的变量
+=     想回后赋值
-=     相减后赋值
*=     相乘后赋值
/=     相除后赋值
%=     取余数后赋值

比较运算符

运算符 说明
== 判断值是否相等
=== 判断数据类型和值是否相等
> 大于
>= 大于等于
< 小于
<= 小于等于
!= 不等于

逻辑运算符

运算符 说明
&&     逻辑与,并且
||     逻辑或,或者
!      取反

三元运算符
- 三元运算符格式
  - (比较表达式)?表达式1:表达式2;
- 执行流程
  - 如果比较表达为true, 则取表达式1
  - 如果比较表达为false, 则取表达式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<script>
    let num = "10"
    // 和字符之间的+号, 拼接, 其他符号则把字符转成number运算
    document.write(num + 5)
    document.write("<br/>")
    document.write(num + "5")
    document.write("<br/>")
    document.write(num - 5)
    document.write("<br/>")
    document.write(num * 5)
    document.write("<br/>")

    let num2 = 10
    document.write(num == num2)
    document.write("<br/>")
    document.write(num === num2)
    document.write("<br/>")

</script>
</body>
</html>

JavaScrip的流程控制和循环语句

if
switch
for
while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制和循环语句</title>
</head>
<body>
<script>
    // if 语句
    let month = 10
    if(month >= 3 && month <= 5){
        document.write("春季")
    } else if( month >= 6 && month <= 6){
        document.write("夏季")
    } else if( month >= 9 && month <= 11) {
        document.write("秋季")
    } else if( month == 12 || month == 1 || month == 2) {
        document.write("冬季")
    } else  {
        document.write("月份有误")
    }

    document.write("<br/>")

    // switch 语句
    switch (month){
        case 3:
        case 4:
        case 5:
            document.write("春季")
            break
        case 6:
        case 7:
        case 8:
            document.write("夏季")
            break
        case 9:
        case 10:
        case 11:
            document.write("秋季")
            break
        case 12:
        case 1:
        case 2:
            document.write("冬季")
            break
        default:
            document.write("月份有误")
    }

    document.write("<br/>")

    // for
    for(let i=1;i<=5;i++){
        document.write(i+"<br/>")
    }

    // while
    let n =6
    while (n <= 10){
        document.write(n+"<br/>")
        n++
    }
</script>
</body>
</html>

数组

数组的使用Java中的数据基本一致, 但是在JavaScript中的数据更加灵活, 数据类型和长度都没有限制
定义格式
- let 数组名 = [元素1,元素2,…];
索引范围
- 从0开始, 最大到数组长度-1
数组长度
- 数组名.length
数组高级运算符…
- 数组复制
- 合并数组
- 字符串转数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script type="text/javascript">
    // 定义数组
    let arr = [10,20,30]

    for(let i=0; i < arr.length; i++){
        document.write(arr[i])
        document.write("<br/>")
    }
    document.write("=======================<br/>")


    arr[3] = 40
    for(let i=0; i < arr.length; i++){
        document.write(arr[i])
        document.write("<br/>")
    }
    document.write("=======================<br/>")

    // 数组高级运算符: ...
    // 复制数组
    let arr2 = [...arr]

    for(let i=0; i < arr2.length; i++){
        document.write(arr2[i])
        document.write("<br/>")
    }
    document.write("=======================<br/>")

    // 合并数据
    let arr3 = [40,50,60];
    let arr4 = [...arr2,...arr3]
    for(let i=0; i < arr4.length; i++){
        document.write(arr4[i])
        document.write("<br/>")
    }

    for(var i of arr4){
        document.write(i)
        document.write("<br/>")
    }

    document.write("=======================<br/>")
    // 字符串转成数组
    let arr5 = [..."heima"]
    for(var i of arr5){
        document.write(i)
        document.write("<br/>")
    }

</script>
</body>
</html>

函数

函数类似于java中的方法, 可以将一些代码进行抽取, 达到复用的效果
定义格式
- function 方法名(参数列表){方法体 return 返回值}
- 有返回值, 可以写
- 无返回值, 则不需要写
可变参数
- function 方法名(…参数名){ 方法体; return 返回值 }
匿名函数
- function(参数列表){ 方法体; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
<script >
    // 无参无返回值的函数
    function println(){
        document.write("Hello JS"+"<br/>")
    }
    println()

    // 有参 有返回值方法
    function getSum(num1,num2){
        return num1 + num2;
    }
    let sum = getSum(10,20);
    document.write(sum+"<br/>")

    // 可变参数, 对n个数字进行求和
    function getSum(...params){
        let ss = 0
        for(let i=0; i <params.length; i++){
            ss+=params[i]
        }
        return ss;
    }
    let sum2 = getSum(10,20, 20)
    document.write(sum2)


    // 匿名函数
    let fun = function(){
        document.write("hello")
    }
    fun()
</script>

</body>
</html>

DOM

DOM(Document Object Model):文档对象模型
将HTML文档的各个组成部分, 封装为对象. 借助这些对象可以对HTML文档进行增删改查的动态操作
Document: 文档对象
- Element: 元素对象
  - Attribute: 属性对象
    - Text: 文本对象

方法名                              说明
getElementById(id属性值)            根据id获得一个元素
getElementsByTagName(标签名称)      根据标签名称获得多个元素
getElementsByName(name属性值)       根据name属性获得多个元素
getElementsByClassName(class属性值) 根据class属性获得多个元素
子元素对象.parentElement属性        获取当前元素的父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的操作</title>
    <style>
        .cls{
            border: 1px solid red;
        }
    </style>
</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"/>

<script>
    // 1. getElementById(id属性值)            根据id获得一个元素
    var div1 = document.getElementById("div1");
    // alert(div1)
    console.log(div1.innerHTML)

    // 2. getElementsByTagName(标签名称)      根据标签名称获得多个元素
    var divs = document.getElementsByTagName("div");
    // alert(divs.length)
    for(var i of divs){
        console.log(i.innerHTML)
    }

    // 3. getElementsByName(name属性值)       根据name属性获得多个元素
    var nameEs = document.getElementsByName("username");
    alert(nameEs.length)
    for(let e of nameEs){
        console.log(e.getAttribute("type"))
    }

    // 4. getElementsByClassName(class属性值) 根据class属性获得多个元素
    var clsE = document.getElementsByClassName("cls");
    // alert(clsE.length)
    for(let e of clsE){
        console.log(e.innerHTML)
    }

    // 5. 子元素对象.parentElement属性        获取当前元素的父元素
    var parentElement = div1.parentElement;
    console.log(parentElement.tagName)

</script>
</body>
</html>

Element 元素的操作

方法名                      说明
createElement(标签名)       创建一个新元素
appendChild(子元素)         将指定子元素添加到父元素中
removeChild(子元素)         父元素删除指定子元素
replaceChild(新元素,旧元素) 用新元素替换子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的操作</title>
</head>
<body>
<select id="s">
    <option>---请选择---</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>

<script>
    // 1. createElement() 创建元素
    var sz = document.createElement("option");
    // 为option添加文本内容
    sz.innerHTML = "深圳"

    // 2. appendChild(子元素)         将指定子元素添加到父元素中
    var select = document.getElementById("s");
    select.appendChild(sz)

    // 3. removeChild(子元素)         父元素删除指定子元素
    // select.removeChild(sz)

    // 4. replaceChild(新元素,旧元素) 用新元素替换子元素
    var hz = document.createElement("option");
    hz.innerHTML = "杭州"
    select.replaceChild(cq,sz)

</script>
</body>
</html>

Attribute 属性的操作

方法名                      说明
setAtrribute(属性名,属性值) 设置属性
getAtrribute(属性名)        根据属性名获取属性值
removeAtrribute             根据属性名先锋队指定的属性
style属性                   为元素添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性的操作</title>
  <style>
    .acolor{
      color: #1c1ccb;
    }
  </style>
</head>
<body>
<a>点我呀</a>
<script>
    // 1. setAtrribute(属性名,属性值) 设置属性
    var a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://baidu.com")

    // 2. getAtrribute(属性名)        根据属性名获取属性值
    var value = a.getAttribute("href");
    // alert(value)

    // 3. removeAtrribute             根据属性名先锋队指定的属性
    a.removeAttribute("href")

    // 4. style属性                   为元素添加样式
    // a.style.color = "red"

    // 5. className 属性 添加指定样式
    a.className = "acolor"

</script>
</body>
</html>

Text 文本的操作

属性名    说明
innerText 添加文本内容,不解析标签
innerHTML 添加文本内容,解析标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本的操作</title>
</head>
<body>

<div id="div"></div>
<script>
    // 1. innerText 添加文本内容, 不解析标签
    var div = document.getElementById("div");
    div.innerText = "<h1>这是div</h1>"

    // 2. innerHTML 添加文本内容, 解析标签
    div.innerHTML = "<h1>这也是DIV</h1>"
</script>
</body>
</html>

事件

事件指的就是当某些组件执行了某些操作后, 会触发某些代码的执行

事件名     说明
onload     某个页面或图像被完成加载
onsubmit   当表单提交时触发该事件
onclick    鼠标赣南事件
ondblclick 鼠标双击事件
onblur     元素失去售点
onfocus    元素获得售点
onchange   用户改变域的内容

了解的事件

事件名      说明
onkeydown   某个键盘的键被按下
onkeypress  某个键盘的键被按下或按住
onkeyup     某个键盘的键被松开
onmousedown 某个鼠标按钮被按下
onmouseup   某个鼠标按钮被李嘉琪
onmouseover 鼠标被移到某元素之上
onmouseout  鼠标从某元素移开

绑定事件

方式一
- 通过标签中的事件属性进行绑定
- button id=“btn” onclick=“执行的功能”>
方式二
- 通过DOM元素属性绑定
- document.getElementById(“btn”).onclick=执行的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<div align="center">
<img id="img" width="80%" height="800px" src="img/p1.jpg" />
<br/>
<button id="up" onclick="up()">上一张</button>
<button id="down">下一张</button>
</div>

<script>

    // var btnup = document.getElementById("up");

    var btndown = document.getElementById("down");

    function up(){
        let img = document.getElementById("img")
        img.setAttribute("src","img/p1.jpg")
    }

    function down(){
        let img = document.getElementById("img")
        img.setAttribute("src","img/p2.jpg")
    }

    btndown.onclick = down()

</script>
</body>
</html>

综合案例

appendChild
append支持添加多个Child了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
    <style>

        a{
            color: blue;
        }
        table,table tr th, table tr td {
            border:1px solid black;
        }
    </style>
</head>
<body>
<div align="center">
    <div id="divinput" >
        <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" id="add" value="添加" onclick="add()" >
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div >
        <a style="color: black;">学生信息表</a>
        <table style="width: 300px; border: 1px solid black" >
            <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody" >
            <tr>
                <td>张三</td>
                <td>23</td>
                <td>男</td>
                <td><a href="JavaScript:void(0);" onclick="deleteTr(this)">删除</a></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>女</td>
                <td><a href="JavaScript:void(0);"  onclick="deleteTr(this)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>

    function deleteTr(obj){
        let tbody = obj.parentElement.parentElement.parentElement
        let tr = obj.parentElement.parentElement;
        tbody.removeChild(tr)
    }
    function add(){
        let tr = document.createElement("tr");

        let tdName = document.createElement("td");
        let tdAge = document.createElement("td");
        let tdGender = document.createElement("td");
        let tdDel = document.createElement("td");

        tr.appendChild(tdName)
        tr.appendChild(tdAge)
        tr.appendChild(tdGender)
        tr.appendChild(tdDel)

        let nameText = document.getElementById("name").value
        let ageText = document.getElementById("age").value
        let genderText = document.getElementById("gender").value

        tdName.innerText = nameText
        tdAge.innerText = ageText
        tdGender.innerText = genderText

        let a = document.createElement("a")
        let aText = document.createTextNode("删除")
        a.setAttribute("href","JavaScript:void (0);")
        a.setAttribute("onclick", "deleteTr(this)")
        a.appendChild(aText)
        tdDel.appendChild(a)

        let tbody = document.getElementById("tbody");

        tbody.appendChild(tr);

        // append 支持多参数了

        // let name = document.getElementById("name");
        // let age = document.getElementById("age");
        // let gender = document.getElementById("gender");
        //
        // let tr = document.createElement("tr");
        // let tdname = document.createElement("td");
        // tdname.innerText = name.value
        // let tdage = document.createElement("td");
        // tdage.innerText = age.value
        // let tdgender = document.createElement("td");
        // tdgender.innerText = gender.value
        //
        // let tddel = document.createElement("td");
        // tddel.innerHTML = "<a href=\"JavaScript:void(0);\" onclick=\"deleteTr()\">删除</a>"
        //
        // tr.append(tdname,tdage,tdgender,tddel);
        //
        // let tbody = document.getElementById("tbody");
        //
        // tbody.append(tr);
    }

</script>

</body>
</html>

JavaScript#

输入输出语句#

变量和常量#

原始数据类型#

算数运算符#

JavaScrip的 流程控制和循环语句#

数组#

函数#

DOM#

Element 元素的操作#

Attribute 属性的操作#

Text 文本的操作#

事件#

绑定事件#

综合案例#

JavaScript

输入输出语句

变量和常量

原始数据类型

算数运算符

JavaScrip的流程控制和循环语句

数组

函数

DOM

Element 元素的操作

Attribute 属性的操作

Text 文本的操作

事件

绑定事件

综合案例