JavaScript

最新推荐文章于 2021-12-26 20:00:10 发布

AX_Chu

最新推荐文章于 2021-12-26 20:00:10 发布

阅读量390

点赞数

分类专栏： JavaWeb 文章标签： javaweb javascript js

本文链接：https://blog.csdn.net/AX_Chu/article/details/117563390

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、JavaScript介绍

1.1 介绍：

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

JS是弱类型，Java是强类型。

弱类型就是类型可变；强类型就是定义变量的时候，类型已确定，不可变。

1.2 特点：

① 交互性（它可以做的就是信息的动态交互）
② 安全性（不允许直接访问本地硬盘）
③ 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

2、JavaScript和HTML代码的结合方式

2.1 第一种方式（只能在当前页面使用）

只需要再head标签中，或者再body标签中，使用script标签来书写JavaScript代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert是JavaScript语言提供的一个警告函数
        //  它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("hello JavaScript!")

    </script>
</head>

2.2 第二种方式（可以被标签引入，类似调用）

使用script标签引入单独的JavaScript代码文件。

js文件代码如下：

alert("1125 hello");

html代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js文件来执行，scr属性专门引入js文件路径-->
    <script type="text/javascript" src="02-hello2.js"></script>
</head>

注：script标签可以用来定义js代码，也可以用来引入js文件，单两个功能二选一使用。

补充注意（href和src的区别）：

1.请求资源类型不同

① href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
② 在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script、img 、iframe；

2.作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；
（2）src 用于替换当前内容；

3.浏览器解析方式不同

（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。
（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

3、JavaScript语言中的变量

3.1 JavaScript的变量类型

数值类型：		number		int、long...
字符串类型：	string
对象类型：		object
布尔类型：		boolean
函数类型：		function

3.2 JavaScript里特殊的值

undefined		未定义，所有js变量为赋于初始值的时候，默认都是undefined
null			空值
NAN				全称是：Not a Number。非数字、非数值。

3.3 JavaScript中定义变量格式（弱类型，可变）

var 变量名;
var 变量名 = 值;

	<script type="text/javascript">
        var i;
        alert(i);
        i=12;
        alert((typeof (i)));//number

        var a=12;
        var b="adc";
        
        alert(a*b);

    </script>

3.3 关系（比较）运算 - - - 返回boolean类型数据

等于： == 等于是简单的做字面值的比较

全等于： === 除了做字面值的比较外，还比较两个变量的数据类型。

	<script type="text/javascript">
        var c=21;
        var d="21";
        alert(c==d);    //true
        alert(c===d);   //false
    </script>

3.4 逻辑运算 - - - 返回boolean类型数据

且运算： &&

两种情况：
① 当表达式全为真的时候，返回最后一个表达式的值
② 当表达式中，有一个为假的时候，返回第一个为假的表达式的值

或运算： ||

两种情况：
① 当表达式全为假的时候，返回最后一个表达式的值
② 只要有一个表达式为真，就返回第一个为真的表达式的值。

取反运算：！

注意：

① &&与运算、||或运算有短路，就是当有结果之后，后面的表达式不再执行。

② 在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。

0、null、undefined、“”（空串）、NAN都认为是false。

	<script type="text/javascript">
      
        var a="abc"; //true
        var b=true; //true
        var c="";//false
        var d=null;//false

        /*alert(a&&b);
        alert(b&&a)
        alert(c&&d);
        alert(d&&c);*/

        alert(a||b);
        alert(c||d);
        alert(c||a);

    </script>

4、数组（重点）

JS中数组的定义：

格式：
var 数组名=[];				//空数组
var 数组名=[1,'abc',true];	//定义数组同时赋值元素

=注意==：javaScript语言中的数组，只要通过数组下标赋值，最大的下标值，就会自动给数组做扩容。 - - -读操作不会自动扩容。

	<script type="text/javascript">
        var arr=[];
        //alert(arr.length);

        //javaScript语言中的数组，只要通过数组下标赋值，最大的下标值，就会自动给数组做扩容
        arr[2]=12;
        alert(arr.length);

        alert(arr[16]);
        alert(arr.length)

        for (var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
    </script>

5、函数（重点）

5.1 函数的两种定义方式

1）可以使用function关键字来定义函数。

function 函数名(形参列表){
	函数体
}

    <script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert("gg");
        }
        //函数调用，才执行
        fun();

        function fun2(a,b){
            alert(a);
            alert(b);
            return fun();
        }
        fun2("abc",12);
    </script>

