JavaWeb---放慢-脚步---04_JavaScript
文章目录
- JavaScript 基础
-
- 2. JavaScript
- 3. JavaScript 发展史
- 4. JS与html结合方式
- 5. 注释 & 数据类型
- 6. 变量
- 7. 运算符
- 7. JS特殊语法
- 8. 流程控制语句
- 9. 练习 99乘法表
- 10. Function对象
- 11. array 数组对象
- 12. Date 日期对象
- 13. Math 对象
- 14. RegExp 正则表达式对象
- 15. Global 全局对象
- BOM、DOM、事件
-
- 1. DOM简单学习：为了满足案例要求
- 2. 事件简单学习
- 3. 案例1_电灯开关
- 4. BOM
- 5. BOM_Window_方法：弹出、打开关闭、定时器
- 8. 案例2_轮播图
- 9. BOM_Location 地址栏对象
- 11. 案例3_自动跳转首页
- 12. BOM_History 历史记录对象
- 13. DOM_概述
- 14. DOM_Document对象_获取Element
- 15. DOM_Element对象
- 16. DOM_Node对象
- 17. 案例4_动态表格_添加和删除
- 18. HTML DOM_innerHTML
- 19. HTML DOM_控制样式
- 20. 事件：概述
- 22. 事件：常见事件演示
- 23. 事件：案例5_表格全选
- 24. 事件：案例6_表单检验
JavaScript 基础
2. JavaScript
- 概念：JavaScript是一门客户端脚本语言
- 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
- 功能：
- 可以增强用户和html页面的交互过程，可以控制html元素，让页面有一些动态的效果，增强用户的体验。
3. JavaScript 发展史
用户在浏览器填写登录表单，点击登录按钮后，会把信息发送给服务器端，服务器端判断账号、密码…是否正确，再响应回浏览器。
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：
C--，后来更名为：ScriptEase - 1995年，Netscape公司，开发了一门客户端脚本语言：
LiveScript。后来，请来了SUN公司的专家，修改LiveScript，命名为JavaScript。 - 1996年，微软抄袭了
JavaScript开发出JScript语言. - 1997年，ECMA (欧洲计算机制造商协会)，
ECMAScript就是所有客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript 自己特有的东西 (BOM + DOM)
ECMAScript：客户端脚本语言的标准
- 基本语法
- JS与html结合方式
- 注释
- 数据类型
- 变量
- 运算符
- 流程控制语句
- 基本对象
4. JS与html结合方式
- 内部JS：
定义
7. 运算符
- 一元运算符：只有一个运算数的运算符
++，--，
+(-)正负号，其他类型转number：
string 转 number，按照字面值转换 var b = +"123"; typeof(b) //number类型 如果字面值不是数字，则转为NaN（不是数字的数字） var b = +"abc" typeyof(b) //NaN类型boolean 转 number，true 转为1，false 转为 0 var flag = + true; //转类型，要加正号 var flag2 = + false; typeof(flag) //number flag //1 flag2 //0- 算数运算符：
+，-，*，/，% - 赋值运算符：
=，+=，-= - 比较运算符：
>，<，>=，<=，==，===
类型相同，直接比较
类型不同，先进行类型转换，再比较
(3 > 4) //false 字符串，按照字典顺序比较，按位逐一比较，直到得出大小为止。 ("abc" > "acd") //false 把字符串转成数字，再和数字比 ("123" == 123) //true ===全等于，在比较之前，先判断类型，如果类型不一样，直接返回false ("123" === 123) //false- 逻辑运算符：
&&：短路，如果左边为false，右边就不运算了
||：短路
!
var flag = true; (flag) //true (!flag) //false其他类型转
booleannumber，0或NaN为假，非0为真 var num = 3; var num2 = 0; var num3 = NaN; (!num) //false (!num2) //true (!num3) //truestring 除了空字符串，其他都为true var s = "abc"; //true var s2 = ""; //false null & undefined：都是false 对象：都是true- 三元运算符
var a = 3; var b = 4; var c = a > b ? 1 : 0; //c=07. JS特殊语法
- 语句以
;结尾，如果一行只有一条语句则;可以省略（不建议） - 变量的定义使用
var关键字，也可以不使用
用：定义的变量是局部变量
不用：定义的变量是全局变量（不建议）
8. 流程控制语句
- if…else
- switch：
在java中，switch语句可以接受的数据类型：byte、int、char、枚举、string
在js中
var a = 1; switch(a)： case 1： alert("number"); break; case "abc": alert("string); break; case true: alert("true"); break; case null: alert("null"); break; case undefine: alert("undefined"); break;- while
var sum = 0; var num = 1; while(num <= 100) { sum += num; num ++; } alert(sum);- do…while
- for
<script> var sum = 0; for(var i = 1; i <= 100; i++){ sum += i } alert(sum); script>9. 练习 99乘法表
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表title> <style> td{ border: 1px solid; } style> <script> document.write("); //1. 完成基本的for循环嵌套，展示乘法表 for (var i = 1; i <= 9; i++) { document.write("
"); script> head> <body> body> html>"); for (var j = 1; j <= i; j++) { document.write(" "); } //2. 完成表格嵌套 document.write(""); document.write(i + "*" + j + "=" + (i * j) + " "); document.write(" "); } document.write("10. Function对象
function对象：函数对象
<script> /*创建方式： function 方法名称（形参列表）{ 方法体 } */ function fun2(a, b){ alert(a + b); } fun2(3, 4); //输出7 var fun3 = function(a, b){ alert(a + b); } fun2(3, 4); script>特点：1. 方法定义时，形参类型不用写，返回值类型也不写
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关<script> function fun2(a, b){ alert(a); alert(b); } fun2(1, 2); //可以运行，输出1和2 fun2(1); //可以运行，输出1和undefined fun2(1, 2, 3); //可以运行，输出1，2 script>- 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
求任意个数的和 <script> function add() { var sum = 0; for(var i = 0; i < arguments.length; i++){ sum += arguments[i]; } return sum; } var sum = add(1, 2, 3, 4); alert(sum); //输出10 script>11. array 数组对象
- 创建
<script> var arr1 = new Array(1, 2 ,3); //1,2,3 var arr2 = new Array(5); //.....，5表示数组长度，可以为空 var arr3 = [1, 2, 3, 4]; //1,2,3,4 script>- 方法
join()：将数组中的元素按照指定的分隔符拼接成字符串
push():
<script> script>- 属性: length
- 特点：
- JS中，数组元素的类型可变。
- JS中，数组长度可变
<script> var arr = [1, "abc", true]; //1,abc,true arr[0] //1 arr[1] //abc arr[2] //true arr[3] //undefined arr[10] = "hehe" //打印出来hehe arr[9] //打印出来undefined arr.length; //11 arr.join("--"); //1--abc--true----------hehe arr.push(11); //1--abc--true----------hehe--11 script>12. Date 日期对象
toLocaleString(): 返回当前date对象对应的时间本地字符串格式
getTime(): 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。<script> var date = new Date(); date; //打印出来是美国日期的字符串格式： //Thu May 17 2018 14:59:59 GMT+0800(中国标准时间) date.toLocaleString();//2018/5/17 下午3:01:55 date.getTime() script>13. Math 对象
Math 对象不用创建，直接使用
属性：PI
方法：<script> Math.PI; //3.1415926 Math.random() //0～1之间的随机数，含0不含1 Math.round(3.14) //四舍五入 3 Math.ceil(3.14) //向上取整 4 Math.floor(3.14) //向下取整 3 script>取1～100之间的随机整数
1. Math.random()产生随机数，范围(0, 1]小数 2. 乘以 100 --> [0, 99.9999] 小数 3. 舍弃小数部分，floor --> [0, 99]整数 4. +1 --> [1,100] <script> var number = Math.floor(Math.random() * 100)) + 1; script>14. RegExp 正则表达式对象
- 正则表达式：定义字符串的组成规则
- 单个字符:[]
[a] 表示有一个字符是a [ab] a或者b [a-zA-Z0-9_] \d: 单个数字字符 [0-9] \w: 单个单词字符[a-zA-Z0-9_]- 量词符号
? 表示出现0次或1次 * 出现0次或多次 + 出现1次或多次 {m, n} m<= 数量 <=n {, n} 最多n次 {m, } 最少m次- 开始结束符号
^ 开始，$结束
- 正则对象：
- 创建
- 方法
test()验证指定的字符串是否符合正则定义的规范
<script> var reg = new RegExp("\w{6,12}"); var reg2 = /^\w{6,12}$/; var username = "zhangsan"; var flag = res2.test(username) //flag=true script>15. Global 全局对象
- 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
- 方法：
encodeURI()：url编码
decodeURI()：url解码
encodeURIComponent()：url编码，编码的字符更多
decodeURIComponent()：url解码 - URL编码
传智播客，假设是GBK编码：8个字节，1个字节8个二进制位。每个字节转为一个16进制的数字，两个数字前加一个%
var str = "传智播客"; var encode = encodeURI(str); //编码：打印encode：%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 var s = decodeURI(encode); //解码：打印s：传智播客 var encode1 = encodeURIComponent(str); var s1 = decodeURIComponent(encode); //打印结果一样- paseInt()：将字符串转为数字
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
var str = "123abc"; var number = parseInt(str); //打印出123BOM、DOM、事件
1. DOM简单学习：为了满足案例要求
功能：控制html文档的内容
代码：获取页面标签（元素）对象 Element
document.getElementById("id值");通过元素的id获取元素对象操作Element对象：
- 设置属性值
- 明确获取的对象是哪一个？
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容
属性：innerHTML
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <img id="img1" src="img/3.jpg"> <h1 id="title">标题1111111h1> <script> //通过id获取元素对象 var img1 = document.getElementById("img1"); alert("我要换图片了。。。"); img1.src = "img/4.jpg"; //1. 获取h1标签对象 var title = document.getElementById("title"); alert("我要换内容了"); //2. 修改内容 title.innerHTML = "标题2222222"; script> body> html>2. 事件简单学习
- 功能：某些组件被执行了某些操作后，触发某些代码的执行。
造句：xxxx被xxxx，我就xxxx。如：我方水晶被摧毁后，我就责备队友。 - 如何绑定事件
- 直接在html标签上，指定事件的属性（操作），属性值就是js代码
事件：onclick— 单机事件 - 通过js获取元素对象，指定事件属性，设置一个函数
- 直接在html标签上，指定事件的属性（操作），属性值就是js代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定title> head> <body> <img id="img1" src="img/3.jpg" onclick="fun();"> <img id="img2" src="img/3.jpg"> <script> <!--第一种方式--> function fun() { alert('我被点了'); } <!--第二种方式--> //1. 获取 light2 对象 var img2 = document.getElementById("img2"); //2. 绑定事件 img2.onclick = fun; script> body> html>3. 案例1_电灯开关
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关title> head> <body> <img id="img1" src="img/3.jpg"> <script> /* 分析： 1. 获取图片对象 2. 绑定单击事件 3. 每次点击切换图片 * 规则： * 如果是图片1，切换为图片2 * 如果是图片2，切换为图片1 * 使用标记 flag 来完成 */ var image = document.getElementById("img1"); var flag = false; //代表灯是灭的 image.onclick = function () { if (flag) { //如果是图片1，则换成图片2 image.src = "img/4.jpg" flag = false; } else { //如果是图片2，则换成图片1 image.src = "img/3.jpg" flag = true; } } script> body> html>4. BOM
- 概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。 - 组成：
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
5. BOM_Window_方法：弹出、打开关闭、定时器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> <script> /* Window: 窗口对象 1. 创建 2. 方法 1. 与弹出框有关的方法： alert() 显示带有一段消息和一个确认按钮的警告框 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 * 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框 * 返回值：获取用户输入的值 2. 与打开、关闭有关的方法： close() 关闭浏览器窗口 * 谁调用我，我关谁 open() 打开一个新的浏览器窗口 * 返回一个新的Window对象 3. 与定时器有关的方法： setTimeout() 在指定的毫秒数后调用函数或计算表达式 * 参数： 1. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的timeout 3. 属性 1. 获取其他BOM对象 history location Navigator Screen 2. 获取DOM对象 document 4. 特点 * Window对象不需要创建可以直接使用 window使用，window.方法名(); * window引用可以省略。 方法名(); */ /** * 1. 弹出方法 */ alert("hello window"); // 等价于：window.alert("hello a"); var flag = confirm("你确定要退出吗？"); if (flag) { //退出操作 alert("欢迎再次光临！"); } else { //提示：手别抖 alert("手别抖"); } /** * 2. 打开、关闭方法 * @type {string} */ //输入框 var res = prompt("请输入用户名："); alert(res); //弹出用户输入的信息（用户名） //打开新窗口 var openBtn = document.getElementById("openBtn"); var newWindow; openBtn.onclick = function () { //打开新窗口 newWindow = open("https://cn.bing.com"); } var closeBtn = document.getElementById("closeBtn"); closeBtn.onclick = function () { //关闭新窗口 newWindow.close(); } /** * 3. 定时器方法 */ //一次性定时器 var id = setTimeout(fun, 2000); clearTimeout(id); function fun() { alert("boom~~"); } //循环定时器 var id = setInterval(fun, 2000); //2秒炸一次 clearTimeout(id); /** * 4. 属性（window可省略） */ //获取history，获取当前页面的历史记录 var h1 = window.history; var h2 = history; //获取Dom对象 window.document.getElementById(""); document.getElementById(""); script> body> html>8. 案例2_轮播图
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图title> head> <body> <img id="img" src="img/bg_1.jpeg" width="700dp" height="500dp"> <script> /* 分析： 1. 在页面上使用img标签展示图片 2. 定义一个方法，修改图片的src属性 3. 定义一个定时器，每隔3秒调用方法一次 */ //修改图片的src属性 var num = 0; function fun() { num++; var img = document.getElementById("img"); img.src = "img/bg_" + num % 3 + ".jpeg"; //1%3=1,2%3=2,3%3=0 } //定义定时器 setInterval(fun, 1000); script> body> html>9. BOM_Location 地址栏对象
- 创建（获取）：
- widown.location
- location
- 方法
- reload() 重新加载当前文档。刷新
- 属性
- href
效果：
点击刷新按钮，会刷新页面，并重新弹出href
代码：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Locationtitle> head> <body> <input type="button" id="btn" value="刷新"> <input type="button" id="goBing" value="去必应"> <script> //reload方法，定义一个按钮，点击按钮，刷新当前页面 //1. 获取按钮 var btn = document.getElementById("btn"); //2. 绑定单机事件 btn.onclick = function () { //3. 刷新页面 location.reload(); } //获取href //var href = location.href; //alert(href); //点击按钮，去访问https://cn.bing.com官网 //1. 获取按钮 var goBing = document.getElementById("goBing"); //2. 绑定单机事件 goBing.onclick = function () { //3. 刷新页面 location.href = "https://cn.bing.com"; } script> body> html>11. 案例3_自动跳转首页
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转title> <style> p { text-align: center; } span { color: red; } style> head> <body> <p> <span id="time">5span>秒之后，自动跳转到首页... p> <script> /* 分析： 1. 显示页面效果、 2. 倒计时读秒效果实现 1. 定义一个方法，获取span标签，修改span标签体的内容：时间-- 2. 定义一个定时器，1秒执行一次该方法 3. 在方法中判断，时间如果<=0，则跳转到首页 */ // 2. 倒计时读秒效果实现 var second = 5; var time = document.getElementById("time"); function showTime() { second--; if (second <= 0) { location.href = "https://cn.bing.com"; } time.innerHTML = second + ""; //变成字符串类型的 } //设置定时器，1秒执行一次该方法 setInterval(showTime, 1000);
script> body> html>12. BOM_History 历史记录对象
- 创建（获取）：
- window.history
- history
- 方法
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go()加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录 - 属性
length 返回当前窗口历史列表中的 url 数量
代码：
history对象1：属性length、方法forward和go
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <input type="button" id="btn" value="获取历史记录个数"> <a href="https://cn.bing.com">必应a> <input type="button" id="forward" value="前进"> <script> /* 1. length 属性 */ //1. 获取按钮 var btn = document.getElementById("btn"); //2. 绑定单机事件 btn.onclick = function () { //3. 获取历史记录的个数 var length = history.length; alert(length); } /* 2. 方法 */ //1. 获取按钮 var forward = document.getElementById("forward"); //2. 绑定单机事件 forward.onclick = function () { //3. 前进方法，前进到下一个页面去 // 等价于history.forward(); history.go(1); } script> body> html>history对象2：方法back和go
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图title> head> <body> <img id="img" src="img/bg_1.jpeg" width="700dp" height="500dp"> <input type="button" id="back" value="后退"> <script> /* 分析： 1. 在页面上使用img标签展示图片 2. 定义一个方法，修改图片的src属性 3. 定义一个定时器，每隔3秒调用方法一次 */ //修改图片的src属性 var num = 0; function fun() { num++; //获取img对象 var img = document.getElementById("img"); img.src = "img/bg_" + num % 3 + ".jpeg"; //1%3=1,2%3=2,3%3=0 } //定义定时器 setInterval(fun, 1000); //1. 获取按钮 var back = document.getElementById("back"); //2. 绑定单机事件 back.onclick = function () { //后退 //history.back();等价于 history.go(-1); } script> body> html>13. DOM_概述
- 概念：Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。
可以使用这些对象，对标记语言文档进行CRUD的动态操作
- W3C 定义的 DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- Document：文档元素
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 核心 DOM - 针对任何结构化文档的标准模型
- 学习
- 核心DOM模型：
- Document：文档元素
- Element：元素对象
- Node：节点对象，其他5个的父对象
- HTML DOM
- 核心DOM模型：
14. DOM_Document对象_获取Element
Document：文档元素
- 创建（获取）：在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法
- 获取 Element 对象
getElementById()根据id属性值获取元素对象。id 属性值一般唯一。getElementsByTagName()根据元素名称获取元素对象们。返回值是一个数组。getElementsByClassName()根据Class的属性值获取元素对象们。返回值是一个数组。getElementsByName()根据name属性值获取元素对象们。返回值是一个数组。
- 创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
- 获取 Element 对象
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="div1">div1div> <div id="div2">div2div> <div id="div3">div3div> <div class="cls1">div4div> <div class="cls2">div5div> <input type="text" name="username"> <script> //2.根据元素名称获取元素对象们。返回值是一个数组 var divs = document.getElementsByTagName("div"); alert("getElementsByTagName：" + divs.length); //3.根据Class属性值获取元素对象们。返回值是一个数组 var div_cls = document.getElementsByClassName("cls1"); alert("getElementsByClassName：" + div_cls.length); //4.根据name属性值获取元素对象们。返回值是一个数组 var ele_username = document.getElementsByName("username"); alert("getElementsByName：" + ele_username.length); //创建一个table标签，但是看不到效果，只能看到它是一个HTMLTable元素对象 var table = document.createElement("table"); alert(table); script> body> html>- 属性：Element对象，Node对象
15. DOM_Element对象
Element: 元素对象
获取/创建：通过document对象来获取和创建DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <a>点我试一试a> <input type="button" id="btn_set" value="设置属性"> <input type="button" id="btn_remove" value="删除属性"> <script> //获取btn var btn_set = document.getElementById("btn_set"); btn_set.onclick = function () { //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href", "https://www.baidu.com"); } //获取btn var btn_remove = document.getElementById("btn_remove"); btn_remove.onclick = function () { //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); } script> body> html>16. DOM_Node对象
Node: 节点对象，其他5个的父对象
- 特点：所有DOM对象都可以被认为是一个节点
- 方法：CRUDdom树
- appendChild(): 向节点的子节点列表的结尾添加新的子节点
- removeCild(): 删除（并返回）当前节点的指定子节点
实现效果：
初始效果：
点击删除子节点：
点击添加子节点
代码DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> div { border: 1px solid red; } #div1 { width: 200px; height: 200px; } #div2 { width: 100px; height: 100px; } #div3 { width: 100px; height: 100px; } style> head> <body> <div id="div1"> <div id="div2">div2div> div1 div> <a href="javascript:void(0);" id="del">删除子节点a> <a href="javascript:void(0);" id="add">添加子节点a> <script> /* 删除子节点 */ //1. 获取超链接 var element_a = document.getElementById("del"); //2. 绑定单机事件 element_a.onclick = function () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); //删除子节点 div1.removeChild(div2); } /* 超链接功能： 1. 可以被点击：样式 2. 点击后跳转到href指定的url 需求：保留功能1，去掉功能2 实现：href = "javascript:void(0);"，注销掉跳转功能 */ /* 添加子节点 */ //1. 获取超链接 var element_add = document.getElementById("add"); //2. 绑定单机事件 element_add.onclick = function () { var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.createElement("div"); div3.setAttribute("id", "div3"); div1.appendChild(div3); } script> body> html>17. 案例4_动态表格_添加和删除
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格title> <style> table { border: 1px solid; margin: auto; width: 500px; } td, th { text-align: center; border: 1px solid; } div { text-align: center; margin: 50px; } style> head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> div> <table> <caption>学生信息表caption> <tr> <th>编号th> <th>姓名th> <th>性别th> <th>操作th> tr> <tr> <td>1td> <td>令狐冲td> <td>男td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td> tr> <tr> <td>2td> <td>任我行td> <td>男td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td> tr> <tr> <td>3td> <td>岳不群td> <td>?td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td> tr> table> <script> /* 分析： 1.添加： 1. 给添加按钮绑定单击事件 2. 获取文本框的内容 3. 创建td，设置td的文本为文本框的内容。 4. 创建tr 5. 将td添加到tr中 6. 获取table，将tr添加到table中 2.删除： 1.确定点击的是哪一个超链接 删除 2.怎么删除？ removeChild():通过父节点删除子节点 */ //1. 获取按钮，绑定单机事件 document.getElementById("btn_add").onclick = function () { //2. 获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3. 创建td，赋值td的标签体 //(1).id 的 td var td_id = document.createElement("td");//创建td var text_id = document.createTextNode(id);//创建一个文本节点text_id td_id.appendChild(text_id);//把文本节点放在里面 //(2).name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //(3).gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //(4).a标签 的 td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); //设置a标签的属性javascript:void(0);和delTr(this) ele_a.setAttribute("href", "javascript:void(0);"); ele_a.setAttribute("onclick", "delTr(this);"); var text_a = document.createTextNode("删除");//创建一个文本节点 ele_a.appendChild(text_a);//把文本节点加入到a标签里面 td_a.appendChild(ele_a);//把a标签加入到td里面 //4. 创建 tr var tr = document.createElement("tr"); //5. 添加 td 到 tr 中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6. 获取table（就一个table，根据标签名称获取） var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除 function delTr(obj) { //参数 obj/this 代表当前的超链接对象/当前的a标签 //通过a标签，获取它的父节点td，再获取它的父节点tr（获取两次），获取第三次是table var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } script> body> html>18. HTML DOM_innerHTML
HTML标签体的设置和获取：innerHTML
使用：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTMLDOMtitle> head> <body> <div id="div1"> div_text div> <script> //1. 获取标签体 var div = document.getElementById("div1"); var innerHTML = div.innerHTML; // alert(innerHTML); //2. div标签中替换一个文本输入框（把"div_text"变成了文本输入框） div.innerHTML = ""; //3. div标签中追加一个文本输入框 div.innerHTML += "" script> body> html>动态表格的添加操作：
<script> //使用innerHTML添加 //1. 获取按钮，绑定单机事件 document.getElementById("btn_add").onclick = function () { //2. 获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3. 获取table（就一个table，根据标签名称获取） var table = document.getElementsByTagName("table")[0]; //4. 追加一行 table.innerHTML += "\n" + " "; } script>" + id + " \n" + "" + name + " \n" + "" + gender + " \n" + "删除 \n" + "19. HTML DOM_控制样式
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性（查API文档学习）
- 控制元素的样式
- 使用元素的style属性来设置
- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>控制样式</title> <style> .d1 { border: 1px solid red; width: 100px; height: 100px; } .d2 { border: 1px solid red; width: 200px; height: 200px; } </style> </head> <body> <div id="div1"> div1_text </div> <div id="div2"> div2_text </div> <script> var div1 = document.getElementById("div1"); //修改样式方式1：使用style的属性设置 div1.onclick = function () { // style后面加css的属性的键的名称，值就是属性对应的值 div1.style.border = "1px solid red";//1个像素的实线的红色边框 div1.style.width = "200px";//红色边框宽度设为200 //font-size --> fontSize div1.style.fontSize = "20px";//字的大小 } //修改样式方式2：通过元素的className属性来设置class属性值 var div2 = document.getElementById("div2"); div2.onclick = function () { div2.className = "d1"; } </script> </body> </html>20. 事件：概述
22. 事件：常见事件演示
23. 事件：案例5_表格全选
24. 事件：案例6_表单检验
- 一元运算符：只有一个运算数的运算符