周五，阴，记录生活分享点滴
参考博客：https://www.cnblogs.com/yuanchenqi/articles/5980312.html
JavaScript（一）
BOM对象（续）
history对象
History 对象属性
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
length // 返回浏览器历史列表中的 URL 数量。
History 对象方法
back() // 加载 history 列表中的前一个 URL。 forward() // 加载 history 列表中的下一个 URL。 go() // 加载 history 列表中的某个具体页面。
<a href="rrr.html">click</a> <button onclick=" history.forward()">>>></button> <button onclick="history.back()">back</button> <button onclick="history.go()">back</button>
Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象方法
location.assign(URL) // 加载新文档 location.reload() // 刷新本页面 location.replace(newURL) // 注意与assign的区别
<!-- 例子：------------------------------------------------------------> <input type="button" value="重载" onclick="location.reload()"> <!-- 刷新本页面 --> <input type="button" value="重载" onclick="location.href='http://www.baidu.com'"> <!-- 加载到一个新的页面 -->
DOM对象(DHTML)
DOM 节点
HTML 文档中的所有内容都是节点(NODE)：
-
整个文档是一个文档节点(document对象)·【重要】
-
每个 HTML 元素是元素节点(element 对象)·【重要】
-
HTML 元素内的文本是文本节点(text对象)
-
每个 HTML 属性是属性节点(attribute对象)
-
注释是注释节点(comment对象)
节点(自身)属性：
-
attributes - 节点（元素）的属性节点
-
nodeType - 节点类型
-
nodeValue - 节点值
-
nodeName - 节点名称
-
innerHTML - 节点（元素）的文本值
导航属性：
-
parentNode - 节点（元素）的父节点 (推荐)
-
firstChild - 节点下第一个子元素
-
lastChild - 节点下最后一个子元素
-
childNodes - 节点（元素）的子节点
推荐导航属性：
-
parentElement - 父节点标签元素
-
children - 所有子标签
-
firstElementChild - 第一个子标签元素
-
lastElementChild - 最后一个子标签元素
-
nextElementtSibling - 下一个兄弟标签元素
-
previousElementSibling - 上一个兄弟标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello div </div>
<p>hello p</p>
</div>
<script>
// firstElementChild - 第一个子标签元素 ------------------------------------------
var ele=document.getElementById("div1");
var ele_son=ele.firstElementChild; // 第一个子标签元素
alert(ele_son.nodeName) // DIV
// lastElementChild - 最后一个子标签元素 -----------------------------------------
var ele=document.getElementById("div1");
var ele_son=ele.lastElementChild; // 最后一个子标签元素
alert(ele_son.nodeName); // P
// children - 所有子标签 --------------------------------------------------------
var ele=document.getElementById("div1");
var ele_sons=ele.children; // 所有子标签
alert(ele_sons.length); // 2
alert(ele_sons[0]); // [object HTMLDivElement]
for (var i=0;i<ele_sons.length;i++){ // 通过for循环查看所有子标签
console.log(ele_sons[i]) // <div>hello div </div> 和 <p>hello p</p>
}
// nextElementtSibling - 下一个兄弟标签元素 --------------------------------------
var ele=document.getElementById("div1").firstElementChild;
var sib=ele.nextElementSibling; // 下一个兄弟标签元素
alert(sib.nodeName); // P
// 这些属性是为了对文档树进行导航
</script>
</body>
</html>
查找对象方式
全局查找：
-
通过使用 getElementById() 方法
-
通过使用 getElementsByTagName() 方法
-
通过使用 getElementsByClassName() 方法
-
通过使用 getElementsByName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">hello
<div class="div2">hello 2</div>
<div class="div3" name="chung">hello 3</div>
<p>hello p</p>
</div>
<script>
// 通过ID ID特性：唯一性 -----------------------------------------------------------
var temp=document.getElementById("div1");
// 通过ClassName 有可能是多个，数组的格式 --------------------------------------------
var ele=document.getElementsByClassName("div2")[0]; // 通过[0]取一个值
var ele2=ele.nextElementSibling;
alert(ele2.innerHTML); // hello 3
// 通过TagName ---------------------------------------------------------------------
var tag=document.getElementsByTagName("p");
alert(tag[0].innerHTML) // hello p
// 通过Name -------------------------------------------------------------------------
var Name=document.getElementsByName("chung");
for(var i in Name){
console.log(Name[i].innerHTML) // hello 3
}
</script>
</body>
</html>
局部查找：
<!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="chung">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
// 支持 TagName ----------------------------------------------------------
var ele= div1.getElementsByTagName("p");
alert(ele.length); // 1
// 支持 ClassName --------------------------------------------------------
var ele2=div1.getElementsByClassName("div2");
alert(ele2.length); // 1
// 不支持 Id --------------------------------------------------------------
var ele3=div1.getElementById("div3");
alert(ele3.length);
// 不支持 Name ------------------------------------------------------------
var ele4=div1.getElementsByName("chung");
alert(ele4.length)
</script>
</body>
</html>
HTML DOM Event(事件)
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。 onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开。 onselect 文本被选中。 onsubmit 确认按钮被点击。
event 对象 & 输入框练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 鼠标双击ppppp反馈123 ------------------------------------------------------------------------>
<p ondblclick="alert(123)">ppppp</p>
<!-- 输入框练习 --------------------------------------------------------------------------------->
<input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名">
<!-- onfocus元素获得焦点；onblur元素失去焦点 -->
<script>
function func1() {
var ky=document.getElementsByClassName("keyword")[0];
ky.value="";
}
function func2() {
var ky=document.getElementsByClassName("keyword")[0];
if (ky.value.trim().length==0){
ky.value="请输入用户名";
}
}
</script>
</body>
</html>
onchange·多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select onchange="fun3()">
<option>上海</option>
<option>北京</option>
<option>河北</option>
</select>
<script>
function fun3() {
alert(1234);
}
</script>
</body>
</html>
onkeydown & onkeyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" >
<!-- onkeydown某个键盘按键被按下；onkeyup某个键盘按键被松开 -->
<script>
function fun1(e) {
console.log(456);
}
function fun2() {
console.log(123)
}
</script>
</body>
</html>
onload
<!--onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fun1() {
var p=document.getElementById("id1")
alert(p.nodeName);
}
window.onload=function () { /* onl oad 一张页面或一幅图像完成加载 */
var p=document.getElementById("id1")
alert(p.nodeName);
}
</script>
<p id="id1">hello p</p>
</body>
</html>
onmousedown & onm ousemove & onm ouseout & onm ouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
background-color: #84a42b;
width: 200px;
}
</style>
</head>
<body>
<div onm ousedown="down()" onm ousemove="move()" >div1</div>
<!--
onm ousedown 鼠标按钮被按下
onm ousemove 鼠标被移动
onm ouseout 鼠标从某元素移开
onm ouseover 鼠标移到某元素之上
-->
<script>
function down() {
console.log("down");
}
function move() {
console.log("move");
}
function out() {
console.log("out");
}
function over() {
console.log("over");
}
</script>
</body>
</html>
onsubmit
绑定事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1" onclick="func1()">hello duv
<p class="ppp">hello p</p>
</div>
<script>
/* 第一种：找到标签对象 --------------------------------------------*/
var obj=document.getElementsByClassName("ppp")[0];
obj.onclick=function () {
alert(123);
}
/* 第二种：直接在标签后加属性 ---------------------------------------*/
function func1(){
alert("func1")
}
</script>
</body>
</html>
验证方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form" onsubmit="return check()">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
// 第一种方式 ----------------------------------------------------------------------------------------
function check(event) {
alert("验证失败！");
return false; //返回true没有问题，如果返回false，需要注意onsubmit="return check()"有return
// 第二种方式 ----------------------------------------------------------------------------------------
// event.preventDefault() 用这句话替代 return false ，表示组织标签默认行为
}
</script>
</body>
</html>
事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: #84a42b;
}
#div2{
height: 100px;
width: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1" onclick="alert('div1')">
<div id="div2" onclick="func1(event)"></div>
</div>
<script>
function func1(e) {
alert('div2');
e.stopPropagation(); // 阻止事件向外层div传播
}
</script>
</body>
</html>