2）方式二：

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

    <script type="text/javascript">
        var fun=function (a,b){
            return alert(a+b)
        }
        fun(12,11);
    </script>

注意：

① 形参不用写类型，只需要提供形参名。

② 带有返回值的函数，只需要在函数体内直接使用return语句返回值即可。

③ JS中函数不允许重载，如果定义一个和之前一样函数名的函数，那么之前的函数就会被覆盖。

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

在function函数中不需要定义，但却可以直接用来获取所有参数的变量，叫做隐形参数。 - - -类似java中的可变长参数。

    <script type="text/javascript">
        function fun(){
            alert(arguments.length); //查看参数个数
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);

            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
            alert("无参数函数fun()");
        }

        fun(1,"das")
    </script>

注意：在JS中数字和字符串相加用Java一样也是字符串。

 	<script type="text/javascript">
        // 需求：要求编写一个函数，用于计算所有参数相加的和并返回
        function sum(num1,num2){
            var result=0;
            for(var i=0;i<arguments.length;i++){
                result += arguments[i];
            }
            return result;
        }
        alert(sum(1,2,3,4,5,6,7,8,9)); //45
        alert(sum(1,2,3,4,5,"abc",7,8,9));//15abc789
       
    </script>

6、JS中的自定义对象（扩展内容）

6.1 Object形式的自定义对象

对象的定义：
	var 对象名 = new Object();					//对象实例（空对象）

	对象名.属性名 = 值;							//定义一个属性

	对象名.函数名 = function() {函数体}; 		//定义一个函数

对象的访问：
	对象名.属性/函数名();

    <script type="text/javascript">
        var obj=new Object();
        obj.arr=[0,1,2];
        obj.name="李四";
        obj.fun=function (){
            alert(obj.arr[0]);
            alert(obj.name);
        }
        obj.fun();
    </script>

6.2 {}花括号形式的自定义对象

定义对象：
	var 对象名 ={};		//空对象

定义属性和函数：
	① 方式一：定义变量和函数同Object一样
	对象名.属性名 = 值;							//定义一个属性
	对象名.函数名 = function() {函数体}; 		//定义一个函数
	
	② 方式二：不同的定义方式
	var 对象名 ={
		属性名：值，							//定义一个属性之间逗号分隔
		属性名：值,								//定义一个属性
		函数名：function(){函数体}				//定义一个函数与属性也是逗号分隔
	};

对象的访问：
	对象名.属性/函数名();

    <script type="text/javascript">
        //方式一：定义变量和函数同Object一样
        var obj={};
        alert(typeof (obj));
        obj.name="啊这";
        obj.fun=function (){
            alert(obj.name);
        }
        obj.fun();

        //方式二：
        var obj2={
            name:"gg",
            age:18,
            fun2:function (){
                alert("good")
                alert(this.age);
            }
        };
        alert(obj2.name);
        obj2.fun2();
    </script>

7、JS中的事件

7.1 事件的介绍以及常用的事件

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

2）常用的事件：

onload		加载完成事件			页面加载完成之后，常用于做页面js代码初始化操作
onclick		单击事件				常用于按钮的点击响应操作
onblur		失去焦点事件			常用于输入框失去焦点后验证其输入内容是否合法
onchange	内容发生改变事件		常用于下拉列表或输入框内容发生改变后操作
onsubmit	表单提交事件			常用于表单提交前，验证所有表单项是否合法

7.2 事件的注册（静态注册和动态注册）

1）什么是事件的注册（绑定）：

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

2）事件的注册方式：

① 静态注册事件：

通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫静态注册。

② 动态注册事件：

先通过js代码得到标签的dom对象，然后再通过dom对象 . 事件名=function(){}这种形式赋予事件响应后的代码，叫做动态注册。

动态注册基本步骤：
	① 获取标签对象
	② 标签对象.事件名=function(){}

3）常用事件的演示：

① onload 加载完成事件

注意：
window.οnlοad=function ()，当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句。

静态注册事件代码如下：

