JavaEE Day10 JavaScript高级
2024-05-11 13:26:37
今日内容
- JavaScript
- ECMAScript：客户端脚本语言标准(✔)
- BOM对象
- DOM对象
- 事件
- 学习顺序：DOM-事件-BOM-DOM
一、简单入门
1、DOM
- 功能：控制HTML文档的内容(CRUD)
- 代码：获取页面标签(元素)对象Element
- document.getElementById("id值")：通过元素的id获取元素对象
- 功能：操作对象
- 设置其属性值
- 明确获取的对象是哪一个
- 查看API文档，找其中有哪些属性可以设置 a.src=
- 修改内容(标签体内容)
- 内容：innerHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM获取元素对象</title></head>
<body><img src="img/off.gif" alt="off" id="light"><h1 id="title">悔创阿里杰克马</h1><script>//通过id获取此元素对象var light = document.getElementById("light");alert("我要换图片啦");//定义在前面获取不到light.src = "img/on.gif";//1.获取h1标签对象var title = document.getElementById("title");//2.修改内容alert("我要换内容啦");title.innerHTML = "不识妻美刘强东";</script>
</body>
</html>
2、事件
- 功能：某些组件被执行了某些操作后，触发了某些代码的执行
- 造句：xxx被xxx，我就xxx
- 如：我方水晶被摧毁后，我就骂队友
- 敌方水晶被摧毁后，我就夸奖自己
- 如何绑定事件
- 直接在html标签上指定事件的属性，属性值就是js代码
- 事件：onClick---单击事件
- 缺点：耦合度比较高
- 通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title></head>
<body><img src="img/off.gif" alt="off" id="light" onclick="fun()"><img src="img/off.gif" alt="off" id="light2" onclick="fun()"><script>function fun(){alert('我被点了');alert('我you被点了');}function fun2(){alert('咋又点我');}//第二个事件的绑定var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;</script>
</body>
</html>
3、案例1--电灯开关
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例1：电灯开关</title>
</head>
<body><img src="img/off.gif" alt="off" id="light"><script>/*分析：1、获取图片事件2、绑定单击事件3、每次点击切换图片规则：如果灯是开的--on，切换图片为off如果灯是关的--off，切换图片为on使用flag标记来完成*///1.获取图片对象var light = document.getElementById("light");var flag = false;//代表灯是灭的，off图片//2、绑定单击事件light.onclick = function() {//判断if (flag){light.src = "img/off.gif";flag = false;}else{//如果灯是灭的，则打开light.src = "img/on.gif";flag = true;}}</script>
</body>
</html>
有错误：F12--console控制台会报错，点击可以定位到错误的位置
二、BOM
1、概念
Browser Object Model：浏览器对象模型
将浏览器的各个组成部分封装为对象，查看浏览器的对象
2、组成
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
2.1Window：窗口对象---弹出方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Window窗口对象</title><script>/*whidow窗口对象1、创建2、方法1.与弹出框有关的方法alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则方法返回true如果用户点击取消按钮，则方法返回falseprompt() 显示可提示用户输入的对话框。返回值：用户输入的值3、属性4、特点1.Window对象不需要创建，可以直接使用window使用，如window.方法名()2.window引用可以省略，即：方法名()* *///alert("hello1");//window.alert("hello window");/*var flag = confirm("您确定要退出吗？");alert(flag);if (flag){//退出操作alert("欢迎再次光临");}else{//提示：手别抖alert("提示：手别抖");}*///输入框var result = prompt("请输入用户名：");alert(result);</script>
</head>
<body>
</body>
</html>
2.2Window：窗口对象---与打开关闭有关的方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Window窗口对象</title>
</head>
<body>
<input type="button" id="open_btn" value="打开窗口">
<input type="button" id="close_btn" value="关闭已经打开的那个窗口">
<script>/*whidow窗口对象1、创建2、方法2.与打开关闭有关的方法open() 打开一个新的浏览器窗口或查找一个已命名的窗口。返回新的window对象close() 关闭浏览器窗口。谁调用我我关谁3、属性4、特点1.Window对象不需要创建，可以直接使用window使用，如window.方法名()2.window引用可以省略，即：方法名()* *///打开一个新窗口var openBtn = document.getElementById("open_btn");var newWindow;openBtn.onclick = function () {newWindow = open("http://www.baidu.com");}//关闭var closeBtn = document.getElementById("close_btn");closeBtn.onclick = function () {//关闭新窗口newWindow.close();//代表当前的窗口}
</script>
</body>
</html>
2.3Window：窗口对象---与定时器有关的方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Window窗口对象</title>
</head>
<body>
<script>/*whidow窗口对象1、创建2、方法3.与定时器有关的方法setTimeout() 在指定的毫秒数后调用函数或计算表达式，只执行一次参数：1.js代码片段2.毫秒值返回值：唯一标识，用于取消定时器clearTimeout() 取消由 setTimeout() 方法设置的 timeout，取消定时器 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式，循环执行【执行多次，天天早上响】参数：1.js代码片段2.毫秒值返回值：唯一标识，用于取消定时器clearInterval() 取消由 setInterval() 设置的 timeout【取消循环定时器】3、属性4、特点1.Window对象不需要创建，可以直接使用window使用，如window.方法名()2.window引用可以省略，即：方法名()* *///一次性定时器function fun() {alert("boom!!");}var id = setTimeout("alert(\"boom!!\");",3000);//代码片段//setTimeout("fun();",3000);//代码片段//setTimeout(fun,3000);//第一个参数作为方法//取消定时器//clearTimeout(id);//设置循环定时器var id = setInterval(fun,2000);clearInterval(id);
</script>
</body>
</html>
2.4 案例：轮播图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例2：轮播图</title><script>/*分析：1.在页面上使用img标签展示图片2.定义一个方法，修改图片对象的链接src属性3.定义一个定时器，每隔3秒调用这个方法一次* *//*** 修改图片src属性*/var number = 1;function fun(){number++;//判断number是否大于3if(number>3){number=1;}//3秒可以获取到，但是如果时间很短，就要放到img后面//为了万无一失，还是放到img后面比较好var img = document.getElementById("img");img.src = "img/banner_"+ number +".jpg";}//2.定义定时器setInterval(fun,3000);</script>
</head>
<body><img src="img/banner_1.jpg" alt="" width="100%" id="img">
</body>
</html>
2.5Window：窗口对象---属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Window窗口对象</title>
</head>
<body>
<input type="button" id="openBtn" value="打开">
<script>/*whidow窗口对象1、创建2、方法3、属性1.获取其他BOM对象historylocationNavigatorScreen2.获取DOM对象document4、特点1.Window对象不需要创建，可以直接使用window使用，如window.方法名()2.window引用可以省略，即：方法名()* *///获取historyvar h1 = window.history;var h2 = history;alert(h1);alert(h2);var openBtn = window.document.getElementById("openBtn");alert(openBtn);
</script>
</body>
</html>
3.DOM_Location对象
3.1 Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
- 创建
- window.location
- location
- 方法
- reload()：重新加载当前文档/刷新
- 属性
- href：设置或返回完整的URL
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Location对象</title></head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="goItcast" value="去传智">
<script>//reload方法，定义一个按钮，点击按钮就去刷新当前页面//1.获取按钮var btn = document.getElementById("btn");//2.绑定单击事件btn.onclick = function(){//3.刷新页面location.reload();}//获取hrefvar href = location.href;alert(href);//更多的是设置//点击按钮，去访问www.itcast.cn官网var goItcast = document.getElementById("goItcast");//绑定单击事件goItcast.onclick = function () {//3.刷新页面location.href = "http://www.baidu.com";//去访问www.itcast.cn官网}
</script>
</body>
</html>
3.2 案例：自动跳转首页
<!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">5</span>秒之后，自动跳转到首页</p><script>/*分析：1.显示页面效果 <p>2.倒计时读秒效果(定时器)实现2.1定义一个方法，获取span标签，修改span标签体内容，时间--2.2定义一个定时器，一秒执行一次该方法3.在方法中判断，时间如果<=0，则跳转到首页* *///倒计时读秒效果(定时器)实现var second = 5;var time;function showTime(){second--;//时间如果<=0，则跳转到首页if (second<=0){location.href = "http://www.baidu.com";//实现跳转}time = documen.getElementById("time");time.innerHTML = second+"";}//设置 定时器，一秒执行一次该方法setInterval(showTime,1000);</script>
</body>
</html>
4.BOM_History历史记录对象
History 对象包含用户(在当前浏览器窗口中)访问过的 URL。
- 创建(获取)
- windows.history
- history
- 方法
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
- 属性
- length 返回当前窗口历史列表中的 URL 数量。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>History对象</title>
</head>
<body><input type="button" id="btn" value="获取历史记录个数"><br>
<a href="09_History对象2_轮播图.html">09页面</a><br>
<input type="button" id="forward" value="前进"><br><script>/*History 对象包含用户(在当前浏览器窗口中)访问过的 URL。创建(获取)windows.historyhistory方法back() 加载 history 列表中的前一个 URL。forward() 加载 history 列表中的下一个 URL。go(参数) 加载 history 列表中的某个具体页面。【相当于集成了back和forward方法】参数：正数，表示前进几个历史记录负数：表示后退几个历史记录属性length 返回当前窗口历史列表中的 URL 数量。* *///1.获取按钮var btn = document.getElementById("btn");//2.绑定事件btn.onclick = function(){//3.获取历史记录的个数(当前窗口)var length = history.length;alert(length);}//需求：当点击超链接后var forward = document.getElementById("forward");//2.绑定事件forward.onclick = function(){//3.获取历史记录的个数(当前窗口)history.go(1);//history.forward();}</script>
</body>
</html>
三、DOM
document.getElementById("id值")：通过元素的id获取元素对象
1、概述
Document Object Model：文档对象模型
1.1 将标记语言 文档的各个组成部分封装为对象，可以使用这些对象对标记语言文档进行CRUD的动态操作
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
1.2W3C DOM 标准
被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
- Document对象：文档对象☆
- Element：元素对象☆
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，是其他5个的父对象☆
XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型☆【对核心的扩展和封装】
1.3 学习内容
- 核心 DOM - 针对任何结构化文档的标准模型
- Document对象：文档对象☆
- Element：元素对象☆
- Node：节点对象，是其他5个的父对象☆
- HTML DOM
2.DOM--Document
XML DOM较核心DOM修改较少，所以看xml DOM的文档
window里面包含了document对象
- 创建/获取：在html dom模型中，可以使用window对象来获取
- window.document
- document
- 方法
- 获取Element对象
- getElementById()：根据id属性值获取元素对象，id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们， 返回的是一个数组
- getElementsByClassName：根据class属性值获取元素对象们，返回值是一个数组
- getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组
- 创建其他DOM对象
- 属性
2.1 Document对象_获取Element方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document对象</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>/*DOM-Document对象_获取Element方法XML DOM较核心DOM修改较少，所以看xml DOM的文档window里面包含了document对象创建/获取：在html dom模型中，可以使用window对象来获取window.documentdocument方法获取Element对象getElementById()：根据id属性值获取元素对象，id属性值一般唯一getElementsByTagName()：根据元素名称获取元素对象们， 返回的是一个数组getElementsByClassName：根据class属性值获取元素对象们，返回值是一个数组getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组创建其他DOM对象属性* *///2.根据元素名称获取var divs = document.getElementsByTagName("div");alert(divs.length);//3.根据class属性值获取var div_cls = document.getElementsByClassName("cls1");alert(div_cls.length);var ele_username = document.getElementsByName("username");//input表单比较多，radio比较多alert(ele_username.length);
</script>
</body>
</html>
2.2 Document对象_创建DOM对象
createAttribute(name)：属性
createComment()：注释
createElement()：元素
createTextNode()：文本
3.Element对象
- 获取(创建)：通过document来获取和创建
- 方法
- removeAttribute()：删除属性
- setAttribute()：设置属性
- 属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Element对象</title>
</head>
<body>
<a>点我试一试</a>
<input type="button" value="设置属性" id="btn_set">
<input type="button" value="删除属性" id="btn_remove">
<script>//获取btnvar 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");}//删除属性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>
4.Node节点对象，其他5个对象的父对象
节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。
- 特点 ：所有DOM对象
- 方法：
- CRUD DOM树
- appendChild() 向节点的子节点列表的结尾添加新的子节点。
- removeChild() 删除(并返回)当前节点的指定子节点。
- replaceChild() 用新节点替换一个子节点。
- 属性
- parentNode：返回当前节点的父节点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><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"> div2</div>div1</div><a href="javascript:void(0)" id="del">删除div的子节点</a><a href="javascript:void(0)" id="add">添加子节点</a><!--原因，href为空，点一下跳到当前页面，删完又回来了--><!--<input type="button" id="del" value="删除子节点">--><script>//点击 按钮，期望把div1的子节点删除//1.获取超链接var element_a = document.getElementById("del1");//2.绑定单击事件element_a.onclick = function () {var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");}/*超链接功能：1、可以被点击，有样式2、点击后，跳转到href指定的url需求：保留1功能，去掉2功能实现：href="javascript:void(0)"* *///1.获取超链接var add = document.getElementById("add");//2.绑定单击事件add.onclick = function () {var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script>
</body>
</html>
5.案例4_动态表格
5.1添加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>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 id="table"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><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.创建tr5.将td添加到tr中6.获取tr，将tr添加到table中* *///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的文本为文本框的内容//赋值td的标签体//id的tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);//文本节点td_id.appendChild(text_id);var td_name = document.createElement("td");var text_name = document.createTextNode(name);//文本节点td_name.appendChild(text_name);var td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);//文本节点td_gender.appendChild(text_gender);//a标签的tdvar td_a=document.createElement("td");var ele_a = document.createElement("a");//4.创建trvar tr = document.createElement("tr");//5.将td添加到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);//6.获取tr，将tr添加到table中var table = document.getElementsByTagName("table")[0];table.appendChild(tr);//javascript:void(0);ele_a.setAttribute("href","javascript:void(0);");var text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);tr.appendChild(td_a);}</script>
</body>
</html>
5.2删除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>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 id="table"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><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.创建tr5.将td添加到tr中6.获取tr，将tr添加到table中2.删除1.确定点击的是哪一个超链接，用id确定麻烦，可以加属性<a href="javascript:void(0);" onclick="delTr(this);">删除</a>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的文本为文本框的内容//赋值td的标签体//id的tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);//文本节点td_id.appendChild(text_id);var td_name = document.createElement("td");var text_name = document.createTextNode(name);//文本节点td_name.appendChild(text_name);var td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);//文本节点td_gender.appendChild(text_gender);//a标签的tdvar td_a=document.createElement("td");var ele_a = document.createElement("a");//4.创建trvar tr = document.createElement("tr");//5.将td添加到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);//6.获取tr，将tr添加到table中var table = document.getElementsByTagName("table")[0];table.appendChild(tr);//javascript:void(0);ele_a.setAttribute("href","javascript:void(0);");ele_a.setAttribute("onclick","delTr(this);");var text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);tr.appendChild(td_a);}//删除方法function delTr(obj) {//alert(obj);//代表当前超链接的对象var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}
</script>
</body>
</html>
6.HTML DOM
- HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
- document和Element对象已经介绍完毕
- 需要学习：
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制样式的设置
6.1 使用innerHTML设置和获取标签体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTMLDOM</title>
</head>
<body><div id="div1">div</div><script>var div1 = document.getElementById("div1");var innerHTML = div1.innerHTML;//alert(innerHTML);//标签体的内容//标签中替换一个文本输入框//div1.innerHTML = "<input type='text'>";//双引号可以嵌套单引号，单引号可以嵌套双引号，但是不能单引号嵌套单引号，双引号嵌套双引号//不能双双单单//给div标签中追加一个文本输入框div1.innerHTML += "<input type='text'>";</script>
</body>
</html>
案例4修改，不再是面向对象，但是变得简单了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>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 id="table"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><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.创建tr5.将td添加到tr中6.获取tr，将tr添加到table中2.删除1.确定点击的是哪一个超链接，用id确定麻烦，可以加属性<a href="javascript:void(0);" onclick="delTr(this);">删除</a>2.怎么去删除？removeChild()：通过父节点删除子节点* *///1.获取按钮//使用innerHTML添加，不面向对象，但是很简单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;//获取tabledocument.getElementsByTagName("table")[0];//为什么加0？//追加一行table.innerHTML +="<tr>\n" +" <td>"+id+"</td>\n" +" <td>"+name+"</td>\n" +" <td>"+gender+"</td>\n" +" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +" </tr>";}//删除方法function delTr(obj) {//alert(obj);//代表当前超链接的对象var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}
</script>
</body>
</html>
6.2 通过HTML DOM控制元素的样式
- 使用元素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;}.d1{border:2px solid blue;width:200px;height: 200px;}</style>
</head>
<body><div id="div1">div</div><div id="div2">div2</div><script>var div1 = document.getElementById("div1");div1.onclick = function () {//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size-->fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function () {div2.className = "d1";}</script>
</body>
</html>
四、事件☆(事件的监听机制)
1.概述
- 概念：某些组件被执行了某些操作后，触发了某些代码的执行
- 事件：某些操作，如单击onclick，双击，键盘按下，鼠标移动
- 事件源：component组件，如按钮，文本输入框……
- 监听器：js代码。
- 注册监听：将事件、事件源和监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码。
- 常见的事件
- 点击事件
- onclick：单击事件
- ondblclick：双击事件
- 焦点事件☆
- onblur：元素失去焦点
- onfocus：获得焦点
- 加载事件
- onload： 一张页面或一幅图像完成加载。
- 鼠标事件
- onmousedown：鼠标按钮被按下。
- onmousemove：鼠标被移动。
- onmouseout：鼠标从某元素移开。
- onmouseover：鼠标移到某元素之上。
- onmouseup：鼠标按键被松开。
- 键盘事件
- onkeydown 某个键盘按键被按下。
- onkeypress 某个键盘按键被按下并松开。
- onkeyup 某个键盘按键被松开。
- 选中和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
- 表单事件
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
2、常见事件演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见事件</title><script>/*常见的事件点击事件onclick：单击事件ondblclick：双击事件焦点事件☆onblur：元素失去焦点常用于表单校验onfocus：获得焦点加载事件onload： 一张页面或一幅图像完成加载。onload 事件会在页面或图像加载完成后立即发生。鼠标事件onmousedown：鼠标按钮被按下。定义方法时，定义一个形参，接收event对象event对象的button属性可以获取哪个鼠标按钮被点击了012onmousemove：鼠标被移动。onmouseout：鼠标从某元素移开。onmouseover：鼠标移到某元素之上。onmouseup：鼠标按键被松开。键盘事件onkeydown 某个键盘按键被按下。onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。选中和改变onchange 域的内容被改变。常用于select下拉列表onselect 文本被选中。表单事件onsubmit 确认按钮被点击。可以阻止表单的提交方法返回false则阻止表单提交onreset 重置按钮被点击。* *///2.加载完成事件 onloadwindow.onload = function () {//1.失去焦点事件//此时获取不到/*document.getElementById("username").onblur = function () {alert("失去焦点了");}//3.绑定鼠标事件，鼠标移动到元素之上onmouseoverdocument.getElementById("username").onmouseover = function () {alert("鼠标来了");}*///绑定鼠标点击事件/*document.getElementById("username").onmousedown= function () {alert("鼠标点击了");}*//*//判断点击的是左键还是右键document.getElementById("username").onmousedown= function (event) {alert(event.button);}*///判断点击的是左键还是右键/*document.getElementById("username").onkeydown= function (event) {//alert(event.keyCode);//回车是13if (event.keyCode==13){alert("提交成功");}}*///onchange/*document.getElementById("city").onchange= function () {alert("改变了");}*///表单onsubmitdocument.getElementById("form").onsubmit = function () {//校验用户名格式是否正确var flag = false;return flag;//根据返回值决定表单是否提交}}function checkForm(){return false;}/*function fun(){checkForm();}* */</script></head>
<body><!--<form action="#" method="post" onsubmit="checkForm()" id="form">--><!--<form action="#" method="post" id="form">--><form action="#" method="post" onclick="return checkForm()" id="form"><input id="username" ><br><select name="" id="city"><option value="">--请选择--</option><option value="">北京</option><option value="">上海</option><option value="">合肥</option></select><br><input type="submit" value="提交"></form></body>
</html>
3.案例1：表单全选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格全选</title><style>table{border: 1px solid;width: 500px;margin-left: 30%;}td,th{text-align: center;border: 1px solid;}div{margin-top: 10px;margin-left: 30%;}/*移出移入*/.over{background-color: pink;}.out{background-color: white;}</style><script>/*分析：1.全选获取所有的checkbox遍历cb，设置每一个cb的属性状态为选中 checked 设置或返回 checkbox 是否应被选中。* *///1.在页面加载完成之后绑定事件window.onload = function () {//2.给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function () {//获取所有的cbvar cbs = document.getElementsByName("cb");//遍历cb\for (var i =0; i<cbs.length;i++){//3.设置每一个cb的状态为选中cbs[i].checked=true;}}//全不选document.getElementById("unSelectAll").onclick = function () {//获取所有的cbvar cbs = document.getElementsByName("cb");//遍历cb\for (var i =0; i<cbs.length;i++){//3.设置每一个cb的状态为选中cbs[i].checked=false;}}//反选document.getElementById("selectRev").onclick = function () {//反选var cbs = document.getElementsByName("cb");//遍历cb\for (var i =0; i<cbs.length;i++){//3.设置每一个cb的状态为选中cbs[i].checked = !cbs[i].checked;}}//第一个被选中，其他的等于第一行的状态document.getElementById("firstcb").onclick = function () {//第一个var cbs = document.getElementsByName("cb");//遍历cb\//alert(this);for (var i =0; i<cbs.length;i++){//3.设置每一个cb的状态为第一个cb的状态cbs[i].checked = this.checked;}}//鼠标移入变红色，给鼠标移入和移出绑定事件var trs = document.getElementsByTagName("tr");//2.遍历 ctrl+j是查看所有快捷键for(var i = 0; i < trs.length; i++) {//移到元素之上trs[i].onmouseover = function () {this.className="over";}//移出元素trs[i].onmouseout = function () {this.className="out";}}}</script>
</head>
<body>
<table><caption>学生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstcb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);">删除</a></td></tr>
</table>
<div><input type="button" id="selectAll" value="全选"><input type="button" id="unSelectAll" value="全不选"><input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
4.案例：表单校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title><style>* {margin: 0px;padding: 0px;box-sizing: border-box;}body {background: url("img/register_bg.png") no-repeat center;padding-top: 25px;}.rg_layout {width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;/*让div水平居中*/margin: auto;}.rg_left {/*border: 1px solid red;*/float: left;margin: 15px;}.rg_left > p:first-child {color: #FFD026;font-size: 20px;}.rg_left > p:last-child {color: #A6A6A6;font-size: 20px;}.rg_center {float: left;/* border: 1px solid red;*/}.rg_right {/*border: 1px solid red;*/float: right;margin: 15px;}.rg_right > p:first-child {font-size: 15px;}.rg_right p a {color: pink;}.td_left {width: 100px;text-align: right;height: 45px;}.td_right {padding-left: 50px;}#username, #password, #email, #name, #tel, #birthday, #checkcode {width: 251px;height: 32px;border: 1px solid #A6A6A6;/*设置边框圆角*/border-radius: 5px;padding-left: 10px;}#checkcode {width: 110px;}#img_check {height: 32px;vertical-align: middle;}#btn_sub {width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}#td_sub{padding-left: 150px;}.error{color:red;vertical-align: middle;}</style><script>/*分析：1.给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果如果都为true，则监听器方法返回true如果有一个为false，则监听器方法返回false2.定义一些方法，分别校验各个表单项3.给各个表单项绑定onblur事件，离开就校验* */window.onload = function () {//1.给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果document.getElementById("form").onsubmit = function () {//调用用户名校验方法 checkUsername()//调用密码校验方法 checkPassword()return checkUsername() && checkPassword();}//给用户和密码框分别绑定离开焦点的时间document.getElementById("username").onblur =checkUsername;document.getElementById("password").onblur =checkPassword;}//校验用户名function checkUsername() {//1.获取用户名的值var username = document.getElementById("username").value;//2.定义正则表达式var reg_username = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_username.test(username);var s_username = document.getElementById("s_username");//4.提示信息if (flag){//提示绿色对勾s_username.innerHTML = "<img width='35px' height='25px' src='img/gou.png'>"}else{//提示红色用户名有误s_username.innerHTML = "用户名格式有误";}return flag;}//验证密码function checkPassword() {//1.获取用户名的值var password = document.getElementById("password").value;//2.定义正则表达式var reg_password = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_password.test(password);var s_password = document.getElementById("s_password");//4.提示信息if (flag){//提示绿色对勾s_password.innerHTML = "<img width='35px' height='25px' src='img/gou.png'>"}else{//提示红色用户名有误s_password.innerHTML = "密码格式有误";}return flag;}</script>
</head>
<body>
<div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="#" id="form" method="get"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"><span id="s_username" class="error"></span></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td></tr></table></form></div></div><div class="rg_right"><p>已有账号?<a href="#">立即登录</a></p></div>
</div>
</body>
</html>
来自为知笔记(Wiz)
JavaEE Day10 JavaScript高级相关推荐
- 《JavaScript高级程序设计（第3版）》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...
- 前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
- 《JavaScript高级程序设计》（第2版）上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写 了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...
- 攻下《JavaScript高级程序设计》——第二章 在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
- 《javascript高级程序设计》笔记：内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承 近几篇博客都会围绕着图中的知识点展开 由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
- 《javascript高级程序设计》笔记：变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境 上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
- javascript 高级程序设计_JavaScript 经典「红宝书」，几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
- 《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...
- 【读书笔记】JavaScript高级编程（二）
2019独角兽企业重金招聘Python工程师标准>>> 书中第3章 基本概念摘要(一) 3.3 变量 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在 ...
- JavaScript高级程序设计（第3版）非扫描版
前端学习js的红皮书 文档:JavaScript高级程序设计(第3版)非扫?.. 文档:JavaScript高级程序设计(第3版)非扫?.. 链接:http://note.youdao.com/not ...
最新文章
- Java面试宝典系列之基础面试题-常见的几种排序算法-插入、选择、冒泡、快排、堆排等
- 【uva 1617】Laptop（算法效率--贪心，2种理解）
- 背景色透明，里面内容（图片、文字）不透明
- opensource项目_Opensource.com 2015社区奖的获奖者
- 使用计算机在什么上传输,MODEM的作用是使计算机数据能在什么上传输
- C++11标准后的C++阅读书目
- 关闭tomcat8080端口
- 仿京东商城html网页源码
- 网易云音乐的所有歌手列表
- linux趋势防病毒软件进程,你了解linux的防病毒软件吗？你知道我说的不是防火墙...
- 浅谈浏览器的编码与解码过程
- 『解疑』vue修改html图标，tilte左边的图标（以图片格式作为图标）
- CPU内部原理，一文解析
- 计算机二级新年来临贺卡步骤,2021新年贺卡怎么做步骤图片
- 微信小程序注册提示邮箱已被占用
- 携手合作伙伴，傲腾技术加速释放数据中心潜能
- 2023年度流行色，带来信心的活力洋红色
- [Python] 散点图（二维散点图、三维散点图、散点图矩阵）
- java Pattern和Matcher详解
- 【软考】系统集成项目管理工程师（七）项目范围管理