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的时候就不会那么枯 ...
随机推荐
- Python基于dtw实现股票预测【多线程】
# -*- coding: utf-8 -*- """ Created on Tue Dec 4 08:53:08 2018 @author: zhen "&q ...
- [20190214]11g Query Result Cache RC Latches补充.txt
[20190214]11g Query Result Cache RC Latches补充.txt --//上午测试链接:http://blog.itpub.net/267265/viewspace- ...
- 使用Jenkins遇到的问题
前言 本文记录我在使用jenkins过程中遇到的一些问题. 无法执行bat 如果出现bat执行出错,解决办法如下: 1. 打开 服务,找到 jenkins的服务 2. 修改jenkins的属性如下:( ...
- Java多线程（一） 什么是线程
声明:本系列大多是翻译自https://www.javatpoint.com,加上自己的增删改,尽力写的系统而通俗易懂,后文不再重复声明. 点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更 ...
- 《Java大学教程》--第3章 迭代
迭代(iteration).重复(repetition):三种循环* for: 重复执行固定次数* while: 重复执行不固定次数* do...while: 比while至少多一次 1.答:P47迭 ...
- Ajax请求中的async:false/true的作用[转]
test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...
- huapin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入理解Ribbon之源码解析
什么是Ribbon Ribbon是Netflix公司开源的一个负载均衡的项目,它属于上述的第二种,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TC ...
- 数以亿计运行PHP的网站即将面临严重的安全风险
数以亿计运行PHP的网站即将面临严重的安全风险 根据W3Techs的统计数据,目前所有互联网站点中约有78.9%使用PHP运行.但是2018年12月31日,PHP 5.6.x的安全支持将正式停止,标志 ...
- Nginx+Keepalived双机热备
一.Keepalived Keepalived是保证集群高可用的服务软件.网络中优先级高的节点为master负责响应VIP的ARP包,将VIP和MAC地址映射关系告诉网络内其他主机,还会以多播的形式向 ...