一、JavaScript 和 html 代码的结合方式

1. 第一种方式

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head> <meta charset="UTF-8">
  4. 	<title>Title</title>
  5.         <script type="text/javascript">
  6.             // alert 是 JavaScript 语 言 提 供 的 一 个 警 告 框 函 数 。
  7.             // 它 可 以 接 收 任 意 类 型 的 参 数 ， 这 个 参 数 就 是 警 告 框 的 提 示 信 息 alert("hello javaScript!");
  8.         </script>
  9.     </head>
  10.  <body>
  11. </body>
  12. </html>

2. 第二种方式

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <!- 现在需要使用 script 引入外部的 js 文件来执行 src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
  8. script 标签可以用来定义 js 代码，也可以用来引入 js 文件 但是，两个功能二选一使用。不能同时使用两个功能
  10. --> <script type="text/javascript" src="1.js">
  11.         </script>
  12.     <script type="text/javascript">
  14. 		alert("国哥现在可以帅了");
  15.      </script> </head> <body>
  17. </body>
  18. </html>

二、变量

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript 的变量类型：

  • 数值类型： number
  • 字符串类型： string
  • 对象类型： object
  • 布尔类型： boolean
  • 函数类型： function

JavaScript 里特殊的值： undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. null 空值 NaN 全称是：NotaNumber。非数字。非数值

JS 中的定义变量格式： var 变量名; var 变量名 = 值;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7.             var i;
  8.             // alert(i);
  9.             // undefined i = 12;
  10.             // typeof() 是 JavaScript 语 言 提 供 的 一 个 函 数 。
  11.             // alert( typeof(i) ); // number
  12. 			i = "abc";
  13.             // 它 可 以 取 变 量 的 数 据 类 型 返 回 // alert( typeof(i) );
  14.             // String
  15. 			var a = 12; var b = "abc";
  16. 		alert( a * b ); // NaN是 非 数 字 ， 非 数 值 。
  18. </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>

三、常见运算

1. 关系（比较）运算

  • 等于： == 等于是简单的做字面值的比较
  • 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7. 		var a = "12";
  8.          var b = 12;
  9. 		alert( a == b ); // true
  10.         alert( a === b ); // false
  11. </script> </head> <body>
  12. </body> </html>

2. 逻辑运算

  • 且运算： &&、
  • 或运算：|| 、
  • 取反运算： !

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

0 、null、 undefined、””(空串) 都认为是 false；

注意：

  • && 且运算。 有两种情况： 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
  • || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
  • 并且 && 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行 */
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7. 		 var a = 0;
  8.              if (a) {
  9.             	alert(" 零 为 真 ");
  10.            	 } else {
  11. 				alert(" 零 为 假 ");
  12.              }
  13. 		var b = null;
  14.              if (b) {
  15.                  alert("null为 真 ");
  16. 			 } else {
  17.              alert("null为 假 ");
  18. 			 }
  19.  		var c = undefined;
  20.             if (c) {
  21.                 alert("undefined为 真 ");
  22. 			} else {
  23.                 alert("undefined为 假 ");
  24. 			}
  25. 		var d = "";
  26.             if (d) {
  27.                 alert(" 空 串 为 真 ");
  28.             } else {
  29.                 alert(" 空 串 为 假 ");
  30.             }
  32. 			var a = "abc";
  33.             var b = true;
  34.             var d = false;
  35.             var c = null;
  36. 			alert( a && b );//true
  37.             alert( b && a );//true
  38.             alert( a && d ); // false
  39.             alert( a && c ); // null
  41. 		   alert( d || c ); // null
  42.             alert( c|| d ); //false
  43. 		   alert( a || c ); //abc
  44.             alert( b || c ); //true
  45. 	</script>
  46. </head>
  47. 	<body>
  48. 	</body>
  49. </html>

四、数组

