0
点赞
收藏
分享

微信扫一扫

JavaWeb—JavaScript

北溟有渔夫 2022-04-15 阅读 57
javascript

一、JavaScript

1. JS介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

  • 特点：
  1. JS是弱类型，Java是强类型
  2. 交互性：可以完成信息的动态交互
  3. 安全性：不允许直接访问本地硬盘
  4. 跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关

2. JS和HTML的结合

2.1 方式一

在html标签中，或者在body标签中，使用script标签来书写JS代码

  • 知识点：
  1. alert()函数是js中提供的警告框函数，在打开页面时，自动弹出，函数中的内容即为警告框中的内容
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello javascript</title>
    <script type="text/javascript">
        /*
         * alert()是js中的一个警告框函数，在打开页面时自动弹出
         *  函数中的内容即为警告框中的内容
        */
        alert("hello javascript");
    </script>
</head>
<body>

</body>
</html>

2.2 方式二

在script标签中，引入单独的.js代码文件

  • 知识点：
  1. 使用script标签的 src 属性，引入js代码文件
  2. 一个script标签，只能使用一种方式引入js代码文件；若同时使用两种方式，总是执行js文件中的代码
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js与html结合的第二种方式</title>
<!--    通过script标签的src属性引入.js文件路径-->
    <script type="text/javascript" src="1(hello2).js"></script>
</head>
<body>

</body>
</html>
  • .js文件：
alert("hello javascript")

3. 变量

  • JavaScript的变量类型：
  1. 数值类型：number
  2. 字符串类型：string
  3. 对象类型：object
  4. 布尔类型：boolean
  5. 函数类型：function
  6. 未定义：undefined，所有 js 变量未赋初始值的时候，默认值都是undefined
  7. 空：Null
  8. 非数值：NAN

  • JavaScript中定义变量的格式：
  1. var 变量名;
  2. var 变量名 = 变量值;

  • 知识点：
  1. typeof()是js提供的函数，用于取变量的数据类型返回
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javascript">
        var i;
        alert(typeof (i));

        var i = 123;
        alert(typeof (i));

        var a = 123;
        var b = "abc";
        alert( a * b );
    </script>
</head>
<body>

</body>
</html>

4. 比较运算

  • 特殊：
  1. 等于：==
  2. 全等于：===，不仅字面数值，而且比较数据类型
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-比较运算</title>
    <script type="text/javascript">
        var a = "123"
        var b = 123
        alert(a == b)

        a = "123"
        b = 123
        alert(a === b)
    </script>
</head>
<body>

</body>
</html>

5. 逻辑运算

  • 注意：

1.在js中，所有的变量，都可以作为一个boolean类型的变量使用，其中 0、null、undefined、""空串为false

  • && 且运算的两种情况：

1.当表达式全为真时，返回最后一个表达式的值

2.当表达式有一个为假时，返回第一个为假的表达式的值

  • || 或运算的两种情况：

1.当表达式全为假时，返回最后一个表达式的值

2.只要表达式有一个为真，就返回第一个为真的表达式的值

  • &&运算 和 ||运算，当运算有结果时，后面的表达式不再执行
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-逻辑运算符</title>
    <script type="text/javascript">
        var a = 123
        var b = true
        var c = 0
        var d = null
        

        if (a&&c) {
            alert("true")
        } else {
            alert("false")
        }
    </script>
</head>
<body>

</body>
</html>

6. 数组

  • js中数组定义的格式：

1.var 数组名 = [] // 空数组

2.var 数组名 = [1, 'abc', true] // 定义数组同时赋值元素

  • 知识点：

1.数组名.length，表示数组的长度

  • 注意：

1.js中的数组，只要我们通过数组下标进行赋值，那么最大的下标，就会自动的给数组做扩容操作

  •  相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-数组</title>
    <script type="text/javascript">
        var array = []
        array[0] = 1
        array[2] = true
        for (var i = 0; i < array.length; i++) {
            alert( array[i] )
        }
    </script>
</head>
<body>

</body>
</html>

7. 函数

