js的基础知识
Posted 小强灰灰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的基础知识相关的知识，希望对你有一定的参考价值。
一、js的语法
略
二、BOM对象
BOM是浏览器对象模型，可以对浏览器窗口进行访问和操作。BOM是js和浏览器对话的工具。
1、window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
2、History对象
History对象是window对象的一部分，可通过window.history属性来进行访问，它包含用户访问过的url
常用方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
3、Location对象
Location对象包含当前用户的url信息，是window对象的一部分，可通过window.location属性来访问
Location对象方法：
location.assign(URL) location.reload() location.replace(newURL)//注意与assign的区别
三、DOM对象
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 html 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
- 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
1、DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
2、节点属性：
- attributes 节点的属性节点
- nodeType 节点类型
- nodeValue 节点值
- nodeName 节点名称
- innerHTML 节点的文本值
3、导航属性：
- parenteNode 节点的父节点（要记住的）
- firstChild 节点下第一个子元素
- lastChild 节点下最后一个子元素
- childNodes 节点的子节点
推荐的导航属性：
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
4、HTML DOM Event事件
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
事件绑定的两种方式：
1 第一种绑定方法 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <input type="button" onclick="myevent()" value="点我"> 10 </body> 11 <script> 12 function myevent() { 13 alert("第一种绑定") 14 } 15 </script> 16 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" class="mytest" value="点我"> 9 </body> 10 <script> 11 var ele = document.getElementsByClassName("mytest")[0]; 12 ele.onclick=function () { 13 alert("第二种绑定方式"); 14 }; 15 </script> 16 </html>
onload:
onload 属性开发中只给body元素加。
这个属性的触发标志着页面内容呗加载完成。
应用场景：当我们希望页面加载完执行，那么我们可以使用该事件属性。
onsubmit：
是当表单在提交时触发，该属性也只能应用给form元素。
应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form id="form"> 9 <input type="text"> 10 <input type="submit" value="提交"> 11 </form> 12 </body> 13 <script> 14 var ele = document.getElementById("form") 15 ele.onsubmit=function (e) { 16 alert("验证失败 表单不往后台发"); 17 e.preventDefault(); 18 } 19 </script> 20 </html>
Event对象
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行。event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数。我们获得仅仅需要接收一下即可。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .outdiv{ 8 width: 300px; 9 height: 100px; 10 background-color: blueviolet; 11 } 12 .indiv{ 13 width: 50px; 14 height:50px; 15 background-color: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="outdiv"> 21 <div class="indiv"> 22 23 </div> 24 </div> 25 </body> 26 <script> 27 var ele= document.getElementsByClassName("indiv")[0] 28 var ele2 = document.getElementsByClassName("outdiv")[0] 29 ele.onclick=function (e) { 30 alert("内标签的事件") 31 e.stopPropagation(); 32 } 33 ele2.onclick=function () { 34 alert("外标签事件") 35 } 36 </script> 37 </html>
node的增删改
增：
createElement(name)创建元素
appendChild();元素添加
删：
先获得父标签，然后通过方法
removeChild()来删除
改：
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
5、修改HTML DOM
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
document.getElementById("p2").style.color="blue"
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
四、几个练习的例子
1、模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态对话框练习</title> 6 <style> 7 .total_window{ 8 width: 500px; 9 height: 500px; 10 background-color: aqua; 11 } 12 .hide_window{ 13 position: fixed; 14 top: 7px; 15 left: 7px; 16 width: 500px; 17 height: 500px; 18 background-color: coral; 19 opacity: 0.6; 20 } 21 .hide{ 22 display: none; 23 } 24 .child_window{ 25 float: left; 26 width: 150px; 27 height: 150px; 28 top: 50%; 29 left: 50%; 30 margin-left: 100px; 31 margin-top: 100px; 32 background-color: gold; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="total_window"> 38 <button onclick="window_show()">出现对话框</button> 39 </div> 40 <div class="hide_window hide"> 41 <div class="child_window"> 42 <button onclick="window_hide()">隐藏对话框</button> 43 </div> 44 45 </div> 46 47 </body> 48 <script> 49 var ele = document.getElementsByClassName("hide_window")[0] 50 function window_show() { 51 ele.classList.remove("hide") 52 } 53 function window_hide() { 54 ele.classList.add("hide") 55 } 56 </script> 57 </html>
2、全选反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="select_all()">全选</button> 9 <button onclick="select_cancel()">取消</button> 10 <button onclick="select_reverse()">反选</button> 11 12 <table border="1" id="Table"> 13 <tr> 14 <td><input type="checkbox"></VSCode自定义代码片段9——JS中的面向对象编程