1. 数组定义方式

  • var 数组名 =[]; //空数组
  • var 数组名 =[1,’abc’,true]; // 定义数组同时赋值元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7. 		var arr = [true,1]; //定 义 数 组
  8.          // alert( arr.length ); // 2
  9. 		arr[0] = 12;
  10.          // alert( arr[0] );//12 
  12. // javaScript语 言 中 的 数 组 ， 只 要 我 们 通 过 数 组 下 标 赋 值 ， 那 么 最 大 的 下 标 值 ， 就 会 自 动 的 给 数 组 做 扩 容 操 作 。
  13.             arr[2] = "abc";
  14.             alert(arr.length); //3
  15. 			// alert(arr[1]);// undefined
  16.             // 数 组 的 遍 历
  17.             for (var i = 0; i < arr.length; i++){
  18.                 alert(arr[i]);
  19.             }
  20. </script> </head>
  21. <body>
  22. </body> </html>

五、函数

函数的二种定义方式

1. 第一种定义方式

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

function 函数名(形参列表){

函数体

}

在 JavaScript 语言中，如何定义带有返回值的函数？ 只需要在函数体内直接使用 return 语句返回值即可！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7.             // 定 义 一 个 无 参 函 数
  8.             function fun(){
  9.                 alert("无参函数 fun()被调用了");
  10.             }
  11.             // 函 数 调 用 === 才 会 执 行
  12.             fun();
  14. 		   function fun2(a ,b) {
  15.                alert("有参函数 fun2()被调用了 a=>" + a + ",b=>"+b);
  16.            }
  17. 		   fun2(12,"abc");
  19. 		//定 义 带 有 返 回 值 的 函 数
  20. 		function sum(num1,num2) {
  21.             var result = num1 + num2;
  22.             return result;
  23.         }
  24. 		alert( sum(100,50) );
  25. </script> </head> <body>
  26. </body> </html>

2. 第二种定义方式

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

函数体

}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7.             var fun = function () {
  8.                 alert("无参函数");
  9.             }
  10.             fun();
  12.             var fun2 = function (a,b) {
  13.                 alert("有参函数 a=" + a + ",b=" + b);
  14.             }
  15.             fun2(1,2);
  17. 		    var fun3 = function (num1,num2) {
  18.                 return num1 + num2;
  19.             }
  20. 			alert( fun3(100,200) );
  21.         </script>
  22. </head>
  23.     <body>
  24. 	</body>
  25. </html>

注意：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7. 		function fun() {
  8.             alert("无参函数 fun()");
  9.         }
  10. 		function fun(a,b) {
  11.             alert("有参函数 fun(a,b)");
  12.         }
  14. 		fun();
  15. 	</script>
  16. </head>
  17.     <body>
  18. 	</body>
  19. </html>

3. 函数的 arguments 隐形参数

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

隐形参数特别像 java 基础的可变长参数一样。

public void fun(Object...args); ,可变长参数其他是一个数组

那么 js 中的隐形参数也跟 java 的可变长参数一样,操作类似数组

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <script type="text/javascript">
  7.             function fun(a) {
  8.                 alert( arguments.length );// 可 看 参 数 个 数
  9. 			   alert( arguments[0] );
  10.                 alert( arguments[1] );
  11.                 alert( arguments[2] );
  12. 			   alert("a = " + a);
  14. 			   for (var i = 0; i < arguments.length; i++){
  15.                    alert( arguments[i] );
  16.                }
  17. 			alert("无参函数 fun()");
  18. 		}
  19.             fun(1,"ad",true);
  20. //需 求 ： 要 求 编 写 一 个 函 数 。 用 于 计 算 所 有 参 数 相 加 的 和 并 返 回
  21.             function sum(num1,num2) {
  22.                 var result = 0;
  23.                 for (var i = 0; i < arguments.length; i++) {
  24.                     if (typeof(arguments[i]) == "number") {
  25.                         result += arguments[i]; }
  26.                 	}
  27.                 	return result;
  28.             	}
  29. 			alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
  30. 	</script>
  31. </head>
  32.  <body>
  33. </body>
  34. </html>

六、JS 中的自定义对象

1. Object 形式的自定义对象

对象的定义：

​ var 变量名 =newObject(); // 对象实例（空对象）

​ 变量名.属性名 = 值; // 定义一个属性

  1. 变量名.函数名 =function(){} // 定义一个函数

对象的访问：

​ 变量名.属性 / 函数名();

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         var obj = new Object();
  9.         obj.name = "马达";
  10.         obj.age = 18;
  11.         obj.fun = function () {
  12.             alert("姓名：" + this.name + " , 年龄：" + this.age);
  13.         }
  15.         // 对象的访问
  16.         // alert(obj.name);
  17.         obj.fun();
  18.     </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>

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

