前台技术学习5
JS中的DOM:为了满足案例的要求
功能：控制html文档内容 获取页面标签对象Element:document.getElementById():通过元素id获取对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="title">hello</h1> <script> var title = document.getElementById("title"); alert("结果如何"); title.innerHTML = "world"; </script> </body> </html>
事件绑定，用户通过它可以与页面交互
1、在html标签，指定事件属性，属性值为JS代码
2、通过JS获取元素对象，指定事件属性，设置函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> </head> <body> <img src="../img/xk1.jfif" id="k1"> <script> var k1 = document.getElementById("k1"); var flag = false; k1.onclick = function (){ if(flag){ k1.src = "../img/xk2.jfif"; flag = false; } else{ k1.src = "../img/xk3.jfif"; flag = true; } } </script> </body> </html>
window窗口对象
1、方法
* 1、与弹出框有关
* alert() 显示带有一段消息和一个确认按钮的警告框。
* confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。点击确定，会返回true,点击取消，会返回false
* prompt() 显示可提示用户输入的对话框。返回用户输入的内容
* 2、与页面打开关闭的方法
* open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
* close() 关闭浏览器窗口。他会关闭当前窗口
* 3、与定时器有关的方法
* setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
* setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
* clearInterval() 取消由 setInterval() 设置的 timeout。
* 2、属性
* 3、特点
* 1、对象不需创建，直接引用
* 2、window可以省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转首页</title> <style> p{ text-align: center; } span{ color: #1E9FFF; } </style> </head> <body> <p> <span id="time">5</span>秒之后，自动跳转首页 </p> <script> //倒计时读秒 var second = 5; function showtime(){ second --; if(second <= 0){ location.href = "https://www.baidu.com"; } var time = document.getElementById("time"); time.innerHTML = second; } setInterval(showtime,1000); </script> </body> </html>
Location地址栏对象
1、创建 window.location/location
* 2、方法
* assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
3、属性
herf 设置或返回完整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="btn1" value="百度"> <input type="button" id="btn2" value="新文档"> <script> var btn = document.getElementById("btn"); btn.onclick = function (){ location.reload(); } var href = location.href; var btn1 = document.getElementById("btn1"); btn1.onclick = function (){ location.href = "https:www.baidu.com"; } var btn2 = document.getElementById("btn2"); btn2.onclick = function (){ location.assign("https://www.w3school.com.cn/"); } </script> </body> </html>
history历史记录对象
1、创建：window.history/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> <style> div{ text-align: center; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="sex" placeholder="请输入性别"> <input type="button" id="btn_add" value="添加"> </div> <table align="center" border="1"> <caption>学生信息</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> </table> <script> //给按钮绑定单击事件 var btn_add = document.getElementById("btn_add"); btn_add.onclick = function (){ //获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var sex = document.getElementById("sex").value; //创建td,赋值td的标签体,td时文本框中的内容 var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.append(text_id); var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.append(text_name); var td_sex = document.createElement("td"); var text_sex = document.createTextNode(sex); td_sex.append(text_sex); var td_a = document.createElement("td"); var a = document.createElement("a"); a.setAttribute("href","javascript:void(0);"); a.setAttribute("onclick","delet(this)"); var a1 = document.createTextNode("删除"); a.appendChild(a1); td_a.appendChild(a); //创建tr,并添加td到tr中 var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_sex); tr.appendChild(td_a) //获取table var table = document.getElementsByTagName("table")[0]; table.append(tr); } function delet(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
