JS自学笔记02
可能有点乱啊，尽量先看吧，这里效果图就不展示了，可以自己复制代码，运行查看嘎！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
下面进行的是一个类似css 的 hover ，鼠标悬浮事件：、
document.getElementById
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
<style type="text/css">
#div-exp {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
<div id="div-exp" onclick="foo2()" onmousemove="foo()" onmouseleave="foo1()"></div>
<!--注释<onmousemove="foo()" 当鼠标移动到div时，调用方法foo-->
<!--注释onclick="foo2()" 点击 则调用方法 foo2-->
<!--注释onmouseleave="foo1() 当鼠标离开div时，调用方法foo1-->
<script type="text/javascript">
function foo() {
var dianji = document.getElementById("div-exp");
dianji.style.background = "black";
<!--注释当鼠标离开div时，div的背景色变为black 黑色-->
}
function foo1() {
var dianji = document.getElementById("div-exp");
dianji.style.background = "red";
<!--注释当鼠标离开div时，div的背景色变为red 红色-->
}
function foo2() {
var dianji = document.getElementById("div-exp");
dianji.style.background = "gold";
<!--注释当鼠标离开div时，div的背景色变为gold 金色-->
}
</script>
<!--getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。-->
<!--除了 getElementById() 之外，
还有 getElementsByName() 和 getElementsByTagName()
这两个返回的是个集合，要用下标进行拿取。-->
<!--不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。-->
</div>
document.getElementsByName
myFunction() getElementsByTagName() 方法可返回带有指定标签名的对象的集合
<div>
<script>
function getElements() {
var x = document.getElementsByName("x");
alert(x.length);
}
</script>
<span>猫:</span> <input name="x" type="radio" value="猫">
<span>狗:</span> <input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 'x'的元素?">
<!--getElementsByName() 方法可返回带有指定名称的对象的集合。-->
<!--alert(x.length)以弹窗的方式，返回x的长度，即有几个 name="x"名称的对象-->
</div>
document.getElementsByTagName
getElementsByTagName() 方法可返回带有指定标签名的对象的集合
<div>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">单击“按钮”更改列表项的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var asd = document.getElementsByTagName("UL")[0]
asd.getElementsByTagName("LI")[0].innerHTML = "Milk";
};
</script>
<!--myFunction() getElementsByTagName() 方法可返回带有指定标签名的对象的集合。-->
<!--提示：如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，
它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。-->
</div>
点击事件
1点击查询时间。
Date() 方法可返回当天的日期和时间。
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
<div>
<p>单前时间为：</p><br />
<div id="dv" style="width: 100px;height: 100px;background: navajowhite;">
button onclick="foo3()">点击查询</button>
<script type="text/javascript">
function foo3() {
document.getElementById("dv").innerHTML = Date();
}
</script>
</div>
</div>
2三级下拉菜单
css鼠标悬浮事件，制作的三级下拉菜单。
用js onmousemove 和onmouseleave也可以实现鼠标悬浮效果
也可以用点击事件来制作
<!--注释 鼠标点击事件-->
<div>
<div style="width: 200px;height: 200px;">
<div><button onclick="foo4()">首页</button>
<div id="all" style="display:none;">
<div>简介</div>
<div>邮箱
<div><button onclick="foo5()">下载</button>
<div id="aller" style="display: none;">
<div>windows</div>
<div>android</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function foo4() {
document.getElementById("all").style.display = "block";
}
<!--注释 点击后 修改id ="all"的属性为显示-->
function foo5() {
document.getElementById("aller").style.display = "block";
}
</script>
</div>
<!--注释 鼠标悬停事件 制作三级菜单-->
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#divA{
width: 300px;
height: 100px;
background: gray;
line-height: 100px;
text-align: center;
}
#divA1{
width: 300px;
height: 300px;
background: pink;
display: none;
}
#divA1a{
width: 300px;
height: 100px;
background: blue;
}
#divA1b{
width: 300px;
height: 100px;
background: green;
}
#divA1c{
width: 300px;
height: 100px;
background: orange;
}
#divA1a1{
width: 300px;
height: 300px;
background: aqua;
position: relative;
left: 300px;
top: -100px;
display:none ;
}
</style>
</head>
<body>
<div id="divA" onmousemove="foo()" onmouseleave="foo1()">
<!--注释<onmousemove="foo()" 当鼠标移动到div时，调用方法foo-->
<!--注释onmouseleave="foo1() 当鼠标离开div时，调用方法foo1-->
<div id="divA1">
<div id="divA1a" onmousemove="foo3()" onmouseleave="foo4()">a
<!--注释 同上-->
<div id="divA1a1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div id="divA1b">b</div>
<div id="divA1c">c</div>
</div>
</div>
<script type="text/javascript">
function foo(){
document.getElementById("divA1").style.display="block";
}
function foo1(){
var foo1 = document.getElementById("divA1");
foo1.style.display="none";
}
<!--注释 其实就是控制现实与不显示display="block"和display="none"-->
function foo3(){
document.getElementById("divA1a1").style.display="block";
}
function foo4(){
document.getElementById("divA1a1").style.display="none";
}
</script>-->
</body>
</html>-->
3点击变色
<div>
<div id="div1" style="background: red;height: 100px;width: 100px;" onclick="foo5()"></div>
<script type="text/javascript">
function foo5() {
if(document.getElementById("div1").style.background == "red") {
document.getElementById("div1").style.background = "green"
} else {
document.getElementById("div1").style.background = "red"
}
}
<!--注释 一样的 点击调用方法函数 修改属性值 -->
</script>
</div>
4查询父子节点
<div>
<ol>
<li>test1</li>
<li>test2</li>
<li id="test3">test3</li>
</ol>
<script type="text/javascript">
var o1 = document.getElementsByTagName("ol")[0];
console.log(o1.childNodes)
//查询子节点
//在谷歌chrome浏览器控制台 console里输出：
NodeList(7) [text, li, text, li, text, li#test3, text]
0: text
1: li
2: text
3: li
4: text
5: li#test3
6: text
length: 7
__proto__: NodeList
//查询首尾子节点
//查询首子节点 console.log(o1.firstElementChild)
//查询尾子节点 console.log(o1.lastElementChild)
//在谷歌chrome浏览器控制台 console里依次输出：
<li>test1</li>
<li id="test3">test3</li>
//查询父亲节点
// console.log(o1.parentNode)
// console.log(o1.childNodes[0])
// console.log(o1.childNodes[0].nextSibling)
// console.log(o1.childNodes[0].previousSibling)
//在谷歌chrome浏览器控制台 console里依次输出：
<div>...<div>
#text
<li>test1</li>
null
var li1 = document.createElement('li');
li1.innerHTML = ('这是新创建的');
// HTMLElementObject.innerHTML=text
//改变文本, URL, 及链接目标:
o1.appendChild(li1)
//添加一个(li1)
//在谷歌chrome浏览器控制台 console里输出：
1.test1
2.test2
3.test3
4.这是新创建的
var li1 = document.createElement('li');
li1.innerHTML = ('这是新创建的');
//这里是为了实现下面的功能复制的上面两行代码，请和上面的分开实现
var li_test3 = document.getElementById("test3")
o1.insertBefore(li1, li_test3)
//将 li1 插入到 li_test3 之前
//在谷歌chrome浏览器控制台 console里输出：
1.test1
2.test2
3.这是新创建的
4.test3
var li1 = document.createElement('li');
li1.innerHTML = ('这是新创建的');
//这里是为了实现下面的功能复制的上面两行代码，请和上面的分开实现
var li_test3 = document.getElementById("test3")
o1.insertBefore(li1, li_test3)
o1.removeChild(li_test3)
//删除li_test3
//在谷歌chrome浏览器控制台 console里输出：
1.test1
2.test2
3.这是新创建的
</script>
</div>
</body>