BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒.
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{
width: 15%;
height: 600px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 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>
BOM基础 计时器 定时器 DOM 基础的更多相关文章
- 【基础知识】Dom基础
[学习日记]Dom基础 1. 内容:使用JavaScript操作Dom进行DHTML开发 2. 目标:能共使用JavaScript操作Dom实现常见的DHTML效果 3. DHTML= C ...
- Python 15 html 基础 - CSS &javascript &DOM
本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
随机推荐
- [Hive_add_1] Hive 与 MR 的对应关系
- Quartz简答介绍
引言 Quartz是开源任务调度框架中的翘楚,提供了强大的任务调度机制.Quartz允许开发人员灵活地定义触发器的调度时间表,并可对触发器和任务进行关联映射.此外,Quartz提供了调度运行环境的持久 ...
- 用栈来实现队列的golang实现
使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返回队列首部的元素. empty() -- 返回队列是否为空. ...
- 《Java大学教程》—第13章 程序包
接下来,是第二学期的内容,也是相对深入的Java学习. 自测题:1. 在类的开发过程中,程序包的作用是什么?P321程序包是为了方便定位和部署类,还可以避免将来类之间出现名称冲突. 2. ...
- baidu.com跳转www.baidu.com
打开git bash,输入 curl baidu.com,收到返回 <html> <meta http-equiv="refresh" content=" ...
- 使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...
- OAuth2基本概念和运作流程
OAuth(开放授权)是一个关于授权的开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用.目前的版本是2.0版,本文 ...
- LightGBM介绍及参数调优
1.LightGBM简介 LightGBM是一个梯度Boosting框架,使用基于决策树的学习算法.它可以说是分布式的,高效的,有以下优势: 1)更快的训练效率 2)低内存使用 3)更高的准确率 4) ...
- python入门学习：6.用户输入和while循环
python入门学习:6.用户输入和while循环 关键点:输入.while循环 6.1 函数input()工作原理6.2 while循环简介6.3 使用while循环处理字典和列表 6.1 函数in ...
- D. Zero Quantity Maximization（hash+map）
题意:就是让c=a*x+b,给你一个a[],b[],让你尽可能多的让c[]=0,输出有多少. 思路:直接令c=0,则x=-b/a, 也就是一条直线,通过这样就用hash值使相同的k值映射到一起,使用了 ...