对象的定义：

​ var 变量名 ={ // 空对象

​ 属性名：值, // 定义一个属性

​ 属性名：值, // 定义一个属性

​ 函数名：function(){} // 定义一个函数

};

对象的访问：

​ 变量名.属性 / 函数名();

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         var obj = {
  8.             name: "马达",
  9.             age: 18,
  10.             fun: function () {
  11.                 alert("姓名：" + this.name + " , 年龄：" + this.age);
  12.             }
  13.         };
  15.         // alert(obj.name);
  16.         obj.fun();
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

七、JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，称之为事件

1. 常用的事件

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

事件的注册又分为静态注册和动态注册两种

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

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

2. 静态注册事件

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

3. 动态注册事件

是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom对象.事件名 =function(){} 这种形式赋于事件

响应后的代码，叫动态注册

动态注册基本步骤：

  • 获取标签对象
  • 标签对象.事件名 =fucntion(){}

4. onload 加载完成事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // function onLoadFun() {
  8.         //     alert("静态注册onload事件");
  9.         // }
  11.         // 这个是动态注册，固定的写法
  12.         window.onload = function () {
  13.             alert("动态注册onload事件");
  14.         }
  16.     </script>
  17. </head>
  19. <!--静态注册onload事件，这个事件是在浏览器解析完页面之后自动触发的事件，里面自定义的函数
  20. <body onload="onLoadFun()">
  22. -->
  24. </body>
  25. </html>

5. onclick 单击事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // function onclickFun() {
  8.         //     alert("静态注册onclick事件");
  9.         // }
  11.         // 动态注册
  12.         window.onload = function () {
  13.             // 1. 获取标签对象
  14.             // document是JS语言提供的一个对象
  15.             // 通过属性的id来获取标签对象
  16.             var b = document.getElementById("b01");
  17.             // alert(b);
  19.             // 2. 通过标签对象.事件名 =  function (){}
  20.             b.onclick = function () {
  21.                 alert("动态注册onclick事件");
  22.             }
  23.         }
  25.     </script>
  26. </head>
  27. <body>
  29. <!-- 静态注册onclick-->
  30.     <button onclick="onclickFun();">按钮1</button>
  31.     <button id="b01">按钮2</button>
  32. </body>
  33. </html>