7.1 函数的定义

  • 方式一：使用function关键字进行定义

                格式：

                                function 函数名(形参列表) {

                                        函数体

                                }

有返回值的函数：在函数体内直接使用return语句返回值即可

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-函数的定义1</title>
    <script type="text/javascript">
        function f1() {
            alert("无参函数")
        }
        f1()

        function f2(a, b) {
            alert("a=" + a + "\nb=" + b)
        }
        f2(1, 2)

        function f3(a, b) {
            var result = a + b
            return result
        }
        alert(f3(1,2))
    </script>
</head>
<body>

</body>
</html>

  • 方式二

                格式：

                                var 函数名 = function(形成列表) {函数体}

相关代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-函数的定义2</title>
    <script type="text/javascript">
        var f1 = function () {
            alert("无参函数")
        }
        f1()
        var f2 = function (a, b) {
            alert("a = " + a + "\nb = " + b)
        }
        f2(1, 2)
        var f3 = function (a, b) {
            return (a+b)
        }
        alert(f3(1, 2))
    </script>
</head>
<body>

</body>
</html>
  • 注意：

1.函数调用 === 执行

2.在js中，函数不允许重载，重载的话会直接覆盖上一次定义的函数

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-函数不允许重载</title>
    <script type="text/javascript">
        function f() {
            alert("无参函数")
        }
        function f(a, b) {
            alert("无参函数被覆盖")
        }
        f()
    </script>
</head>
<body>

</body>
</html>

7.2 函数的arguments 隐形参数（只在function函数内）

在function函数中，不需要定义，但可以直接用来获取所有参数的变量，我们管它叫隐形参数

类型于java中的可变长参数：public void fun(Object ... args)。可变长参数其实是一个数组

那么js中的隐形参数也和java的可变长参数一样，操作类型数组

  • 需求：编写一个函数，用于计算所有函数相加的和并返回
  • 相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-隐形参数arguments</title>
    <script type="text/javascript">
        function f() {
            alert(arguments)
            for (var i=0; i<arguments.length; i++) {
                alert(arguments[i])
            }
        }
        f(1,"true",null)

        function sun() {
            var result = 0
            alert(arguments.length)
            for (var i=0; i<arguments.length; i++) {
                if (typeof (arguments[i]) == "number") // 隐形参数为数值类型时，才相加
                result += arguments[i]
            }
            return result
        }
        alert(sun(1,2,3))
    </script>
</head>
<body>

</body>
</html>

8. JS中自定义对象

  • 方式一：Object形式的自定义对象

对象的定义：

  1. var 对象名 = new Object();        // 对象实例（空对象）
  2. 对象名.属性名 = 值;        // 定义对象的一个属性
  3. 对象名.函数名 = function(){};        // 定义对象的一个函数

对象的访问：

  1. 对象名.属性名/函数名()

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-Object形式定义对象</title>
    <script type="text/javascript">
        var obj = new Object()
        obj.name = "bobo"
        obj.age = 18
        obj.fun = function () {
            alert("姓名：" + obj.name + "\n年龄：" + this.age)
        }
        obj.fun()
    </script>
</head>
<body>

</body>
</html>

  • 方式二：大括号形式定义对象

对象的定义：

                        var 对象名 = {                   // 空对象

                                        属性名1: 值,

                                        属性名2: 值

                                        函数名: function(){}

                        };     

对象的调用：

  1. 对象名.属性名/函数名()

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-大括号形式定义对象</title>
    <script type="text/javascript">
        var obj = {
            name : "bobo",
            age : 18,
            fun : function () {
                alert("姓名：" + obj.name + "\n年龄：" + this.age)
            }
        }
        obj.fun()
    </script>
</head>
<body>

</body>
</html>

9. JS中的事件

事件是指电脑的输入设备与页面进行交互的响应

9.1 常用的事件：

onload：页面加载完成后，常用于作页面js代码初始化操作

onclick：常用于按钮的点击响应操作

onblur：常用于输入框失去焦点后，验证输入内容是否合法

onchange：常用于下拉列表和输入框内容发送改变后的操作

onsubmit：常用于表单提交前，验证所有表单项是否合法操作

9.2 事件的注册

