15.JavaScript——34——JavaScript高级
2024-06-12 03:46:29
文章目录
- DOM简单学习：为了满足案例要求
- DOM树
- 事件简单学习
- 功能
- 如何绑定事件
- 案例1：电灯开关
- BOM:
- 概念：Browser Object Model 浏览器对象模型
- 组成：
- Window：窗口对象
- 案例2：轮播图
- Location：地址栏对象
- 案例3：自动跳转
- History：历史记录对象
- DOM：
- 概念： Document Object Model 文档对象模型
- W3C DOM 标准被分为 3 个不同的部分：
- 核心DOM模型：
- Document：文档对象
- Element：元素对象
- Node：节点对象，其他5个的父对象
- 案例4：动态表格
- HTML DOM
- 事件监听机制：
- 案例5：表格全选
- 案例6：表单校验
DOM简单学习：为了满足案例要求
DOM树
* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element* document.getElementById("id值"):通过元素的id获取元素对象* 操作Element对象：1. 修改属性值：1. 明确获取的对象是哪一个？2. 查看API文档，找其中有哪些属性可以设置2. 修改标签体内容：* 属性：innerHTML1. 获取元素对象2. 使用innerHTML属性修改标签体内容
<body><img id="light" src="img/off.gif"><h1 id="title">悔创阿里杰克马</h1>
<script>//通过id获取元素对象var light = document.getElementById("light");alert("我要换图片了。。。");light.src = "img/on.gif";/* //1.获取h1标签对象var title = document.getElementById("title");alert("我要换内容了。。。");//2.修改内容title.innerHTML = "不识妻美刘强东";*/
</script>
</body>
事件简单学习
功能
某些组件被执行了某些操作后，触发某些代码的执行。* 造句： xxx被xxx,我就xxx* 我方水晶被摧毁后，我就责备对友。* 敌方水晶被摧毁后，我就夸奖自己。
如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码1. 事件：onclick--- 单击事件2. 通过js获取元素对象，指定事件属性，设置一个函数
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>function fun(){alert('我被点了');alert('我又被点了');}function fun2(){alert('咋老点我？');}//1.获取light2对象var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;
</script>
</body>
案例1：电灯开关
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>电灯开关</title>
</head>
<body> <img id="light" src="img/off.gif"> <script>var light = document.getElementById("light"); var flag = false;//代表灯是灭的。 off图片 light.onclick = function(){if(flag){//判断如果灯是开的，则灭掉light.src = "img/off.gif";flag = false; }else{//如果灯是灭的，则打开 light.src = "img/on.gif";flag = true;} } </script>
</body>
</html>
BOM:
概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
组成：
* Window：窗口对象* Navigator：浏览器对象* Screen：显示器屏幕对象* History：历史记录对象* Location：地址栏对象
Window：窗口对象
1. 创建2. 方法1. 与弹出框有关的方法：alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮，则方法返回true* 如果用户点击取消按钮，则方法返回falseprompt() 显示可提示用户输入的对话框。* 返回值：获取用户输入的值2. 与打开关闭有关的方法：close() 关闭浏览器窗口。* 谁调用我 ，我关谁open() 打开一个新的浏览器窗口* 返回新的Window对象3. 与定时器有关的方式setTimeout() 在指定的毫秒数后调用函数或计算表达式。* 参数：1. js代码或者方法对象2. 毫秒值* 返回值：唯一标识，用于取消定时器clearTimeout() 取消由 setTimeout() 方法设置的 timeout。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。3. 属性：1. 获取其他BOM对象：historylocationNavigatorScreen:2. 获取DOM对象document4. 特点* Window对象不需要创建可以直接使用 window使用。 window.方法名();* window引用可以省略。 方法名();
<script>
var flag = confirm("您确定要退出吗？");
if(flag){//退出操作alert("欢迎再次光临！");
}else{//提示：手别抖...alert("手别抖...");
}
var result = prompt("请输入用户名");
alert(result); //打开新窗口
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();
} //setTimeout("fun();",2000);//代码片段
var id = setTimeout(fun,2000);//方法对象
clearTimeout(id);
function fun(){alert('boom~~');
}
var id = setInterval(fun,2000);
clearInterval(id); var h1 = window.history;
var h2 = history;
var openBtn = window.document.getElementById("openBtn");
alert(openBtn);
/*document.getElementById("");*/
</script>
案例2：轮播图
<script>
//修改图片src属性var number = 1;function fun(){number ++ ;//判断number是否大于3if(number > 3){number = 1;}//获取img对象var img = document.getElementById("img");img.src = "img/banner_"+number+".jpg";}//2.定义定时器setInterval(fun,3000);
</script>
Location：地址栏对象
1. 创建(获取)：1. window.location2. location2. 方法：* reload() 重新加载当前文档。刷新3. 属性* href 设置或返回完整的 URL。
<body><input type="button" id="btn" value="刷新"><input type="button" id="goItcast" value="去传智"><script>var btn = document.getElementById("btn");btn.onclick = function(){location.reload();}//获取hrefvar href = location.href ;var goItcast = document.getElementById("goItcast");goItcast.onclick = function(){//3.去访问www.itcast.cn官网location.href = "https://www.baidu.com";}</script>
</body>
案例3：自动跳转
<body><p><span id="time">5</span>秒之后，自动跳转到首页...</p><script>var second = 5;var time = document.getElementById("time");function showTime(){second -- ;if(second <= 0){//跳转到首页location.href = "https://www.baidu.com";}time.innerHTML = second +"";}setInterval(showTime,1000);</script>
</body>
History：历史记录对象
1. 创建(获取)：1. window.history2. history2. 方法：* back() 加载 history 列表中的前一个 URL。* forward() 加载 history 列表中的下一个 URL。* go(参数) 加载 history 列表中的某个具体页面。* 参数：* 正数：前进几个历史记录* 负数：后退几个历史记录3. 属性：* length 返回当前窗口历史列表中的 URL 数量。
<body><input type="button" id="btn" value="获取历史记录个数"><a href="09_History对象2.html">09页面</a><input type="button" id="forward" value="前进">
<script>var btn = document.getElementById("btn");btn.onclick = function(){var length = history.length;alert(length);}var forward = document.getElementById("forward");forward.onclick = function(){// history.forward();history.go(1);}var back = document.getElementById("back");back.onclick = function(){//后退// history.back();history.go(-1);}
</script>
</body>
DOM：
概念： Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分：
* 核心 DOM - 针对任何结构化文档的标准模型* Document：文档对象* Element：元素对象* Attribute：属性对象* Text：文本对象* Comment:注释对象* Node：节点对象，其他5个的父对象* XML DOM - 针对 XML 文档的标准模型* HTML DOM - 针对 HTML 文档的标准模型
核心DOM模型：
Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法：1. 获取Element对象：1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象：createAttribute(name)createComment()createElement()createTextNode()3. 属性
var table = document.createElement("table");
Element：元素对象
1. 获取/创建：通过document来获取和创建2. 方法：1. removeAttribute()：删除属性2. setAttribute()：设置属性
<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(){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(){var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}
</script>
</body>
Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点* 方法：* CRUD dom树：* appendChild()：向节点的子节点列表的结尾添加新的子节点。* removeChild() ：删除（并返回）当前节点的指定子节点。* replaceChild()：用新节点替换一个子节点。* 属性：* parentNode 返回节点的父节点。
<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.可以被点击：样式2.点击后跳转到href指定的url需求：保留1功能，去掉2功能实现：href="javascript:void(0);"*/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");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>
案例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>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>/*分析：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 的 tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name 的 tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender 的 tdvar 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");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.创建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.获取tablevar 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;//获取tablevar 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>
HTML DOM
1. 标签体的设置和获取：innerHTML2. 使用html元素对象的属性3. 控制元素样式1. 使用元素的style属性来设置如：//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}
<body><div id="div1">div</div><script >var div = document.getElementById("div1");var innerHTML = div.innerHTML;//alert(innerHTML);//div标签中替换一个文本输入框// div.innerHTML = "<input type='text'>";//div标签中追加一个文本输入框div.innerHTML += "<input type='text'>";</script>
</body>
事件监听机制：
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了* 事件源：组件。如： 按钮 文本输入框...* 监听器：代码。* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。* 常见的事件：1. 点击事件：1. onclick：单击事件2. ondblclick：双击事件2. 焦点事件1. onblur：失去焦点* 一般用于表单验证2. onfocus:元素获得焦点。3. 加载事件：1. onload：一张页面或一幅图像完成加载。4. 鼠标事件：1. onmousedown 鼠标按钮被按下。* 定义方法时，定义一个形参，接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。2. onmouseup 鼠标按键被松开。3. onmousemove 鼠标被移动。4. onmouseover 鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。5. 键盘事件：1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。6. 选择和改变1. onchange 域的内容被改变。2. onselect 文本被选中。7. 表单事件：1. onsubmit 确认按钮被点击。* 可以阻止表单的提交* 方法返回false则表单被阻止提交。2. onreset 重置按钮被点击。
<script>//2.加载完成事件 onloadwindow.onload = function(){document.getElementById("username").onblur = function(){}document.getElementById("username").onmouseover = function(){}document.getElementById("username").onmousedown = function(event){alert(event.button);}document.getElementById("username").onkeydown = function(event){if(event.keyCode == 13){ alert("提交表单"); }}document.getElementById("city").onchange = function(event){ }document.getElementById("form").onsubmit = function(){//校验用户名格式是否正确var flag = false;return flag;}}function checkForm(){return true;}
</script>
<body>
<!--function fun(){return checkForm();}-->
<form action="#" id="form" onclick="return checkForm();"><input name="username" id="username"><select id="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option></select><input type="submit" value="提交">
</form>
</body>
案例5：表格全选
<script>//1.在页面加载完后绑定事件window.onload = function(){document.getElementById("selectAll").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = true;}}document.getElementById("unSelectAll").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = false;}}document.getElementById("selectRev").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = !cbs[i].checked;}}document.getElementById("firstCb").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = this.checked;}}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>
案例6：表单校验
<script>window.onload = function(){//1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function(){return checkUsername() && checkPassword();}document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}function checkUsername(){var username = document.getElementById("username").value;var reg_username = /^\w{6,12}$/;var flag = reg_username.test(username);var s_username = document.getElementById("s_username");if(flag){s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{s_username.innerHTML = "用户名格式有误";}return flag;}function checkPassword(){var password = document.getElementById("password").value;var reg_password = /^\w{6,12}$/;var flag = reg_password.test(password);var s_password = document.getElementById("s_password");if(flag){s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{s_password.innerHTML = "密码格式有误";}return flag;}
</script>
15.JavaScript——34——JavaScript高级相关推荐
- JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
目 录 前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础 学习地址 学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...
- 【JavaWeb】JavaScript基础篇+高级篇
文章目录 1 介绍 2 ECMAScript 2.1 基本语法 2.2 基本对象 3 BOM 3.1 window窗口对象 3.2 location地址栏对象 3.3 history历史记录对象 4 ...
- JavaScript 59 JavaScript 常见错误
JavaScript 文章目录 JavaScript 59 JavaScript 常见错误 59.1 意外使用赋值运算符 59.2 期望松散的比较 59.3 令人困惑的加法和级联 59.4 令人误解的 ...
- JavaScript教程--[JavaScript]
要在你的网页中使用 JavaScript ,你首先必须要知道该将它放在哪儿.其实很简单,只要在你的网页(HTML文件)中插入 <SCRIPT> 和 </SCRIPT> 标记对, ...
- php javascript对象,JavaScript 对象
JavaScript 对象 JavaScript 对象是拥有属性和方法的数据. 真实生活中的对象,属性和方法 真实生活中,一辆汽车是一个对象. 对象有它的属性,如重量和颜色等,方法有启动停止等: 对象 ...
- JavaScript（三）—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象
本篇为 JavaScript 系列笔记第三篇,将陆续更新 JavaScript(一)-- 初识JavaScript/注释/输入输出语句/变量/数据类型 JavaScript(二)-- JavaScri ...
- 精通javascript、javascript语言精粹读书笔记
于是选择两本书做最后的冲刺: 精通javascript(jquery之父著作),javascript语言精粹.希望我也能成为一个javascript的好手. Dom Elements的属性 精通jav ...
- JavaScript 30 JavaScript 日期格式
JavaScript 文章目录 JavaScript 30 JavaScript 日期格式 30.1 JavaScript 日期输出 30.2 JavaScript ISO 日期 30.3 ISO 日 ...
- JavaScript 入门教程||javascript 简介||JavaScript 用法
javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScrip ...
最新文章
- 三角测量计算三维坐标的代码_浅谈三维扫描仪的由来
- Android Framework------之Property子系统
- 2017年关于数据科学的六大预言
- openfiler的iSCSI配置(二)
- 王炸吐血整理60个Redis面试题,全网最全了
- nano-pc-t1 4412 显示驱动分析
- 神经网络与深度学习——TensorFlow2.0实战(笔记)(四)(python列表与元组)
- C/C++只做经典编程语言
- 更改当前数据库的所有者
- python内置数据结构_Python内置数据结构（一）
- 圈圈教你学USB第一章
- 电商后台管理系统项目总结（一）
- 计量数据分析数据库-计量分析资料大全空间计量分析资料大全
- Java初学者 搭建Java 开发环境
- 用友t6请先设置文件服务器,用友T6-餐饮管理软件标准版发版说明
- 人们对人工智能的看法（消极篇）
- 大话信号与系统 --- 奇文共欣赏
- java线程池的应用_Java线程池的使用
- 利用aspose-words直接将Word转化为图片
- 你所不知道的肠道菌群