1.BOM
1.1概念
Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。
1.2.组成
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
1.3Window窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
返回值：获取用户输入的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> alert("hello world"); window.alert("你好世界"); var flag = confirm("确定退出吗？"); alert(flag) if(flag){ alert("再见"); }else { alert("欢迎再次光临"); } var name = prompt("请输入用户名"); alert(name); </script> </head> <body> </body> </html>
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
返回新的Window对象3. 与定时器有关的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> <script> var openBtn = document.getElementById("openBtn"); var newWindow; openBtn.onclick = function () { newWindow = open("https://www.baidu.com"); }; var closeBtn = document.getElementById("closeBtn"); closeBtn.onclick = function () { newWindow.close(); }; </script> </body> </html>
3.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //一次性定时器 // setTimeout("fun();",3000); //或者下面这种写法 var timeout = setTimeout(fun,3000); function fun() { alert("boom~~~"); } //循环定时器 var interval = setInterval(fun,2000); //取消定时器 clearTimeout(timeout); //取消循环定时器 clearInterval(interval); </script> </body> </html>
4.案例：轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> /*分析 1.在页面上使用img标签展示图片 2.定义一个方法修改图片的src 3.定义一个定时器，每隔三秒调用方法一次 */ //修改图片src属性 var number = 1; function fun() { number++; //判断number是否大于3 if (number > 3) number = 1; var img = document.getElementById("img"); img.src = "img/banner_" + number + ".jpg"; } //定义定时器 setInterval(fun,3000); </script> </body> </html>
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
1.4Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
reload()重新加载当前文档。刷新
3. 属性
href设置或返回完整的 URL。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="刷新"> <input type="button" id="goBaidu" value="去百度"> <script> //reload方法，定义一个按钮，点击按钮，刷新当前页面 //1.获取按钮 var btn = document.getElementById("btn"); //2.绑定单击事件 btn.onclick = function () { //3.刷新页面 location.reload(); }; //获取href var href = location.href; // alert(href); var goBaidu = document.getElementById("goBaidu"); goBaidu.onclick = function () { location.href = "https://www.baidu.com"; }; </script> </body> </html>
案例倒数数秒定时跳转：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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标签体内容，time--; 2.2定义一个定时器，一秒执行一次该方法。 3.在方法中判断，时间如果小于0，则跳转到首页 */ var second = 5; var time = document.getElementById("time"); function showTime() { second--; if (second <= 0) { location.href = "https://www.baidu.com"; } time.innerHTML = second + ""; } //设置定时器，1秒执行一次该方法 setInterval(showTime, 1000); </script> </body> </html>
1.5History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go(参数)加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
3. 属性：
length返回当前窗口历史列表中的 URL 数量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="获取历史记录个数"> <input type="button" id="forward" value="前进"> <a href="06自动跳转案例.html">06页面</a> <script> //1.获取按钮 var btn = document.getElementById("btn"); //2.绑定单机事件 btn.onclick = function () { //3.获取当前窗口历史记录个数 var length = history.length; alert(length); }; //1.获取按钮 var forward = document.getElementById("forward"); //2.绑定单机事件 forward.onclick = function () { history.forward(); } </script> </body> </html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.BOM编程
1.1入门
BOM就是浏览器对象模型编程，通过javascript引擎提供的四个浏览器对象，操作浏览器，这叫BOM编程。
1.2window对象（重点）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window对象</title> <script type="text/javascript"> /* open(): 在一个窗口中打开页面 setInterval(): 设置定时器（执行n次） setTimeout(): 设置定时器(只执行1次) clearInterval(): 清除定时器 clearTimeout(): 清除定时器 alert(): 提示框 confirm(): 确认提示框 propmt(): 输入提示框 注意： 因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。 */ function testOpen() { /* 参数一： 打开的页面 参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认） 参数三： 设置窗口参数。比如窗口大小，是否显示任务栏 */ window.open("http://www.baidu.com", "width=300px;height=300px;toolbar=0") } let taskId; function testInterval() { /* 定时器： 每隔n毫秒调用指定的任务（函数） 参数一：指定的任务（函数） 参数二：毫秒数 */ taskId = window.setInterval("testOpen()", 3000) } function testClearInterval() { /*清除任务 参数一：需要清除的任务ID */ window.clearInterval(taskId); } let toId; function testTimeout() { /*设置定时任务*/ toId = window.setTimeout("testOpen()", 3000); } function testClearTimeout() { window.clearTimeout(toId); } function testAlert() { window.alert("提示框"); } function testConfirm() { /* 返回值就是用户操作 true: 点击了确定 false： 点击了取消 */ let flag = window.confirm("确认删除吗？一旦删除不能恢复，请慎重！"); if (flag) { alert("确定删除，正在删除中...."); } else { alert("取消了操作"); } } function testPrompt(){ /* 输入提示框 */ let flag = window.prompt("请输入你的U顿密码"); if(flag){ alert("密码正确，转账中..."); }else{ alert("取消了操作"); } } </script> </head> <body> <input type="button" value="open()" onclick="testOpen()"/> <input type="button" value="setInteval()" onclick="testInterval()"/> <input type="button" value="clearInteval()" onclick="testClearInterval()"/> <input type="button" value="setTimeout()" onclick="testTimeout()"/> <input type="button" value="clearTimeout()" onclick="testClearTimeout()"/> <input type="button" value="alert()" onclick="testAlert()"/> <input type="button" value="confirm()" onclick="testConfirm()"/> <input type="button" value="prompt()" onclick="testPrompt()"/> </body> </html>
1.3location对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>location对象</title> <script type="text/javascript"> /* href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符 reload方法： 刷新当前页面 */ function testHref(){ //alert(window.location.href); /* 通过修改location对象的href属性来实现页面的跳转 */ window.location.href="http://www.baidu.com"; } function testReload(){ //刷新当前页面 window.location.reload(); } // function testRefresh(){ //定时刷新 window.setTimeout("testReload()",1000); // } </script> </head> <body> <input type="button" value="跳转" onclick="testHref()"/> <input type="button" value="实现定时刷新" onclick="testRefresh()"/> </body> </html>
1.4history对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>history对象</title> <script type="text/javascript"> /* forward(): 前进到下一页 back(): 后退上一页 go(): 跳转到某页（正整数：前进 负整数：后退） 1 -2 */ function testForward(){ //window.history.forward(); window.history.go(1); } </script> </head> <body> <a href="17history对象2.html">跳转到下一个页面</a> <br/> <input type="button" value="前进" onclick="testForward()"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>history对象</title> <script type="text/javascript"> function testBack(){ //window.history.back(); window.history.go(-1); } </script> </head> <body> 目标页面<br/> <input type="button" value="后退" onclick="testBack()"/> </body> </html>
1.5screen对象
screen对象代表是一个屏幕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>screen对象</title> <script type="text/javascript"> /* availHeight和availWidth是排除了任务栏之后的高度和宽度 */ document.write(window.screen.availWidth + "<br/>"); document.write(window.screen.availHeight + "<br/>"); document.write(window.screen.width + "<br/>"); document.write(window.screen.height + "<br/>"); </script> </head> <body> </body> </html>
2.事件编程
2.1 回顾javase的事件编程
GUI编程事件三个要素：
事件源： 按钮JButton JFrame
事件：KeyEvent WindowEvent
监听器：KeyListener WindowListener
GUI编程具体的步骤：
1）创建事件源
2）编程监听器
3）在事件源上注册监听器
javascript事件编程的三个要素：
1）事件源：html标签
2）事件 ：click dblclick mouseover。。。。
3）监听器： 函数
javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：
聚焦： onfocus
失去焦点： onblur
选项相关的：
改变选项： onchange
鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：
页面加载： onload
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件编程</title> <!-- 2)编程监听器（函数） --> <script type="text/javascript"> function test() { alert("触发了事件"); } </script> </head> <body> <!-- 1）事件源--> <input type="button" value="按钮" onclick="test()"/><!-- 3)注册监听器（函数）--> </body> </html>
2.2事件分类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件分类</title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: #00F; } </style> <script type="text/javascript"> /* 点击相关的： 单击： onclick 双击： ondblclick 焦点相关的： 聚焦： onfocus 失去焦点： onblur 选项相关的： 改变选项： onchange 鼠标相关的： 鼠标经过： onmouseover 鼠标移除： onmouseout 页面加载相关的： 页面加载： onload 这个事件是在加载完标签后再触发。通用用在body标签中，所以加载完body标签的内容触发。 */ function testClick() { alert("触发了单击事件"); } function testDblClick() { alert("触发了双击事件"); } function testFocus() { userName = document.getElementById("userName"); userName.value = ""; } function testBlur() { //获取用户输入内容 userName = document.getElementById("userName").value; //检查用户是否存在 //显示内容到span //获取到span userNameTip = document.getElementById("userNameTip"); if (userName == "eric") { userNameTip.innerHTML = "用户已经被占用，请更改!".fontcolor("red"); } else { userNameTip.innerHTML = "恭喜你，该用户可用！".fontcolor("green"); } } function testChange() { //alert("选项改变了"); //获取选中的内容 jiguan = document.getElementById("jiguan").value; //alert(jiguan); city = document.getElementById("city"); //每次先清空城市select的内容 city.innerHTML = ""; if (jiguan == "广东") { //把一些option选项放入到城市的select中 arr = ["广州", "珠海", "深圳"]; for (let i = 0; i < arr.length; i++) { city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>"; } } if (jiguan == "广西") { //把一些option选项放入到城市的select中 arr = ["柳州", "桂林", "南宁"]; for (i = 0; i < arr.length; i++) { city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>"; } } if (jiguan == "湖南") { //把一些option选项放入到城市的select中 arr = ["长沙", "湘潭", "郴州"]; for (i = 0; i < arr.length; i++) { city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>"; } } } function testOver() { alert("鼠标经过了div"); } function testOut() { alert("鼠标移除了dvi"); } // function testLoad() { // alert("触发了onload方法"); // } </script> </head> <body> <input type="button" value="单击" onclick="testClick()"/> <input type="button" value="双击" ondblclick="testDblClick()"/> <hr/> 请输入用户名：<input type="text" id="userName" value="4-12位字母或数字" onfocus="testFocus()" onblur="testBlur()"/><span id="userNameTip"></span> <hr/> 请选择籍贯 <!--onchange :表示这个select中的选项发送改变 --> <select onchange="testChange()" id="jiguan"> <option value="广东">广东</option> <option value="广西">广西</option> <option value="湖南">湖南</option> </select> 城市 <select id="city"> </select> <hr/> <div id="div1" onmouseover="testOver()" onmouseout="testOut()"></div> </body> </html>
3.DOM和事件简单学习
3.1DOM
功能：控制html文档的内容
代码：获取页面标签(元素)对象：Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象：
1.设置属性值
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2.修改标签体内容
属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- <img id="light" src="img/1.jpg"> <script> var light = document.getElementById("light"); alert("我要换图片了。。"); light.src="img/2.jpg"; </script>--> <img id="light" src="img/1.jpg"> <h1 id="title">你哈哈哈哈</h1> <script> //1.获取标签对象 var title = document.getElementById("title"); alert("我要换内容了"); title.innerHTML = "个人头像"; </script> </body> </html>
3.2概念
Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
3.3核心DOM模型
Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</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> //2.根据元素名称获取元素对象们 var divs = document.getElementsByTagName("div"); // alert(divs.length); //3.根据class属性获取元素对象们 var div_cls = document.getElementsByClassName("cls1"); // alert(div_cls.length); //4.根据name属性获取元素对象们 var div_name = document.getElementsByName("username"); // alert(div_name.length); </script> </body> </html>
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a>点我一下试试</a> <input type="button" id="btn_set" value="设置属性"> <input type="button" id="btn_remove" value="删除属性"> <script> 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"); }; 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>
Node：节点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
属性：
parentNode 返回节点的父节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</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> <!--超链接功能： 1.可以被点击：样式 2.点击后跳转到href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0);"--> <a href="javascript:void(0)" id="del">删除子节点</a> <a href="javascript:void(0)" id="add">添加子节点</a> <!--<input type="button" id="del" value="删除子节点">--> <script> var element_a = document.getElementById("del"); element_a.onclick = function () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); }; var element_add = document.getElementById("add"); element_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>
3.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" id="btn_add" value="添加"> </div> <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> </table> <script> /* 分析 1.添加 1.给添加按钮绑定单击事件 2.获取文本框的内容 3.创建td,设置td的文本框内容 4.创建tr 5.将td添加到tr中 6。获取table，将tr添加到table中 2.删除 1.确定点击的是哪一个超链接 <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> 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的文本框内容 var 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标签的td var td_a = document.createElement("td"); var element_a = document.createElement("a"); element_a.setAttribute("href", "javascript:void(0);"); element_a.setAttribute("onclick", "delTr(this);"); var text_a = document.createTextNode("删除"); element_a.appendChild(text_a); td_a.appendChild(element_a); //4.创建tr var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6。获取table，将tr添加到table中 var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); }; //删除方法 function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
3.5HTML的DOM
1. 标签体的设置和获取：innerHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> div </div> <script> var div = document.getElementById("div1"); // var innerHTML = div.innerHTML; // alert(innerHTML); div.innerHTML +="<input type='text'>" </script> </body> </html>
<!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" id="btn_add" value="添加"> </div> <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> </table> <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; var table = document.getElementsByTagName("table")[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) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1 { border: 1px solid red; width: 100px; height: 100px; } .d2 { border: 1px 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 () { //修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; div1.style.fontSize = "30px"; }; var div2 = document.getElementById("div2"); div2.onclick = function () { div2.className = "d1"; } </script> </body> </html>
3.2事件
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
如何绑定事件：
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun() { alert("我被点击了"); alert("我被点击了2222"); } </script> </head> <body> <img id="light" src="img/1.jpg" onclick="fun();"> </body> </html>
2. 通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="img/1.jpg"> <script> function fun() { alert("我被点击了"); alert("我被点击了2222"); } var light = document.getElementById("light"); light.onclick = fun; </script> </body> </html>
概念：某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
事件源：组件。如： 按钮 文本输入框...
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
一般用于表单校验
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove鼠标被移动。
4. onmouseover鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown某个键盘按键被按下。
2. onkeyup某个键盘按键被松开。
3. onkeypress某个键盘按键被按下并松开。
6. 选择和改变
1. onchange域的内容被改变。
2. onselect文本被选中。
7. 表单事件：
1. onsubmit确认按钮被点击。
2. onreset重置按钮被点击。
案例：表格全选和全不选
<!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 { margin-left: 32%; margin-top: 10px; } .out { background-color: white; } .over { background-color: pink; } </style> <script> window.onload = function () { //1.全选 document.getElementById("selectAll").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = true; } }; //2.全不选 document.getElementById("unSelectAll").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = false; } }; //3.反选 document.getElementById("selectRev").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = !cbs[i].checked; } }; //4.第一个cb document.getElementById("firstcb").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { //和第一个cb的状态相同 cbs[i].checked = this.checked; } }; //5.给所有tr绑定鼠标移动到元素之上事件 var trs = document.getElementsByTagName("tr"); 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);" onclick="delTr(this)">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>2</td> <td>小红</td> <td>女</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>3</td> <td>小刚</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</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>
案例：切换图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="img/1.jpg"> <script> //1.获取图片对象 var light = document.getElementById("light"); var flag = false; //2.绑定单击事件 light.onclick = function () { if(flag){ light.src = "img/2.jpg"; flag = false; }else { light.src = "img/1.jpg"; flag = true; } } </script> </body> </html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3.DOM编程
3.1 概念
DOM（document Object Model）文档对象模型编程。
3.2 查询标签对象
通过document对象获取，document代表一个html页面
3.2.1通过document对象的集合
作用： 获取多个或者同类的标签对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过document的集合获取标签对象</title> </head> <body> <a href=""></a> <form><img src=""/><a href=""></a><img src="" /></form> <form><img src=""/><a href=""></a></form> <script type="text/javascript"> /* all: 获取所有标签对象 forms： 获取form标签对象 images: 获取img标签对象 links: 获取a标签对象 */ nodeList = document.all; //返回标签对象数组 nodeList2 = document.forms; //返回标签对象数组 nodeList3 = document.images; //返回对象数组 nodeList4 = document.links;//返回对象数组 // alert(nodeList.length); //遍历标签对象 //nodeName：获取标签名称 for (let i = 0; i < nodeList.length; i++) { document.write(nodeList[i].nodeName + " "); } for (let i = 0; i < nodeList2.length; i++) { document.write(nodeList2[i].nodeName + " , "); } for (let i = 0; i < nodeList3.length; i++) { document.write(nodeList3[i].nodeName + " : "); } for (let i = 0; i < nodeList4.length; i++) { document.write(nodeList4[i].nodeName + " ! "); } </script> </body> </html>
3.2.2通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查询标签对象方法</title> <!-- 父节点： parentNode属性 子节点： childNodes属性 第一个子节点： firstChild属性 最后一个子节点： lastChild属性 下一个兄弟节点： nextSibling属性 上一个兄弟节点： previousSibling属性 注意： 1）childNodes属性,firstChild属性,lastChild属性获取的子节点包含了以下的元素： a)标签 1 b)空格换行 3 c)html注释 8 在子节点中筛选出标签出来呢？ 可以使用 nodeType属性： 节点类型 取出nodeType值为1的节点，就是标签对象 --> </head> <body> <form><a href="">超链接</a><!--html注释 --><input type="text"/><input type="button"/></form> <form><a href="">超链接</a><input type="type"/></form> </body> <script type="text/javascript"> //得到a标签（获取第一个a标签对象） aNode = document.links[0]; document.write(aNode.nodeName + "</br>"); //得到父标签 formNode = aNode.parentNode; document.write("父标签：" + formNode.nodeName + "</br>"); //得到form的子节点,返回数组 nodeList = formNode.childNodes; document.write("子节点的个数：" + nodeList.length); for (let i = 0; i < nodeList.length; i++) { //筛选出标签对象 document.write(nodeList[i].nodeName + "，节点类型：" + nodeList[i].nodeType + "<br/>"); } document.write("<br/>"); for (let i = 0; i < nodeList.length; i++) { //筛选出标签对象 if (nodeList[i].nodeType == 1) { document.write(nodeList[i].nodeName + "，节点类型：" + nodeList[i].nodeType + "<br/>"); } } //第一个子节点 firstChild = formNode.firstChild; document.write("第一个子节点：" + firstChild.nodeName + "<br/>"); //最后一个子节点 lastChild = formNode.lastChild; document.write("最后一个子节点: " + lastChild.nodeName + "<br/>"); aNode = document.links[1]; //得到下一个兄弟节点 next = aNode.nextSibling; document.write("下一个兄弟节点: " + next.nodeName + "<br/>"); //得到上一个兄弟节点 previous = next.previousSibling; document.write("上一个兄弟节点: " + previous.nodeName); </script> </html>
3.2.3通过document方法查询标签对象
document.getElementById("id属性值"); 最常用
documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
document.getElementsByTagName("标签名") 获取相同标签名的标签列表
3.3 修改标签对象属性
常用的需要修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html
innerText: 设置标签内容的文本
value属性： 修改value属性值。 input type="text"
src属性： 修改图片的src属性。 <img src=""/>
checked属性：修改单选或多项的默认值。 <input type="radio/checked" checked=""/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置标签对象的属性</title> <!-- 经常修改的属性： innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select> innerHTML : 设置的标签内的html代码 value属性： 修改value属性值。 input type="text" src属性： 修改图片的src属性。 <img src=""/> checked属性：修改单选或多项的默认值。(选择的当前状态) <input type="radio/checked" checked=""/> false: 没选中 true： 已选中 --> </head> <body> <span id="mySpan"></span> <hr/> <input type="text" id="userName" value="4-12位字母或数字"/> <hr/> <img src="../picture/1.jpg" width="300px" height="200px"/><input type="button" value="切换图片" onclick="changeImg()"/> <hr/> <input type="button" value="全选" onclick="quanxuan()"/> <input type="checkbox" value="篮球" name="hobit"/>篮球 <input type="checkbox" value="足球" name="hobit"/>足球 <input type="checkbox" value="羽毛球" name="hobit"/>羽毛球 </body> <script type="text/javascript"> //获取span标签对象 mySpan = document.getElementById("mySpan"); //设置标签内的HTML内容， 在IE和火狐可以 mySpan.innerHTML = "<h3>标题</h3>"; /*innerText在IE可以，在火狐不行*/ // mySpan.innerText="标签"; //获取input对象 userName = document.getElementById("userName"); userName.value = ""; function changeImg() { //得到标签对象 img = document.getElementsByTagName("img")[0]; img.src = "../picture/qq.jpg"; } function quanxuan() { // lq = document.getElementsByName("hobit")[0]; //alert(lq.checked); //设置状态 // lq.checked = true; hList = document.getElementsByName("hobit"); for (i = 0; i < hList.length; i++) { hList[i].checked = true; } } </script> </html>
3.4 标签对象方法
添加相关的：
document.createElement("标签名") 创建节点对象
setAttribute("name","value"): 设置节点的属性
插入相关的：
appendChild("标签对象") ; 添加子节点对象
insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象
删除：
removeChild("标签对象"); 删除子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签对象的方法</title> <!-- 添加相关的： document.createElement("标签名") 创建节点对象 setAttribute("name","value"): 设置节点的属性 插入相关的： appendChild("标签对象") ; 添加子节点对象 insertBefore("新标签对象","指定的对象") 在指定的对象前面添加子节点对象 删除： removeChild("标签对象"); 删除子节点 --> <script type="text/javascript"> //添加按钮 function addItem() { //1.创建一个按钮对象 let input = document.createElement("input"); // <input /> //2.设置属性 input.setAttribute("type", "button"); // <input type="button"/> input.setAttribute("value", "新按钮"); // <input type="button" value="新按钮"/> //3.在html页面中插入这个新建的按钮对象 //3.1 得到body对象 let bodyNode = document.getElementsByTagName("body")[0]; //3.2 把新的按钮对象加入到body对象的子节点中(加到最后一个) bodyNode.appendChild(input); /* //3.3 把新的按钮对象加入到btn按钮的前面 var btn = document.getElementById("btn"); //参数一： 新的对象 参数二： 插入到前面的对象 bodyNode.insertBefore(input,btn); */ } function delItem() { //找到需要删除的节点对象 //获取最后一个子标签 let bodyNode = document.getElementsByTagName("body")[0]; let lastChild = bodyNode.lastChild; //删除子标签 bodyNode.removeChild(lastChild); } </script> </head> <body> <input type="button" value="添加" onclick="addItem()"/><input type="button" value="删除" onclick="delItem()"/><input id="btn" type="button" value="按钮"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <script type="text/javascript"> let count = 2; function addItem(){ /* <tr> <td>1</td> <td><input type="text"/></td> <td><input type="password"/></td> </tr> */ //1.创建tr对象 let tr = document.createElement("tr"); //2.创建三个td对象 let td1 = document.createElement("td"); td1.innerHTML = count; let td2 = document.createElement("td"); let input1 = document.createElement("input"); input1.setAttribute("type","text"); //把input放入td中 td2.appendChild(input1); let td3 = document.createElement("td"); let input2 = document.createElement("input"); input2.setAttribute("type","password"); //把input放入td中 td3.appendChild(input2); //3.把三个td放入tr中 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); //4.把tr放在tbody的子节点 let tbody = document.getElementsByTagName("tbody")[0]; tbody.appendChild(tr); count++; } function delItem(){ if(count>2){ //查找需要删除的节点 //tbody最后一个子节点 let tbody = document.getElementsByTagName("tbody")[0]; let lastChild = tbody.lastChild; tbody.removeChild(lastChild); count--; } } </script> </head> <body> <table border="1" align="center" width="400px"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text"/></td> <td><input type="password"/></td> </tr> </tbody> <tfoot> <tr> <td colspan="3"><input type="button" value="添加一行" onclick="addItem()"/><input type="button" value="删除一行" onclick="delItem()"/></td> </tr> </tfoot> </table> </body> </html>