事件的注册分为静态注册和动态注册两种，事件的注册其实就是告诉浏览器，当事件响应后要执行操作哪些代码：

  1. 静态注册：通过html标签的事件属性，直接赋予响应后代码，这种方式为静态注册
  2. 动态注册：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){} 这种形式赋予事件响应后的代码，叫动态注册

动态注册基本步骤：

  1. 获取标签对象
  2. 标签对象.事件名=function(){}

9.3 onload加载完成事件

  • onload事件：浏览器解析完页面后，自动触发的事件

1.onload的静态注册，通过html的body标签进行注册

2.onload的动态注册，固定写法：windom.onload = function(){}

3.相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-onload事件</title>
    <script type="text/javascript">
        var onloadFun = function () {
            alert("静态注册onload事件的所有代码")
        }

        // 动态注册onload事件
        window.onload = function () {
            alert("动态注册onload事件的所有代码")
        }
    </script>
</head>
<!--静态注册onload事件-->
<body onload="onloadFun()">

</body>
</html>

9.4 onclick单击事件

  • onclick事件：点击按钮后的响应

1.onclick的静态注册，通过html中的button标签进行注册

2.onclick的动态注册，固定写法：windom.onload = function(){}，函数体的步骤：

       i.获取标签对象：document.getElementById("") // document是js提供的一个对象，表示整个页面所有的内容

       ii.通过标签对象.事件名 = function(){}

3.相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-onclick事件</title>
    <script type="text/javascript">
        function onclick1() {
            alert("我是按钮1")
        }
        function onclick2() {
            alert("我是按钮2")
        }

        // 动态注册onclick事件
        window.onload = function () {
            var event1 = document.getElementById("btn1")
            event1.onclick = function () {
                alert("我是按钮1")
            }

        }

    </script>
</head>
<body>
    <button  id="btn1">按钮1</button>
    <!--    静态注册onclick事件-->
    <button onclick="alert('我是按钮2')" id="btn2">按钮2</button>
</body>
</html>

9.5 onblur失去焦点事件

  • onblur事件：输入框失去焦点后，验证输入内容是否合法

1.onblur的静态注册，通过html中的input标签进行注册

2.onblur的动态注册，固定写法：windom.onload = function(){}，函数体的步骤：

       i.获取标签对象：document.getElementById("") // document是js提供的一个对象，表示整个页面所有的内容

       ii.通过标签对象.事件名 = function(){}

3.相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-onblur事件</title>
    <script type="text/javascript">
        var onblurFun1 = function () {
            console.log("静态注册onblur事件")
        }

        // 动态注册onblur事件
        window.onload = function () {
            var event1 = document.getElementById("id1")
            event1.onblur = function () {
                console.log("动态注册onblur事件")
            }
        }
    </script>
</head>
<body>
<!--    静态注册onblur事件-->
    输入框1：<input type="text" placeholder="用户名" onblur="onblurFun1()"><br>
    输入框2：<input type="text" placeholder="密码" id="id1"><br>
</body>
</html>

9.6 onchange内容发生改变事件

  • onchange事件：常用于下拉列表和输入框内容发送改变后的操作

1.onchange事件的静态注册，通过html中的input标签或是select标签进行注册

2.onchange事件的动态注册，固定写法：windom.onload = function(){}，函数体的步骤：

       i.获取标签对象：document.getElementById("") // document是js提供的一个对象，表示整个页面所有的内容

       ii.通过标签对象.事件名 = function(){}

3.相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-onchange事件</title>
    <script type="text/javascript">
        var onchangeFun = function () {
            alert("静态注册onchange事件")
        }

        // 动态注册onchange事件
        window.onload = function () {
            var onchangeevent = document.getElementById("id1")
            onchangeevent.onchange = function () {
                alert("动态注册onchange事件")
            }
        }
    </script>
</head>
<body>
<!--    静态注册onchange事件-->
    国家：
    <select onchange=onchangeFun()>
        <option>中国</option>
        <option>美国</option>
        <option>俄罗斯</option>
    </select><br>
    性别：
    <select id="id1">
        <option>男</option>
        <option>女</option>
    </select>