6. onblur失去焦点事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // 静 态 注 册 失 去 焦 点 事 件
  8.         function onblurFun() {
  9.             // console 是 控 制 台 对 象 ， 是 由 JavaScript语 言 提 供 ， 专 门 用 来 向 浏 览 器 的 控 制 器 打 印 输 出 ， 用 于 测 试 使 用
  10.             // log()
  11.             console.log("静态注册失去焦点事件");
  12.         }
  14.         // 动态注册
  15.         window.onload = function () {
  16.             //1 获 取 标 签 对 象
  17.             var passwordObj = document.getElementById("password");
  18.             // alert(passwordObj);
  19.             // 2 通 过 标 签 对 象 . 事 件 名 = function(){};
  20.             passwordObj.onblur = function () {
  21.                 console.log("动态注册失去焦点事件");
  22.             }
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     用户名:<input type="text" onblur="onblurFun();"><br/>
  28.     密码:<input id="password" type="text"><br/>
  29. </body>
  30. </html>

7. onchange内容发生改变事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         function onchangeFun() {
  8.             alert("电影改变");
  9.         }
  11.         window.onload = function () {
  12.             var sObj = document.getElementById("s01");
  13.             sObj.onchange = function () {
  14.                 alert("书籍已经改变");
  15.             }
  16.         }
  18.     </script>
  19. </head>
  20. <body>
  22.     <!--静态注册事件-->
  23.     请选择你喜欢看的电影
  24.     <select onchange="onchangeFun();">
  25.         <option>--电影--</option>
  26.         <option>盗墓笔记</option>
  27.         <option>黑客帝国</option>
  28.         <option>千与千寻</option>
  29.     </select>
  31.     <br>
  32.     请选择你喜欢看的书籍
  33.     <select id="s01">
  34.         <option>--书籍--</option>
  35.         <option>平凡的世界</option>
  36.         <option>小王子</option>
  37.         <option>解忧杂货店</option>
  38.     </select>
  40. </body>
  41. </html>

8. onsubmit 表单提交事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // 静态注册表单提交事务
  8.         function onsubmitFun() {
  9.             alert("提交不合法");
  11.             return false;
  12.         }
  14.         // 动态注册表单提交事务
  15.         window.onload = function () {
  16.             var formObj = document.getElementById("form01");
  17.             formObj.onsubmit = function () {
  18.                 alert("动态注册提交不合法");
  19.                 return false;
  20.             }
  21.         }
  23.     </script>
  24. </head>
  25. <body>
  26.     <!--return false    可 以 阻 止 表 单 提 交-->
  27.     <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
  28.         <input type="submit" value="静态注册"/>
  29.     </form>
  31.     <form action="http://localhost:8080" id="form01">
  32.         <input type="submit" value="动态注册"/>
  33.     </form>
  35. </body>
  36. </html>

八、DOM模型

DOM 全称是 DocumentObjectModel 文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理。 那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢

1. Document 对象

Document 对象的理解：

  • Document 它管理了所有的 HTML 文档内容
  • document 它是一种树结构的文档，有层级关系
  • 它让我们把所有的标签 都 对象化
  • 我们可以通过 document 访问所有的标签对象

2. Document 对象中的方法介绍

  • document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
  • document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
  • document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名
  • document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注意：

document 对象的三个查询方法，如果有 id 属性，

优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

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

3. getElementById 方法

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

验 证 的 规 则 是 ： 必 须 由 字 母、数 字、下 划 线 组 成 。 并 且 长 度 是 5 到 12 位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         function onClick() {
  9.             // 1 当我们要 操 作 一 个 标 签 的 时 候 ， 一 定 要 先 获 取 这 个 标 签 对 象 。
  10.             var usernameObj = document.getElementById("username");
  11.             // [object HTMLInputElement] 就是dom对象
  12.             var usernameText = usernameObj.value;
  14.             //如 何 验 证 字 符 串 ， 符 合 某 个 规 则 ， 需 要 使 用 正 则 表 达 式 技 术
  15.             var patt =  /^\w{5,12}$/;
  16.             /*
  17.              test() 方 法 用 于 测 试 某 个 字 符 串 ， 是 不 是 匹 配 我 的 规 则 ，
  18.              匹配就返回true，否则返回false
  19.              */
  21.             var usernameSpanObj = document.getElementById("usernameSpan");
  22.             // innerHTML表 示 起 始 标 签 和 结 束 标 签 中 的 内 容
  23.             // innerHTML 这个属性可读，可写
  24.             usernameSpanObj.innerHTML = "你好！";
  26.             if (patt.test(usernameText)) {
  27.                 alert("用户名合法");
  28.                 usernameSpanObj.innerHTML = "用户名合法！";
  29.             }else{
  30.                 alert("用户名不合法");
  31.                 usernameSpanObj.innerHTML = "用户名不合法！";
  32.             }
  33.         }
  34.     </script>
  35. </head>
  36. <body>
  37.     用户名：<input type="text" id="username" value="md">
  38.     <span id="usernameSpan" style="color: red;">
  40.     </span>
  42.     <button onclick="onClick()">校验</button>
  43. </body>
  44. </html>

4. getElementsByName 方法

让 所 有 复 选 框 都 选 中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script type="text/javascript">
  9.         function checkAll() {
  10.             // document.getElementsByName("hobby"),是根据指定的name来查询返回多个标签对象集合
  11.             // 这个集合的操作和数组一样，集合中每个元素都是dom对象
  12.             // 这个集合中元素的顺序是按照html页面的上下顺序
  13.             var hobbies = document.getElementsByName("hobby");
  14.             // checked表示复选框的选中状态，选中是true
  15.             for (var i = 0; i < hobbies.length; i++){
  16.                 hobbies[i].checked = true;
  17.             }
  18.         }
  20.         // 全不选
  21.         function checkNo() {
  22.             var hobbies = document.getElementsByName("hobby");
  23.             for (var i = 0; i < hobbies.length; i++){
  24.                 hobbies[i].checked = false;
  25.             }
  26.         }
  28.         // 反选
  29.         // 这里用的取反操作
  30.         function checkReverse() {
  31.             var hobbies = document.getElementsByName("hobby");
  32.             for (var i = 0; i < hobbies.length; i++){
  33.                 hobbies[i].checked = !hobbies[i].checked;
  34.             }
  35.         }
  36.     </script>
  37. </head>
  38. <body>
  40.     兴趣爱好：
  41.     <input type="checkbox" name="hobby" value="c" checked="checked"> C
  42.     <input type="checkbox" name="hobby" value="java"> Java
  43.     <input type="checkbox" name="hobby" value="python"> Python
  45.     <br>
  47.     <button onclick="checkAll()">全选</button>
  48.     <button onclick="checkNo()">全部选</button>
  49.     <button onclick="checkReverse()">反选</button>
  51. </body>
  52. </html>

5. getElementsByTagName 方法

也是全选操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script type="text/javascript">
  9.         function checkAll() {
  10.             // document.getElementsByTagName("input"),
  11.             // 是根据指定标签名来查询返回多个标签对象集合
  12.             // 这个集合的操作和数组一样，集合中每个元素都是dom对象
  13.             // 这个集合中元素的顺序是按照html页面的上下顺序
  14.             var hobbies = document.getElementsByTagName("input");
  16.             for (var i = 0; i < hobbies.length; i++){
  17.                 hobbies[i].checked = true;
  18.             }
  19.         }
  21.     </script>
  22. </head>
  23. <body>
  25.     兴趣爱好：
  26.     <input type="checkbox" name="hobby" value="c" checked="checked"> C
  27.     <input type="checkbox" name="hobby" value="java"> Java
  28.     <input type="checkbox" name="hobby" value="python"> Python
  30.     <br>
  32.     <button onclick="checkAll()">全选</button>
  34. </body>
  35. </html>

6. createElement 方法

使用js代码来创建html标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         window.onload = function () {
  9.             // 在内存中有<div> </div>
  10.             var divObj = document.createElement("div");
  12.             // 有一个文本节点对象 你好，山丘
  13.             var textNodeObj = document.createTextNode("你好，山丘");
  15.             // <div>你好，山丘 </div>
  16.             divObj.appendChild(textNodeObj);
  18.             // 添加子元素，在body里
  19.             document.body.appendChild(divObj);
  20.         }
  22.     </script>
  23. </head>
  24. <body>
  26. </body>
  27. </html>

7. 节点常用的属性和方法

方法：

  • 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
  • appendChild(ChildNode) 方法，可以添加一个子节点，ChildNode 是要添加的孩子节点

属性：

  • childNodes 属性，获取当前节点的所有子节点
  • firstChild 属性，获取当前节点的第一个子节点 ，会匹配换行和空格信息 ，使用firstElementChild 则不会匹配换行和空格信息，其他的类似
  • lastChild 属性，获取当前节点的最后一个子节点
  • parentNode 属性，获取当前节点的父节点
  • nextSibling 属性，获取当前节点的下一个节点
  • previousSibling 属性，获取当前节点的上一个节点，previousElementSibling这个不包括换行和空格
  • className 用于获取或设置标签的 class 属性值
  • innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
  • innerText 属性，表示获取/设置起始标签和结束标签中的文本

8. DOM练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script type="text/javascript">
  9.         window.onload = function () {
  10.             // 1. 查找#bj节点
  11.             document.getElementById("b01").onclick = function () {
  12.                 var bjObj = document.getElementById("bj");
  13.                 alert(bjObj.innerHTML);
  14.             };
  16.             // 2. 查找所有 li 节点
  17.             var but02Ele = document.getElementById("b02");
  18.             but02Ele.onclick = function () {
  19.                 var lis = document.getElementsByTagName("li");
  20.                 alert(lis.length);
  21.             };
  22.             // 3. 查找 name=gender 的所有节点
  23.             var but03Ele = document.getElementById("b03");
  24.             but03Ele.onclick = function () {
  25.                 var genders = document.getElementsByName("gender");
  26.                 alert(genders.length);
  27.             };
  29.             // 4. 查找#city 下所有 li 节点
  30.             var but04Ele = document.getElementById("b04");
  31.             but04Ele.onclick = function () {
  32.                var lis = document.getElementById("city").getElementsByTagName("li");
  33.                alert(lis.length);
  34.             };
  36.             // 5. 返回#city 的所有子节点
  37.             var but05Ele = document.getElementById("b05");
  38.             but05Ele.onclick = function () {
  39.                var obj = document.getElementById("city").childNodes;
  40.                console.log(obj.length);
  41.                for (var i = 0; i < obj.length; i++){
  42.                    console.log(obj[i]);
  43.                }
  44.             };
  46.             // 6. 返回#phone 的第一个子节点
  47.             var but06Ele = document.getElementById("b06");
  48.             but06Ele.onclick = function () {
  49.                 var objphone = document.getElementById("phone").firstElementChild;
  50.                 alert(objphone.innerHTML);
  52.             };
  54.             // 7. 返回#bj 的父节点
  55.             var but07Ele = document.getElementById("b07");
  56.             but07Ele.onclick = function () {
  57.                 var objbj = document.getElementById("bj").parentNode;
  58.                 alert(objbj.innerHTML);
  59.             };
  61.             // 8. 返回#ML 的前一个兄弟节点
  62.             var but08Ele = document.getElementById("b08");
  63.             but08Ele.onclick = function () {
  64.                 alert(document.getElementById("ML").previousElementSibling.innerHTML);
  65.             };
  67.             // 9. 返回#username 的 value 属性值
  68.             var but09Ele = document.getElementById("b09");
  69.             but09Ele.onclick = function () {
  70.                 alert(document.getElementById("username").value);
  71.             };
  73.             // 10. 设置#username 的 value 属性值
  74.             var but10Ele = document.getElementById("b10");
  75.             but10Ele.onclick = function () {
  76.                 document.getElementById("username").value = "山丘";
  77.             };
  79.             // 11. 返回#city 的文本值
  80.             var but11Ele = document.getElementById("b11");
  81.             but11Ele.onclick = function () {
  82.                 alert(document.getElementById("city").innerText);
  83.             };
  84.         };
  86.     </script>
  87. </head>
  88. <body>
  89.     <div id="total">
  90.         <div class="inner">
  91.             <p>
  92.                 你喜欢那个城市？
  93.             </p>
  95.             <ul id="city">
  96.                 <li id="bj">北京</li>
  97.                 <li>南京</li>
  98.                 <li>东京</li>
  99.                 <li>上海</li>
  100.             </ul>
  102.             <br>
  104.             <p>
  105.                 你喜欢那款游戏？
  106.             </p>
  108.             <ul id="game">
  109.                 <li id="wz">王者荣耀</li>
  110.                 <li>飞车</li>
  111.                 <li>联盟</li>
  112.                 <li>DNF</li>
  113.             </ul>
  115.             <br>
  117.             <p>
  118.                 你的手机是什么品牌?
  119.             </p>
  121.             <ul id="phone">
  122.                 <li>华为</li>
  123.                 <li id="ML">小米</li>
  124.                 <li>oppo</li>
  125.                 <li>一加</li>
  126.             </ul>
  127.         </div>
  129.         <div class="inner">
  130.             gender:
  131.             <input type="radio" name="gender" value="male">
  132.             Male
  133.             <input type="radio" name="gender" value="female">
  134.             Female
  136.             <br>
  137.             name:
  138.             <input type="text" name="name" id="username" value="md">
  139.         </div>
  140.     </div>
  142.     <div id="btuList">
  143.         <div><button id="b01">查找#bj节点</button></div>
  144.         <div><button id="b02">查找所有 li 节点</button></div>
  145.         <div><button id="b03">查找 name=gender 的所有节点</button></div>
  146.         <div><button id="b04">查找#city 下所有 li 节点</button></div>
  147.         <div><button id="b05">返回#city 的所有子节点</button></div>
  148.         <div><button id="b06">返回#phone 的第一个子节点</button></div>
  149.         <div><button id="b07">返回#bj 的父节点</button></div>
  150.         <div><button id="b08">返回#android 的前一个兄弟节点</button></div>
  151.         <div><button id="b09">返回#username 的 value 属性值</button></div>
  152.         <div><button id="b10">设置#username 的 value 属性值</button></div>
  153.         <div><button id="b11">返回#city 的文本值</button></div>
  154.     </div>
  155. </body>
  156. </html>

Java Web(1)-JavaScript的更多相关文章

  1. Java web之javascript(2020.1.6)

    1.js输出: windows.alert()---警告框 document.write()---写到html文档中 innerHTML---写到HTML元素 console.log()---写到浏览 ...

  2. Java Web开发——HTML CSS JavaScript 杂记

    HTML是一种在互联网上常见的网页制作标注性语言,并不能算作一种程序设计语言.因为它相对程序设计语言来说缺少了其应所有的特征.对于网站设计人员来说,只使用HTML是不够的,需要在页面中引入CSS样式. ...

  3. java web后台开发SSM框架（Spring+SpringMVC+MyBaitis）搭建与优化

    一.ssm框架搭建 1.1创建项目 新建项目后规划好各层的包. 1.2导入包 搭建SSM框架所需包百度云链接:http://pan.baidu.com/s/1cvKjL0 1.3整合spring与my ...

  4. JAVA WEB项目中各种路径的获取

    JAVA WEB项目中各种路径的获取 标签: java webpath文件路径 2014-02-14 15:04 1746人阅读 评论(0) 收藏 举报  分类: JAVA开发(41)  1.可以在s ...

  5. Java Web 学习路线

    实际上,如果时间安排合理的话,大概需要六个月左右,有些基础好,自学能力强的朋友,甚至在四个月左右就开始找工作了.大三的时候,我萌生了放弃本专业的念头,断断续续学 Java Web 累计一年半左右,总算 ...

  6. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  7. Java EE 和 Java Web

    什么是 Java Web 应用程序? Java Web 应用程序会生成包含各种类型的标记语言(HTML 和 XML 等)和动态内容的交互式 Web 页.它通常由 Web 组件组成(如 JavaServ ...

  8. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  9. [Java Web整合开发王者归来·刘京华] 1、 Java Web开发

      目录: 1.Web技术简介 2.动态网站与静态网站 3.Java Web开发模式 4.JavaScript简介 1.Web技术简介 PS: 最近还有更凶残的技术,即整个操作系统都是基于Web的,如 ...

随机推荐

  1. java中值传递

    最近学基础的时候,老师讲了值传递和引用传递,这个问题一直不太明白,上网查了很多资料,按照自己的理解整理了一遍,发现之前不太明白的地方基本上想明白了,如有不正确的地方,欢迎指正,谢谢. 首先要说明的是j ...

  2. Spring系列.SpEL表达式

    Spring表达式语言 SpEL语言是一种强大的表达式语言,支持在运行时查询和操作对象.SpEL表达式不一定要创建IOC容器后才能使用.用户完全可以单独调用SpEL的API来独立的使用时SpEL表达式 ...

  3. js语法基础入门（4）

    4.运算符 4.1.什么是运算符? 运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用"+ - * /"等符号来表示 4.2.运算符的分类 ...

  4. java方法中开启一个线程

    很多业务场景下需要你在一个方法中去开启一个线程,去跑一些处理时间较长的代码,这样调用方就不必经过长时间的等待了.好了 话不多说  先上代码: package test; public class Th ...

  5. $.post 参数定义

    //重置密码 function ResetPassword(id, accounts) { //alert("重置密码id-" + id + "-" + acc ...

  6. Pop Sequence 题解

    Pop Sequence(PAT) https://www.nowcoder.com/pat/5/problem/4090 前言: PAT上一道Stack的应用题,简化版的有<信息学一本通·普及 ...

  7. 优雅关闭服务下线（Jetty）

    在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...

  8. ELK安装 docker-compose.yml

    version: '2.2' services: cerebro: image: lmenezes/cerebro:0.8.3 container_name: cerebro ports: - &qu ...

  9. Redis 6.0 访问控制列表ACL说明

    背景 在Redis6.0之前的版本中,登陆Redis Server只需要输入密码(前提配置了密码 requirepass )即可,不需要输入用户名,而且密码也是明文配置到配置文件中,安全性不高.并且应 ...

  10. Python-用xlrd模块读取excel，数字都是浮点型，日期格式是数字的解决办法

    excel文件内容: 读取excel: # coding=utf-8 import xlrd import sys reload(sys) sys.setdefaultencoding('utf-8' ...