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的时候就不会那么枯 ...
随机推荐
- TTS 文字转语音 ekho
1.源码下载 使用svn客户端,执行如下命令下载 svn co https://svn.code.sf.net/p/e-guidedog/code/ 2.官方网站查看说明 http://www.egu ...
- django重定向
return HttpResponseRedirect('/index/')# 重定向返回url格式:http://127.0.0.1:8000/index/会去掉前期的所有路由重新写入/index/ ...
- EF CodeFirst使用Nuget更新数据库
常用命令: 1.开启迁移 Enable-Migrations -EnableAutomaticMigrations 2.添加一条迁移记录 Add-Migration AddMigration001 3 ...
- Android重复依赖解决办法
参考文章:https://blog.csdn.net/qq_24216407/article/details/72842614 在build.gradle引用了Vlc的安卓包:de.mrmaffen: ...
- Selenium Webdriver 中的 executeScript 使用方法
1.使用executeScript 返回一个WebElement . 下例中我们将一个浏览器中的JavaScript 对象返回到客户端(C#,JAVA,Python等). IWebElement el ...
- 【Linux基础】大B和小b
1.小b(bit) 在计算机科学中,bit(比特)是表示信息的最小单位,叫做二进制位,一般用0和1表示. 2.大B(Byte) Byte叫做字节,由8个位(8bit)组成一个字节(1Byte),用于表 ...
- jq stop()和:is(":animated")用法区别
stop(true,true): 表示停止匹配元素正在进行的动画并跳转到末状态,清空未执行完的动画队列.常用于”解决光标移入移出得过快导致的动画效果与光标动作不一致“问题! jQuery stop() ...
- （转）springcloud(一)：大话Spring Cloud
http://www.ityouknow.com/springcloud/2017/05/01/simple-springcloud.html 研究了一段时间Spring Boot了准备向Spring ...
- WPF窗体の投影效果
有时候我们需要给WPF窗体加上一个毛边(投影效果) 我们可以在窗体下加上如下代码 <Window.Effect> <DropShadowEffect BlurRadius=" ...
- P1705 爱与愁过火（背包）
本来是个搜索题,但是自觉的成了背包! 多重用正序,01用逆序. 抽象出来一下,一个物体的体积为ai, 每次装入背包需要bi(在题目中为菜数量)分钟(这个题目只是bi为 1 而已)问在r分钟内,装比n大 ...