-------------------------------------------滴水穿石,我心永恒.
day48
CSS
JS
1 ECMA script
2 BOM
browser object model
3 DOM
document object model
1 文档树结构
-----
--- ---
-- -- -- -- -- --
- - - - -
2 dom对象
两个DOM(节点)对象:
1 document对象
2 element对象
3 查找标签
1 直接查找
document.getElementById(); // 一个element对象
document.getElementsByClassName(); // 多个element对象构成的数组
document.getElementsByTagName(); // 多个element对象构成的数组
document.getElementsByName(); // 多个element对象构成的数组
var c1=document.getElementsByClassName("c1")[0];
console.log("c1",c1);
var c2=c1.getElementsByClassName("c2")[0];
console.log(c2)
2 导航查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
4 标签控制
1 文本控制
获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
2 属性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex") ;
3 class属性控制
ele.classList.add("c3")
ele.classList.remove("c2)
4 css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* bom 基础*/
//window对象. alert
//window.alter(123);
//let ret=window.confirm(' are you ok?')
//console.log(ret) //--> True False
let ret2 = window.prompt('请输入验证码');
console.log(ret2)
</script>
</head>
<body>
</body>
</html>
[-------------------------------*******************-------------------------------]
定时器语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fc() {
console.log('444')
}
// 设置定时器
let ids = setInterval(fc,1000);
/*写函数的两种方式
第一种 先定义函数 再调用↑
第二种 直接写在调用函数内↓
*/
let ids2 = setInterval(function () {
console.log(888)
},1000);
console.log(ids);
console.log(ids2);
//取消定时器
clearInterval(1)
</script>
</head>
<body>
</body>
</html>
[-------------------------------*******************-------------------------------]
计时器语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//设置一个计时器
function show_time(){
//第一步; 创建时间字符串
let now = new Date().toLocaleString();
console.log(now);
//第二步; 查找input标签
let jishiqi = document.getElementById('jishiqi');
jishiqi.value=now;
}
// 定义设置时间
var id;
function setTimer() {
if (id == undefined){
show_time();
id = setInterval(show_time,1000);
}
}
function stopTimer() {
clearInterval(id);
id = undefined
}
</script>
</head>
<body>
<input type="text" id="jishiqi" class="c1">
<button onclick="setTimer()">start</button>
<button onclick="stopTimer()">end</button>
</body>
</html>
[-------------------------------*******************-------------------------------]
location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(location.href); /*获取到域名*/
// location.href = 'http://www.luffycity.com' /*赋值操作*/
console.log(location.search); /*获取到域名链接后面的内容*/
// function loadluffy() {
// location.href='http://www.luffycity.com';
// }
</script>
</head>
<body>
<button onclick="loadluffy()">加载luffy页面</button>
</body>
</html>
[-------------------------------*******************-------------------------------]
Dom 基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="i1">
<p>123</p>
<div class="c2">222</div>
</div>
<div class="c2">333</div>
<script>
/*
document.getElementById(); // 一个element对象
document.getElementsByClassName(); // 多个element对象构成的数组
document.getElementsByTagName(); // 多个element对象构成的数组
document.getElementsByName(); // 多个element对象构成的数组
document.getElementsByClassName("c2");
*/
var c1=document.getElementsByClassName("c1")[0];
console.log("c1",c1);
var c2=c1.getElementsByClassName("c2")[0];
console.log(c2)
</script>
</body>
</html>
[-------------------------------*******************-------------------------------]
DOM事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>123</li>
<li>234</li>
<li>789</li>
</ul>
<script>
// 事件绑定
// element.on事件=function(){ }
/*
var li=document.getElementsByTagName("li")[0];
li.onclick=function () {
console.log(this.innerHTML)
}
*/
var lis=document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++){
lis[i].onclick=function () {
console.log(this.innerHTML);
// console.log(lis[i].innerHTML)
}
}
console.log(i);
</script>
</body>
</html>
[-------------------------------*******************-------------------------------]
文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li id="i1">123</li>
<li id="i2"><a href="">123</a></li>
<li>234</li>
<li>789</li>
</ul>
<script>
let ele=document.getElementById("i2");
// 获取文本
console.log(ele.innerHTML);
console.log(ele.innerText);
//赋值文本
//ele.innerHTML="yuan"
//ele.innerText="yuan"
ele.innerHTML="<a href=''>yuan</a>"
ele.innerText="<a href=''>alex</a>"
</script>
</body>
</html>
[-------------------------------*******************-------------------------------]
属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li id="i1">123</li>
<li id="i2"><a href="">123</a></li>
<li>234</li>
<li>789</li>
</ul>
<script>
let ele=document.getElementById("i2");
// 获取文本
console.log(ele.innerHTML);
console.log(ele.innerText);
//赋值文本
//ele.innerHTML="yuan"
//ele.innerText="yuan"
ele.innerHTML="<a href=''>yuan</a>"
ele.innerText="<a href=''>alex</a>"
</script>
</body>
</html>
[-------------------------------*******************-------------------------------]
菜单栏示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
15%;
height: 600px;
float: left;
background-color: wheat;
}
.right{
float: left;
85%;
height: 600px;
background-color: lightgray;
}
.title{
text-align: center;
line-height: 30px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con hide">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
<script>
let eles=document.getElementsByClassName("title");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
// 1 展示点击菜单的内容
this.nextElementSibling.classList.remove("hide");
// 2 将其他兄弟item标签下的内容隐藏起来
for (var j=0;j<eles.length;j++){
if(eles[j]!==this){
eles[j].nextElementSibling.classList.add("hide");
}
}
}
}
</script>
</body>
</html>