JavaScript:对象
一. DOM:文件对象模型
作用:控制HTML页面中的元素内容
1.获取元素对象: var 标签对象名 = document.getElementbyId(“标签值”)
2.获得属性: 标签对象名.属性
3.修改属性: 重新赋值即可
4.修改标签体
对象名.innerHTML = 新的标签体
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM的简单学习</title>
</head>
<body>
<h1 id="title">开,关灯泡</h1>
<img id="light" src="img/off.gif" />
</body>
<!-- 以下两段js程序 不能写在对应标签的上面-->
<script>
// 调用document对象的getElementById()方法获得标签对象
var light = document.getElementById("light");
alert("我要修改图片了..");
alert(light.src);
// 通过对象获得属性
light.src = "img/on.gif";
</script>
<!--<script>-->
<!-- // 调用document对象的getElementById()方法获得标签对象-->
<!-- var title = document.getElementById("title");-->
<!-- alert("我要修改标题了..");-->
<!-- // 通过对象获得标签体-->
<!-- alert(title.innerHTML);-->
<!-- // 通过对象修改标签体-->
<!-- title.innerHTML = "灯泡";-->
<!--</script>-->
</html>
二. 事件:某些组件需要某种指令,才能触发执行代码
-
给HTML标签绑定事件:
方式一:直接给HTML标签指定事件属性,属性即为js代码
<img id="light01" src="img/off.gif" onclick="alert('我被点击了');"/>方式二:在js中定义函数,获得标签对象,然后把函数作为属性赋值给标签对象的时间属性
<body> <h1 id="title">开,关灯泡</h1> <img id="light01" src="img/off.gif" onclick="alert('我被点击了');"/> <img id="light02" src="img/off.gif"/> </body> <!-- 以下两段js程序 不能写在对应标签的上面--> <script> // 定义函数 function fun(){ alert("我被点击了.."); } // 根据id得到标签对象 var light02 = document.getElementById("light02"); // 给标签对象绑定 点击事件,点击该标签时会自动调用fun函数 light02.onclick = fun; </script>- 案例:电灯开关
<title>电灯开关</title> <script> var flag = false; //代表灯泡关闭 function fun(){ var light = document.getElementById("light"); if(flag){ light.src = "img/off.gif" flag = false; }else{ light.src = "img/on.gif" flag = true; } } </script>
三. BOM:浏览器对象
-
Window:窗口对象
不需要创建对象,可以直接通过window.方法名()的方式调用方法,通常window可以省略
方法:
closed 返回窗口是否已被关闭。 open() 打开一个个新的浏览器窗口 * 返回新的Window对象 prompt() 显示可提示用户输入的对话框。 alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 案例:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window对象-打开和关闭窗口的方法</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 () { // 打开了一个新的空白窗口,返回一个新窗口对象 // open(); // 在新窗口里打开指定网址的页面 newWindow = open("https://www.baidu.com") }; var closeBtn = document.getElementById("closeBtn"); closeBtn.onclick = function () { // close(); // 关闭当前窗口,谁调用我,就关闭谁 // 关闭新打开的窗口,这里的window是被新打开的窗口 newWindow.close(); }; </script> </body> </html>定时器:
-
setTimeout() 在指定的毫秒数后调用函数或计算表达式。它有两个参数
* 参数：
参数1: js代码或者方法对象
参数2: 毫秒值
* 返回值：唯一标识，用于取消定时器
-
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
-
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
-
clearInterval() 取消由 setInterval() 设置的 timeout。
<script> // 设置 一次性定时器 // 第一个参数是js代码 // setTimeout("alert('快跑,炸弹快爆炸了!!');", 2000); function fun(){ alert("快跑,炸弹快爆炸了!!"); } // 第一个参数是在调用函数的代码 // setTimeout("fun();", 2000); // 第一个参数是一个函数对象,返回的是定时器的唯一标识,取消定时器时可以使用 // var id = setTimeout(fun, 2000); // 取消定时器 // clearTimeout(id); // setInterval(fun, 2000): 循环定时,每个指定的时间重新执行一次 // 参数的传递与setTimeout()方法一样 // 返回的是定时器的唯一标识,取消定时器时可以使用 var id = setInterval(fun, 2000); // 取消定时器,与clearTimeout(id)的作用类似 clearInterval(id); </script>
案例:轮播图片
<body> <!--1.在页面使用img标签展示一张图片,并未标签指定id --> <img id="bannerpic" src="img/banner_1.jpg" /> <script> /* 1.在页面使用img标签展示一张图片,并未标签指定id 2.定义一个方法,修改img标签的src属性值 3.每隔2秒调用一次这个方法 */ // 2.定义一个方法,修改img标签的src属性值 // 表示图片名称结尾的那个数字 var number = 1; function updateSrc(){ if(number > 3){ number = 1; } var bannerpic = document.getElementById("bannerpic"); bannerpic.src = "img/banner_"+number+".jpg"; number ++; } // 3.每隔2秒调用一次这个方法 setInterval(updateSrc, 2000); </script> </body> -
-
History: 历史记录对象
<body> <input type="button" value="返回" onclick="back();"/> <input type="button" value="前进" onclick="forward();"/> <input type="button" value="获得显示器的宽高" onclick="getInfo();"/> <script> function back() { // 回退到前一个页面 window.history.back(); } function forward() { // 前进一个页面 window.history.forward(); } function getInfo() { // 获得显示器屏幕的高 alert(window.screen.height); // 获得显示器屏幕的宽 alert(window.screen.width); } </script> </body> -
Location: 地址栏对象
方法: reload() 重新加载当前页面-刷新页面.
属性: href : 完整的url地址. 给href 重新赋值 表示重新设置url地址,即跳转到url对应的新页面.
案例:自动跳转首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转到首页</title> <style> p{ text-align: center; } span{ color:red; } </style> </head> <body> <!--1.在页面中显示倒计时文字--> <p> <span id="timeSpan">5</span>秒钟后自动跳转到友信首页... </p> <script> /* 1.在页面中显示倒计时文字 2.定义一个方法,获取时间,修改时间 3.每隔1秒调用一次setTime()方法 */ // 2.定义一个方法,获取时间,修改时间 var number = 5; var timeSpan = document.getElementById("timeSpan"); function setTime(){ if(number <= 0){ location.href = "http://www.ityouxin.com"; } timeSpan.innerHTML = number; number --; } // 3.每隔1秒调用一次setTime()方法 setInterval(setTime, 1000); </script> </body> </html>
四. DOM:Document Object Model 文档对象模型
1.1. 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CURD的动态操作
1.2. 核心 DOM - 针对任何结构化文档的标准模型
-
Document：文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment:注释对象
-
Node：节点对象，其他5个的父对象
-
核心DOM模型:document
方法：
-
获取Element对象：
- getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
-
创建其他DOM对象(查看XML DOM教程)：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
-
Element：元素对象
- 获取/创建：通过document来获取和创建
- 方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
-
Node：节点对象，其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：
- CRUD dom树：
- appendChild()：向节点的子节点列表的结尾添加新的子节点。
- removeChild() ：删除（并返回）当前节点的指定子节点。
- replaceChild()：用新节点替换一个子节点。
4. 属性：
* parentNode 返回节点的父节点。3.示例代码:
<!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">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <!--<input type="button" id="del" value="删除子节点">--> <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.获取超链接 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); } /* 超链接功能： 1.可以被点击：样式 2.点击后跳转到href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0);" */ var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1); </script> </body> </html>
4.HTML DOM
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”; - 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置
5. 示例代码:
<!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>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. 创建tr 5. 将td添加到tr中 6. 获取table，将tr添加到table中 2.删除： 1.确定点击的是哪一个超链接 <a href="javascript:void(0);" οnclick="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的标签体 //id 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td 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 ele_a = document.createElement("a"); 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); //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 var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); }*/ //使用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; //获取table 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);\" οnclick=\"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> -
-
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