</body>
</html>

         

9.7 onsubmit表单提交事件

  • onsubmit事件：表单提交前，验证所有表单项是否合法操作

1.onsubmit事件的静态注册，通过html中的form标签进行注册

2.onsubmit事件的动态注册，固定写法：windom.onload = function(){}，函数体的步骤：

       i.获取标签对象：document.getElementById("") // document是js提供的一个对象，表示整个页面所有的内容

       ii.通过标签对象.事件名 = function(){}

3.知识点：return false可以当表单项有不合法时，阻止表单提交的功能

4.相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-onsubmit事件</title>
    <script type="text/javascript">
        var onsubmitFun = function () {
            alert("静态注册onsubmit事件")
            alert("发现表单不合法")
            return false
        }

        // 动态注册submit事件
        window.onload = function () {
            var onsubmitEvent1 = document.getElementById("id1")
            onsubmitEvent1.onsubmit = function () {
                alert("动态注册onsubmit事件")
                alert("发现表单不合法")
                return false
            }
        }
    </script>
</head>
<body>
<!--静态注册submit事件-->
<!--return false可以当表单项有不合法时，阻止表单提交的功能-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册submit">
    </form><br>

    <form id="id1" action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="动态注册submit">
    </form>
</body>
</html>

10. DOM模型

DOM全称是Document Object Model文档对象模型，实现把文档中的标签、属性、文本转换成为对象来管理

10.1 Document对象

  • Document对象的理解：

        1. Document管理了html文档的所有内容

        2. Document是一种树结构文档，有层级关系

        3. Document让我们把所有的标签都对象化

        4. 可以通过document访问所有的对象

  • Document对象化：

10.2 Document对象中的方法介绍

  • document.getElementById(elementId)：返回对拥有指定id属性的第一个对象引用

需求：当用户点击验证按钮，要获取输入框的内容。然后验证其是否合法。

           验证的规则是：输入内容必须包含字母或者数字或者下划线，长度为5到12位

知识点：

             1.当要操作一个标签时，一定要先获取这个标签对象

             2.如何验证输入内容，是否符合规则，需要用到正则表达式

             3.test()方法用于测试某个字符串，是不是匹配我的规则，匹配返回true，不匹配返回false

相关代码：