可以直接再body中写，<body οnlοad=“alert(‘静态注册onload事件,所有代码’)”>，但是要写很多就会很长，故可以封装进函数中，再调用。

<head>
	<script type="text/javascript">
        //onload事件的函数
        function onloadFun(){
            alert('静态注册onload事件,所有代码');
        }
     </script>
</head>     

<body onload="onloadFun()">	//静态注册事件
</body>

动态注册事件代码如下：

onload事件动态注册，是固定写法，window.οnlοad=function (){}

    <script type="text/javascript">
        //onload事件动态注册，是固定写法
        window.onload=function (){
            alert('动态注册onload事件,所有代码');
        }
    </script>
</head>

<body>			//动态注册事件

</body>

② onclick 点击事件 - - -常用于按钮

静态注册事件代码如下：

同onload一样

<head>
	<script type="text/javascript">
        //onclick事件的函数
        function onclickFun(){
            alert("静态注册onclick事件");
        }
     </script>
</head>     

<body>	
	<!--静态注册onclick事件-->
    <button onclick="onclickFun()">按钮1</button>
</body>

动态注册事件代码如下：

先获取标签对象（id/name…），再通过标签对象.事件名=function(){} 完成动态注册。

	 /*动态注册onclick事件*/
    window.onload=function (){
        //1、获取标签对象
        /*
        * document是JavaScript语言提供的一个对象（当前整个页面）
        * get       获取
        * Element   元素（就是标签）
        * By        通过...
        * Id        id属性
        *
        * getElementById通过id属性获取标签对象
        * */
        var btnobj = document.getElementById("btn01");
        //alert(btnobj);
        //2、通过标签对象.事件名=function(){}
        btnobj.onclick=function (){
            alert("动态注册onclick事件");
        }
    }

	<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*动态注册onclick事件*/
        window.onload=function (){
            //1、获取标签对象
            /*
            * document是JavaScript语言提供的一个对象（当前整个页面）
            * get       获取
            * Element   元素（就是标签）
            * By        通过...
            * Id        id属性
            *
            * getElementById通过id属性获取标签对象
            * */
            var btnobj = document.getElementById("btn01");
            //alert(btnobj);
            //2、通过标签对象.事件名=function(){}
            btnobj.onclick=function (){
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">按钮2</button>
</body>
</html>

③ onblur 失去焦点事件 - - -常用于输入框失去焦点

静态注册事件代码如下：

同onload、onlick一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun(){
            // console是控制台对象，由JavaScript语言提供，专门
            //  用来向浏览器的控制器打印输出，用于测试使用,log()打印的方法
            console.log("静态注册失去焦点事件");
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br/>
</body>
</html>

动态注册事件代码如下：

同onclick一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       //动态注册onblur事件
        window.onload=function (){
            //1、获取标签对象
            var passwordobj=document.getElementById("password");
            //2、通过标签对象.事件名=function(){}
            passwordobj.onblur=function (){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    密码：<input type="text" id="password"><br/>
</body>
</html>

④ onchange 失去焦点事件 - - -常用于下拉列表或输入框

静态注册事件代码如下：

同onload、onlick、onblur一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("女神已经改变了");
        }
    </script>
</head>
<body>
        请选择你心中的女神：
        <!--静态注册onchange事件-->
        <select onchange="onchangeFun()">
            <option>---女神---</option>
            <option>芳芳</option>
            <option>佳佳</option>
            <option>呲呲</option>
        </select>
</body>

动态注册事件代码如下：

同onclick、onblur一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
	 	//动态
        window.onload=function (){
            //1、获取标签对象
            var selobj=document.getElementById("sel01");
            //2、通过标签对象.事件名=function(){}
            selobj.onchange=function (){
                alert("男神已经改变了")
            }
        }
    </script>
</head>
<body>
        请选择你心中的男神：
        <!--动态注册onchange事件-->
        <select id="sel01">
            <option>---男神---</option>
            <option>你肖哥</option>
            <option>啊哈</option>
            <option>呲呲</option>
        </select>
</body>

⑤ onsubmit 表单提交事件 - - -常用于表单

当有不合法时，return false可以阻止表单提交

静态注册事件代码如下：

同onload、onlick、onblur、onchange一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态
        function onsubmitFun(){
            //要验证所有表单项是否合法，如果有一个不合法，就进行阻止
            alert("静态提交事件，发现不合法");

            return false;
        }
    </script>
</head>
<body>
        <!--return false 可以阻止表单提交-->
        <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
            <input type="submit" value="静态注册"/>

        </form>
</body>

动态注册事件代码如下：

同onclick、onblur、onchange一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //动态
        window.onload=function (){
            //1、获取标签对象
            var formobj=document.getElementById("form01");
            //2、通过标签对象.事件名=function(){}
            formobj.onsubmit=function (){
                alert("动态提交事件，发现不合法")

                return false;
            }
        }
    </script>


</head>
<body>
        <form action="http://localhost:8080" id="form01">
            <input type="submit" value="动态注册"/>
        </form>
</body>

8、DOM模型 - - -重点

8.1 DOM介绍

DOM全称是Document Object Model文档对象模型。

即：把文档（htnl页面）中的标签、属性、文本，转换成对象来管理。

8.2 Document对象（重点）

在这里插入图片描述
对Document对象的理解：

1）Document它管理了所有的HTML文档内容。

2）Document它是一种树结构的文档，有层级关系。

3）使得所有标签都对象化。

4）可以通过document访问所有的标签对象。

HTML标签如何对象化：（类似树的结点）

例如：要如何对象化
	<body>
		<div id="div01">div01</div>
	</body>

class Dom{
	private String id；			//id属性
	private String tagName;		//表示标签名
	private Dom parentNode;		//父亲
	private List<Dom> children;	//孩子结点
	private String innerHTML;	//起始标签和结束标签中间的内容
}

注意：Document对象的方法：
在这里插入图片描述

1） getElementById方法的应用

需求：当用户点击了校验按钮，要获取输入框中的内容。然后验证其是否合法，验证的规则是，必须由字母、数字、下划线组成，并且长度是5-12位。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    
        function onclickFun(){  //静态绑定button
            //1、当操作标签的时候，要先获取这个标签的对象
            var userNameobj=document.getElementById("userName");

            //[object HTMLInputElement]为dom对象
            alert(userNameobj.value); //获取的是可变的值（输入后的值）
            var usernameText=userNameobj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式
            var patt=/^\w{5,12}$/;  //是个对象

            /*
            * test（）方法用于测试某个字符串，是不是匹配规则
            *   匹配返回true
            * */
            if (patt.test(usernameText)){
                alert("用户名合法！");
            }else {
                alert("用户名不合法！");
            }
        }

    </script>
</head>
<body>
        用户名：<input type="text" id="userName" value=""/>
        <button onclick="onclickFun()">校验</button>
</body>

补充知识：（正则表达式对象）

两种创建方式：

例如：表示要求字符串中，是否包含字母e

①：
RegExp的对象就是正则表达式，

var patt=new RegExp("e");

②

var patt =/e/;  也是正则表达式对象

改进后代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*需求：当用户点击了校验按钮，要获取输入框中的内容。
        *   然后验证其是否合法，验证的规则是，必须由字母、数字
        *   下划线组成，并且长度是5-12位
        * */
        function onclickFun(){  //静态绑定button
            //1、当操作标签的时候，要先获取这个标签的对象
            var userNameobj=document.getElementById("userName");

            //[object HTMLInputElement]为dom对象
            //alert(userNameobj.value); //获取的是可变的值（输入后的值）
            var usernameText=userNameobj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式
            var patt=/^\w{5,12}$/;  //是个对象

            /*
            * test（）方法用于测试某个字符串，是不是匹配规则
            *   匹配返回true
            * */

            var usernameSpanobj = document.getElementById('usernameSpan');

            if (patt.test(usernameText)){
                //innerHTML表示起始标签和结束之间内容，可读、可写
                //  可写则是赋值就修改其值
                //usernameSpanobj.innerHTML="用户名合法！";
                usernameSpanobj.innerHTML="<img src=\"right.png\" width=\"16\" height=\"16\">";
            }else {
                usernameSpanobj.innerHTML="<img src=\"wrong.png\" width=\"16\" height=\"16\">";
            }
        }

    </script>
</head>
<body>
        用户名：<input type="text" id="userName" value=""/>
        <span id="usernameSpan" style="color: red;">

        </span>
        <button onclick="onclickFun()">校验</button>
</body>

2） getElementsByName方法的应用

需求：实现一个全选、全不选、反选三种功能的选择框。

① document.getElementsByName()，根据指定name属性返回多个标签对象集合，这个集合操作和数组一样，集合中每个元素都是dom对象。

② input标签在类型为type="checkbox"条件下，**checked=“checked”**表示默认选中。- - -获取到此属性checked表示复选框的选中状态，选中是true，可读、可写。

代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkAll() {
            //让所有复选框都选中
            // document.getElementsByName()
            // 根据指定name属性返回多个标签对象集合，这个集合操作和数组一样
            // 集合中每个元素都是dom对象
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态，选中是true，可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }

        }

        function checkNo(){
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态，选中是true，可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }

        function checkReverse() {
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态，选中是true，可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked ^=true;
            }
        }
    </script>
</head>
<body>
        兴趣爱好：
        <input type="checkbox" name="hobby" value="cpp" >C++
        <input type="checkbox" name="hobby" value="Java" >Java
        <input type="checkbox" name="hobby" value="js" >JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>
</body>

3） getElementsTagName方法的应用

需求：实现一个全选功能

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkAll() {
            //让所有复选框都选中
            // document.getElementsByTagName()
            // 根据指定标签名返回多个标签对象集合，这个集合操作和数组一样
            // 集合中每个元素都是dom对象
            var inputs=document.getElementsByTagName("input");
            // checked表示复选框的选中状态，选中是true，可读、可写
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }

        }
    </script>
</head>
<body>
        兴趣爱好：
        <input type="checkbox" value="cpp" >C++
        <input type="checkbox" value="Java" >Java
        <input type="checkbox" value="js" >JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
</body>

注意：（document三个查询方法的使用顺序）

① 如果由id属性，优先使用getElementById方法来进行查询；如果没有id属性，则优先使用getElementByName方法。

② 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。- - - 这也是onload事件动态绑定是固定写法的原因。

8.3 结点的常用属性和方法

结点就是标签对象

1）方法：

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

appendChild(oChildNode)方法，可以添加一个子结点，oChildNode是要添加的孩子结点。

演示代码如下：

方式一：使用到创建文本结点
方式二：直接添加内容元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload=function (){//执行后，表示页面加载完成

            //现在需要我们使用js代码来创建html标签，并显示在页面上
            // 标签的内容就是：<div>Good</div>
            var divobj=document.createElement("div");//在内存中<div></div>

            //方式一： 解释了文本也是个结点
            //创建文本结点对象，因为在div中，故要赋成div子结点
            var textNodeobj=document.createTextNode("Good");
            divobj.appendChild(textNodeobj); //<div>Good</div>

            //方式二：直接加入内容
            //divobj.innerHTML="Good"; //<div>Good</div>，但只是在内存中

            document.body.appendChild(divobj);
        };
    </script>
</head>
<body>

</body>

2）属性：

在这里插入图片描述

<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点  按钮的1动态绑定
		document.getElementById("btn01").onclick=function (){
			var bjobj =document.getElementById("bj");
			alert(bjobj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis =document.getElementsByTagName("li");
			alert(lis.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders =document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1、获取id为city的结点
			//2、通过city结点.getElementByTagName按标签名查子结点
			var lis=document.getElementById("city").getElementsByTagName("li")
			alert(lis.length);
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1、获取id为city的结点
			//2、通过city结点获取所有子结点
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert(document.getElementById("phone").firstChild.innerHTML);
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			alert(document.getElementById("bj").parentNode.innerHTML);
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			alert(document.getElementById("android").previousSibling.innerHTML);
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value="aaaaaa"
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			//alert(document.getElementById("bj").innerHTML);
			alert(document.getElementById("bj").innerText);

		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<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" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</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>

AX_Chu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

1、JavaScript介绍1.1 介绍：JavaScript语言诞生主要是完成页面的数据验证。因此它的运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是弱类型，Java是强类型。弱类型就是类型可变；强类型就是定义变量的时候，类型已确定，不可变。1.2 特点：① 交互性（它可以做的就是信息的动态交互）② 安全性（不允许直接访问本地硬盘）③ 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）2、JavaScript和HTML代码的结合方式2.1 第一种方式
复制链接

扫一扫