JavaScript
一. JavaScript
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
a. JavaScript的引入方式
#直接编写
<script>
alert('hello yuan')
</script>
#导入文件
<script src="hello.js"></script>
三. BOM对象
a. window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1{ width:200px; height:50px; } </style> </head> <body> <input type="text" id="id1" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime() { var current_time=new Date().toLocaleString(); var ele=document.getElementById("id1") ele.value=current_time } var clock1; function begin() { if(clock1==undefined){ showTime(); clock1=setInterval(showTime,1000) } } function end() { clearInterval(clock1); clock1=undefined } </script> </body> </html>
#打印hello window.alert("hello") #用户选择true或false obj = window.confirm("hello word") console.log(obj) #接收用户文本内容 obj = window.prompt("please input content") console.log(obj) #open() 打开和一个新的窗口 并 进入指定网址 #参数1 什么都不填 就是打开一个新窗口. #参数2.填入新窗口的名字(一般可以不填). #参数3: 新打开窗口的参数. open('http://www.baidu.com','','width=200,resizable=no,height=100'); windows 方法例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function f() { console.log("hello...") } setTimeout(f,1000) </script> </body> </html>
b. history
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
方法
back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。
-----------history1文件------
<a href="history2.html">clink</a>
<button onclick="history.forward()">button</button>
-----------history2文件--------
<button onclick="history.back()">back</button>
c. Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
方法
location.reload() #刷新页面 location.assign(URL) #跳转页面，相当于链接，可以回退 location.replace(newURL) #跳转页面，覆盖当前页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="f()">click</button> <script> function f() { location.reload() } </script> </body> </html>
四. DOM对象(DHTML)
a. 什么是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 元素的对象和属性，以及访问它们的方法。
b. DOM 节点
#根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)： #整个文档是一个文档节点(document对象) #每个 HTML 元素是元素节点(element 对象) #HTML 元素内的文本是文本节点(text对象) #每个 HTML 属性是属性节点(attribute对象) #注释是注释节点(comment对象) #画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
attributes #节点（元素）的属性节点 nodeType #节点类型 nodeValue #节点值 nodeName #节点名称 innerHTML #节点（元素）的文本值
导航属性:
parentElement #父节点标签元素 children #所有子标签 firstElementChild #第一个子标签元素 lastElementChild #最后一个子标签元素 nextElementtSibling #下一个兄弟标签元素 previousElementSibling #上一个兄弟标签元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"> <p class="p1">hello p</p> <div class="div1">hello div</div> </div> <script> var ele = document.getElementsByClassName("p1")[0]; console.log(ele); console.log(ele.nodeName); console.log(ele.nodeType); console.log(ele.nodeValue); console.log(ele.innerText) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1"> <p class="p1">hello p</p> <div class="div2">hello div</div> </div> <script> var ele = document.getElementsByClassName("p1")[0]; var ele2 = ele.parentNode; #父亲标签 console.log(ele2.nodeName); var ele3 = ele.nextElementSibling; #兄弟标签 console.log(ele3.nodeName); console.log(ele3.innerHTML) </script> </body> </html>
c. 节点查找
直接查找
document.getElementById(“idname”) document.getElementsByTagName(“tagname”) document.getElementsByName(“name”) document.getElementsByClassName(“name”)
局部查找
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); var ele= div1.getElementsByTagName("p"); alert(ele.length); var ele2=div1.getElementsByClassName("div2"); alert(ele2.length); </script> </body> </html>
d. DOM Event(事件)
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="alert('单击事件')">单击事件</div> <div ondblclick="alert('双击事件')">双击事件</div> <input type="text" value="请输入姓名" onfocus="enter(this)" onblur="exit(this)"> <script> function enter(self){ self.value=""; } function exit(self){ if(self.value.trim()==""){ self.value="请输入姓名"; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function () { var ele=document.getElementsByClassName("div1")[0]; console.log(ele.innerText) } </script> </head> <body> <div class="div1">hello div</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select name="" class="select_pro"> <option value="1">河南省</option> <option value="2">湖南省</option> <option value="3">云南省</option> </select> <select name="" class="select_city"> </select> <script> var info={"河南省":["郑州","洛阳","开封"],"湖南省":["湘潭","长沙","岳阳"],"云南省":["大理","昆明"]} var ele=document.getElementsByClassName("select_pro")[0]; var ele_2=document.getElementsByClassName("select_city")[0]; ele.onchange=function(){ var arrs=ele.children; var sindex=this.selectedIndex; // 得到一个数字 var province=arrs[sindex].innerText; // 得到省份 var citys_arr=info[province]; console.log(citys_arr); var ele2_children=ele_2.children; // for (var j=0;j<ele2_children.length;j++){ // ele_2.removeChild(ele2_children[0]) // } ele_2.options.length=0; // 清空select的子元素 for (var i=0;i<citys_arr.length;i++){ var option=document.createElement("option"); option.innerText=citys_arr[i]; ele_2.appendChild(option); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ margin: 0 auto; background-color: darkgray; width: 80%; height: 600px; margin-top: 30px; word-spacing: -5px; } #left { display: inline-block; width: 100px; height: 140px; background-color: wheat; text-align: center; } #choice{ display: inline-block; height: 140px; background-color: darkolivegreen; vertical-align: top; padding:0 5px; } #choice button{ margin-top: 20px; } #right{ display: inline-block; width: 100px ; height: 140px; background-color: wheat; text-align: center; line-height: 140px; } </style> </head> <body> <div class="outer"> <select multiple="multiple" size="5" id="left"> <option>红楼梦</option> <option>西游记</option> <option>水浒传</option> <option>JinPingMei</option> <option>三国演义</option> </select> <span id="choice"> <button id="choose_move"> > </button><br> <button id="all_move"> >> </button> </span> <select multiple="multiple" size="10" id="right"> <option>放风筝的人</option> </select> </div> <script> var choose_move=document.getElementById("choose_move"); var all_move=document.getElementById("all_move"); var right=document.getElementById("right"); var left=document.getElementById("left"); var options=left.options; choose_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; if(option.selected==true){ // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } }; all_move.onclick=function(){ for (var i=0; i<options.length;i++){ var option=options[i]; right.appendChild(option); i--; }; }; /* var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++) { buttons[i].onclick = function () { for (var i = 0; i < options.length; i++) { var option = options[i]; if (this.innerText == ">") { if (option.selected == true) { // var news=option.cloneNode(true); // console.log(news); right.appendChild(option); i--; } } else { right.appendChild(option); i--; } } }; } */ </script> </body> </html>
e. 绑定事件方式
方式一： 标签内绑定
<div id="div" onclick="foo(this)">点我呀</div> <script> function foo(self){ // 形参不能是this; console.log("点你大爷!"); console.log(self); } </script>
方式二： 标签对象.事件=function(){}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>PPP</p> <p>PPP</p> <p>PPP</p> <script> //绑定方式二 标签对象.事件=function(){}; var eles =document.getElementsByTagName("p"); for (var i=0;i<eles.length;i++){ eles[i].onclick=function(){ alert(789); } } </script> </body> </html>
f. 事件介绍
事件传播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ width: 200px; height: 200px; background-color: red; } .inner{ width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> <script> var ele=document.getElementsByClassName("outer")[0]; ele.onclick=function(){ alert(123); }; var ele2=document.getElementsByClassName("inner")[0]; ele2.onclick=function(e){ alert(456); e.stopPropagation(); } </script> </body> </html>
onkeydown:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="d1"> <script> var ele=document.getElementById("d1"); ele.onkeydown=function (e) { var num=e.keyCode; var alph=String.fromCharCode(num); alert(e.keyCode+"-----"+alph) } </script> </body> </html>
onmouseout与onmouseleave事件的区别：
#1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 #2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width:300px; background-color: purple; text-align: center; } #title{ line-height: 50px; } #list{ display: none; } #list div{ line-height: 50px; } #list .item1{ background-color: green; } #list .item2{ background-color: yellow; } #list .item3{ background-color: blue; } </style> </head> <body> <div id="container"> <div id="title">mouseout演示</div> <div id="list"> <div class="item1">111</div> <div class="item2">222</div> <div class="item3">333</div> </div> </div> <script> var container=document.getElementById("container"); var list=document.getElementById("list"); var title=document.getElementById("title"); title.onmouseover=function () { list.style.display="block" } container.onmouseleave=function(){ list.style.display="none"; }; </script> </body> </html>
onsubmit
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Event 对象：
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可. 比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表单提交方式1(). //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 alert("验证失败 表单不会提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> </body> </html>
g. 节点操作
创建节点：
createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
添加节点：
追加一个子节点（作为最后的子节点） somenode.appendChild(newnode) 把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点);
删除节点：
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点：
somenode.replaceChild(newnode, 某个节点);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width: 300px; height: 200px; } .div1{ background-color: green; } .div2{ background-color: red; } .div3{ background-color: blue; } .div4{ background-color: lemonchiffon; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> div1</div> <div class="div2"> <button onclick="del()">del</button> div2</div> <div class="div3"> <button onclick="change()">change</button> <p>div3</p> </div> <div class="div4">div4</div> <script> // 把div3 的p改变为image function change() { var img=document.createElement("img"); img.src="meinv.png"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("div3")[0]; father.replaceChild(img,ele) } // 删除p元素 function del() { var father=document.getElementsByClassName("div1")[0]; var son=father.getElementsByTagName("p")[0] father.removeChild(son) } // 增加p元素 function add() { var ele=document.createElement("p"); ele.innerHTML="hello p"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) } </script> </body> </html>
h. 节点属性操作：
a. 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 300px; height: 200px; } .div1{ background-color: green; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> div1</div> <script> function add() { var ele=document.createElement("p"); ele.innerHTML="<h1>hello p</h1>"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) } </script> </body> </html>
b. 改变 CSS 样式
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 300px; height: 200px; } .div1{ background-color: green; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> div1</div> <script> function add() { var ele=document.createElement("p"); ele.innerHTML="<h1>hello p</h1>"; ele.style.color="red"; ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) } </script> </body> </html>
c.改变 HTML 属性
elementNode.setAttribute(name,value) elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
f. 关于class的操作
elementNode.className elementNode.classList.add elementNode.classList.remove
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1 div2">div1</div> <script> var ele=document.getElementsByTagName("div")[0]; console.log(ele.className); console.log(ele.classList[0]); ele.classList.add("hide"); console.log(ele.className) </script> </body> </html>
五. 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="select('all');">全选</button> <button onclick="select('cancel');">取消</button> <button onclick="select('reverse');">反选</button> <table border="1" id="Table"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> <script> function select(choice){ var ele=document.getElementById("Table"); var inputs=ele.getElementsByTagName("input"); for (var i=0;i<inputs.length;i=i+1){ var ele2=inputs[i]; if (choice=="all"){ ele2.checked=true; }else if(choice=="cancel"){ ele2.checked=false; } else { if (ele2.checked){ ele2.checked=false; }else { ele2.checked=true; } } } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> h1{ background-color: darkgray; color: red; text-align: center; line-height: 50px; } </style> </head> <body> <h1 class="title">欢迎方少伟sb</h1> <script> function test(){ var ele=document.getElementsByClassName("title")[0]; // console.log(ele) // console.log(ele.innerText); // console.log(typeof ele.innerText); var content=ele.innerText; var fist_char=content.charAt(0); var later_string=content.substring(1,content.length); var new_content=later_string+fist_char; // 赋值操作 ele.innerText=new_content; } setInterval(test,1000); </script> </body> </html>
模态
1. 定义button按钮 并绑定事件 2. 定义遮罩层 绝对定位，相对于浏览器窗口上下左右都为0，背景颜色，透明度 3. 定义弹出窗口 定义长，宽，背景颜色 绝对定位，上，左都为50%，为了居中，需要向左，向上各移动长宽的一般 绑定事件 4. 页面加载，给遮罩层和弹出窗口 加hide属性，用于隐藏。 5. 点击button按钮触发事件 - 找到遮罩层和弹出窗移除hide类 6. 点击取消模态按钮，触发事件 - 找到遮罩层和弹出窗增加hide类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1800px; background-color: grey; } .shade{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: yellow; opacity: 0.3; } .mode1{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide{ display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">show</button> </div> <div class="shade hide"></div> <div class="mode1 hide"> <button onclick="cancle()">cancle</button> </div> <script> function show() { var ele_share=document.getElementsByClassName("shade")[0]; var ele_mode1=document.getElementsByClassName("mode1")[0]; ele_share.classList.remove("hide"); ele_mode1.classList.remove("hide"); } function cancle() { var ele_share=document.getElementsByClassName("shade")[0]; var ele_mode1=document.getElementsByClassName("mode1")[0]; ele_share.classList.add("hide"); ele_mode1.classList.add("hide"); } </script> </body> </html>
