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的时候就不会那么枯 ...
随机推荐
- Linux 无线网卡配置
无线网卡常见的配置选项 某TL-WR842N路由器无线配置选项含义: 无线名称 路由器的无线(Wi-Fi)名称.无线密码 无线加密使用WPA2-PSK/WPA-PSK加密方式.AES加密算法,无线密码 ...
- c指针类型的作用
指针类型的作用 任何类型的指针占用的空间大小都是相同的(32位CPU是4字节:64位CPU是8字节) 既然任何类型的指针占用的空间大小都是相同的,为什么指针还需要类型呢?指针只是指向了一个内存地址,但 ...
- tesseract-ocr安装问题
今天安装tesseract-ocr的时候,载了坑,记录一下. 1. 安装时语言库的选择,我把 aditional language data 这一项全选中了,装的时候那叫一个慢啊,差不多3个小时装好的 ...
- Linux系统中Redis和Tomcat的PID文件路径设置
Tomcat: /bin/catalina.sh 文件头注释下面添加一行:CATALINA_PID=/var/run/tomcat.pid Redis: redis.conf配置文件里面搜索pidfi ...
- Spring的jdbc模板2：使用开源的连接池
上篇简要介绍了如何在spring中配置默认的连接池和jdbc模板,这篇来介绍开源的连接池配置与属性引入 C3P0连接池配置: 引入jar包 配置c3p0连接池 <?xml version=&qu ...
- Spark1.0.0 源码编译和部署包生成
问题导读:1.如何对Spark1.0.0源码编译?2.如何生成Spark1.0的部署包?3.如何获取包资源? Spark1.0.0的源码编译和部署包生成,其本质只有两种:Maven和SBT,只不过针对 ...
- win10上如何启用或禁用Windows功能
Windows10上提供了很多的功能,比如打印服务.传真服务.媒体服务等,怎样启用或禁用某些Windows功能呢? 工具/原料 windows10 方法/步骤 点击左下角的Windows图 ...
- Numpy 模块的应用
数据分析三剑客: Numpy, Pandas, Matplotlib NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数 ...
- 给定一个正整数n，返回从1到n构成的所有的BST
public class C3 { public static void main(String[] args) { ArrayList<TreeNode> res = generateT ...
- Python之Requests库的7个主要方法
方法 说明 requests.request() 构造一个请求,支撑一下各方法的基础方法 requests.get() 获取HTML网页的主要方法 requests.head() 获取网页头信息的方法 ...