1.警告框提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-getElementById</title>
    <script type="text/javascript">
        function onclickFun() {
            // 获取标签对象
            var usernameObj = document.getElementById("username");
            // alert(usernameObj.value)
            var usernameText = usernameObj.value

            // 正则表达式，规定规则
            var patt = /^\w{5,12}$/

            // 验证是否符合规则
            if (patt.test(usernameText)) {
                alert("用户创建成功")
            } else {
                alert("用户名不符合规则")
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="">
    <button onclick="onclickFun()">验证</button>
</body>
</html>

2.输入框后文字提示：通过innerHTML，在判断时给span标签添加对应的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-getElementById2</title>
    <script type="text/javascript">
        function onclickFun() {
            // 获取标签对象
            var usernameObj = document.getElementById("username");
            // alert(usernameObj.value)
            var usernameText = usernameObj.value

            // 正则表达式，规定规则
            var patt = /^\w{5,12}$/

            // 获取span标签对象
            var usernameHintObj = document.getElementById("usernameHint");

            // 验证是否符合规则
            if (patt.test(usernameText)) {
                // 通过innerHTML给审判标签赋值
                usernameHintObj.innerHTML = "正确"
            } else {
                usernameHintObj.innerHTML = "错误"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="">
    <button onclick="onclickFun()">验证</button>
    <span id="usernameHint" style="color: red; font-size: 6px"></span>
</body>
</html>

3.输入框失去焦点后自动图片提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-getElementById3.html</title>
    <script type="text/javascript">
        function onblurFun() {
            // 获取标签对象
            var usernameObj = document.getElementById("username");
            // alert(usernameObj.value)
            var usernameText = usernameObj.value

            // 正则表达式，规定规则
            var patt = /^\w{5,12}$/

            // 获取span标签对象
            var usernameHintObj = document.getElementById("usernameHint");

            // 验证是否符合规则
            if (patt.test(usernameText)) {
                // 通过innerHTML给审判标签赋值
                usernameHintObj.innerHTML = "<img src=\"../img/right.png\" width=\"20px\" height=\"20px\" id=\"usernameHint\">"
            } else {
                usernameHintObj.innerHTML = "<img src=\"../img/wrong.png\" width=\"20px\" height=\"20px\" id=\"usernameHint\">"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="" onblur="onblurFun()">
    <span id="usernameHint"></span>
</body>
</html>

  • document.getElementsByName(elementName)：返回带有指定name属性的对象集合

需求：定义一个有三个值的复选框，并定义全选、全不选、反选三个按钮。

要求：点击全选，三个全部选中(checked=true)；点击全不选，三个全不选中(checked=false)；点击反选，选中的变为不选中，不选中的变为选中

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-getElementsByName</title>
    <script type="text/javascript">
        function checkAll() {
// getElementsByName返回的是一个特定name值的对象集合，这个集合的操作和数组一样
            var checkAllObj = document.getElementsByName("hobby");
            for (var i=0; i<checkAllObj.length; i++) {
                checkAllObj[i].checked = true
            }
        }

        function checkNull() {
            var checkNullObj = document.getElementsByName("hobby");
            for (var i=0; i<checkNullObj.length; i++) {
                checkNullObj[i].checked = false
            }
        }

        function checkInvert() {
            var checkInvertObj = document.getElementsByName("hobby");
            for (var i=0; i<checkInvertObj.length; i++) {
                if (checkInvertObj[i].checked) {
                    checkInvertObj[i].checked = false
                } else {
                    checkInvertObj[i].checked = true
                }
            }
        }
    </script>
</head>
<body>
    爱好：
    <input type="checkbox" name="hobby" value="Java">Java
    <input type="checkbox" name="hobby" value="C">C
    <input type="checkbox" name="hobby" value="Python">Python
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNull()">全不选</button>
    <button onclick="checkInvert()">反选</button>
</body>
</html>

  • document.getElementsByTagName(elementTagName)：返回带有指定标签名的对象集合

需求：通过标签名获取input对象，实现复选框的点击按钮全选的功能

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-getElementByTagName</title>
    <script type="text/javascript">
        function onclickFun() {
            // 通过标签名获取复选框对象
            var getAllObj = document.getElementsByTagName("input");
            for (var i=0; i<getAllObj.length; i++) {
                getAllObj[i].checked = true
            }
        }
    </script>
</head>
<body>
    语言：
    <input type="checkbox" value="Java">Java
    <input type="checkbox" value="C">C
    <input type="checkbox" value="Python">Python
    <button onclick="onclickFun()">全选</button>
</body>
</html>

  • document.createElement(Tagname)：通过给定的标签名，创建一个标签对象

需求：使用js代码创建html标签，并显示在页面上

要求：标签的内容是：自定义

知识点：appendChild(oChild)方法增加子节点

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-createElement</title>
    <script type="text/javascript">
        var divObj = document.createElement("div");
        divObj.innerHTML = "使用js代码创建html标签，并显示在页面上"
        /*
         * 由于代码是从上往下执行的，所有要在浏览器完成解析整个页面后，
         *   才能判断到页面中有body标签
         *   再执行document.body.appendChild(divObj)，页面才会显示
         */
        window.onload = function () {
            document.body.appendChild(divObj)
        }
    </script>
</head>
<body>

</body>
</html>

  • 注意：

1.document对象的三个查询方式，如果有id属性，优先使用getElementsById方法，其次使用getElementsByName方法，最后用getElementsByTagName方法

2.以上三个方法，一定要在页面加载完成后执行，才能查询到标签对象

10.3 节点的常用属性和方法

节点就是标签对象

  • 方法：

通过具体的元素节点调用 getElementsByTagName 方法，获取当前节点指定标签名的孩子节点

appendChild(oChildNode)方法，可以增加一个子节点，oChildNode就是要添加的孩子节点

  • 属性：

childNodes：获取当前节点的所有子节点

firstChild：获取当前节点的第一个子节点

lastChild：获取当前节点的最后一个子结点

parentChild：获取当前节点的父节点

nextSilbling：获取当前节点的下一个节点

previousSilbling：获取当前节点的上一个节点

innerHTML：获取/设置起始标签和结束标签中的内容

innerText：获取/设置起始标签和结束标签中的文本

10.4 DOM对象查询练习

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-DOM对象查询练习</title>
    <link type="text/css" rel="stylesheet" href="1(07-DOM对象查询练习).css">
    <script type="text/javascript">
        window.onload = function () {
            var btn01Obj = document.getElementById("btn01");
            btn01Obj.onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML)
            }

            var btn02Obj = document.getElementById("btn02");
            btn02Obj.onclick = function () {
                var liObj = document.getElementsByTagName("li");
                alert(liObj.length)
            }

            var btn03Obj = document.getElementById("btn03");
            btn03Obj.onclick = function () {
                var genderObj = document.getElementsByName("gender");
                alert(genderObj.length)
            }

            var btn04Obj = document.getElementById("btn04");
            btn04Obj.onclick = function () {
                var cityObj = document.getElementById("city");
                var cliObj = cityObj.getElementsByTagName("li");
                alert(cliObj.length)
            }

            var btn05Obj = document.getElementById("btn05");
            btn05Obj.onclick = function () {
                var cityObj = document.getElementById("city");
                alert(cityObj.innerText)
            }

            var btn06Obj = document.getElementById("btn06");
            btn06Obj.onclick = function () {
                alert(document.getElementById("phone").firstChild.innerHTML)
            }

            var btn07Obj = document.getElementById("btn07");
            btn07Obj.onclick = function () {
                alert(document.getElementById("bj").parentElement.innerHTML)
            }

            var btn08Obj = document.getElementById("btn08");
            btn08Obj.onclick = function () {
                alert(document.getElementById("android").previousSibling.innerHTML)
            }

            var btn09Obj = document.getElementById("btn09");
            btn09Obj.onclick = function () {
                alert(document.getElementById("username").value)
            }

            var btn10Obj = document.getElementById("btn10");
            btn10Obj.onclick = function () {
                alert(document.getElementById("username").value = "edcba")
            }

            var btn11Obj = document.getElementById("btn11");
            btn11Obj.onclick = function () {
                alert(document.getElementById("bj").innerText)
            }
        }
    </script>
</head>
<body>
    <div id="total1">
        <div class="inner">
            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            <p>你喜欢哪款单机游戏？</p>
            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>
            <p>你手机的操作系统是？</p>
            <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>
        <div class="inner">
            gender:
            <input type="radio" value="Male" name="gender">Male
            <input type="radio" value="Female" name="gender">Female
            <br/>
            <br/>
            name:
            <input type="text" value="abcde" id="username">
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</body>
</html>

css文件：

#total1 {
    float: left;
    margin-left: 30%;
}
#btnList {
    float: left;
    margin-left: 10px;
}
.inner {
    border: black solid 2px;
    width: 400px;
    padding: 10px;
    margin-top: 10px;
}
#city,#game,#phone {
    list-style: none;
    padding: 10px;
}
li {
    display: inline-block;
    border: black solid 1px;
    background-color: aquamarine;
    padding: 2px;
}
button {
    margin-top: 10px;
}
举报

相关推荐

JavaWeb：JavaScript基础

javascript前端css3

JavaWeb_JavaScript

javascript前端开发语言

javaWeb-JavaScript

javascript前端开发语言

JavaWeb：JavaScript语言（一）

webjavascript

JavaWeb--快速入门JavaScript

javascript前端开发语言动态注册数组虚拟化云计算

JavaWeb前端基础（HTML CSS JavaScript）

前端htmlcss

JavaWeb(HTML/CSS/JavaScript)学习笔记

htmlcssjavascript

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

tcp/ip前端网络协议安全网络

javaweb入门4之javascript入门一

javascript前端开发语言html作用域JavaScript前端开发

Javaweb之javascript事件案例的详细解析

复选框输入框单击事件JavaScript前端开发
0 条评论