js基础知识2
DOM
Document Object Model
文档 对象 模型
对象：
属性和方法
属性：获取值和赋值
方法：赋值方法和条用方法
DOM树
document
head body
title meat link.... div.header div.content div.footer
DOM的获取
1.获取document对象
console.log(document);
2.获取html对象
document.documentElement
3.获取body对象
document.body
提供三种方法来采取body中的DOM
div #box .box
通过id获取：document.getElementById("box")
通过类获取：document.getElementByClassName("box")
for(var i = 0;i<olis.length;i++){
olis[i].onclick = function(){
alert(this.innerText);
}
}
通过标签获取： var oDiv = document.getElementByTagName("div");
DOM三步走
1.获取事件源
2.事件绑定
3.事件驱动（业务逻辑）
- 对标签样式属性的操作
oDiv.onclick = function(){
//点语法 set方法 get方法 readonly 只读
console.log(this.style);
this.style = null;
this.style.width = '200px';
this.style.marginLeft = '40px';
}
- 对标签属性的操作
id
class
src
alt
href
title
type
name
- 对值的操作
innerText
- 只获取文本
innerHTML
- 获取文本和标签
value
- 事件
- 对DOM对象的操作（增删改查）
- 控制元素显示隐藏
应用：网页中频繁性的切换建议使用这个
1.控制style.display属性显示隐藏
2.控制className对元素显示隐藏
问题： 初始化的时候有渲染，
应用：网页中少量的切换建议使用
3.对元素的创建和销毁
生命周期 出生 入死
笔记
1.对象
<script type="text/javascript">
var person = {
name:"qing",
age:18,
fav:function(){
alert(this.name)
}
}
person.fav();
</script>
创建对象用{}来表示，里面的格式类似字典，但是key不用加""
2.对样式的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="wrap"></div>
<p>qing</p>
<script type="text/javascript">
var oDiv = document.getElementById("wrap");
oDiv.onclick = function(){
oDiv.style.width = "400px";
oDiv.style.float = "left";
}
</script>
</body>
</html>
3.对标签属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 42px;
height: 70px;
background: url("./images/icon-slides.png") no-repeat -86px 0;
}
</style>
</head>
<body>
<div class="box"></div>
<img src="./images/购物车.png" width="100px" alt="" id="shop">
<script>
document.getElementsByClassName("box")[0].onmouseover = function(){
this.style.backgroundPosition = "0 0";
}
document.getElementsByClassName("box")[0].onmouseout = function(){
this.style.backgroundPosition = "-86px 0";
}
var isHover = true;
var oDiv = document.getElementById("shop");
oDiv.onclick = function(){
if (isHover){
this.src = "./images/购物车-hover.png";
isHover = false;
} else{
this.src = "./images/购物车.png";
isHover = true;
}
}
</script>
</body>
</html>
4.控制元素显示隐藏的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.child{
width: 200px;
height: 200px;
background-color: green;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div class="box">
<div class="child" id="child"></div>
</div>
<!--1.样式属性 display:none|block
2.通过控制标签属性className 对类型添加 移除
3.DOM创建 销毁 创建销毁 -->
<script>
var oChild = document.getElementById("child");
document.getElementById("btn").onclick = function(){
// oChild.style.display = "none";
// oChild.className += " hidden";
oChild.className += " hidden";
}
</script>
</body>
</html>
5.对值得操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button id="btn">
隐藏 </button>
<input type="text" id="user" value="qing">
<div class="box">
<div class="child" id="child"></div>
</div>
<script>
var oChild = document.getElementById("child");
document.getElementById("btn").onclick = function(){
// oChild.style.display = 'none'; // oChild.className +=' hidden';
oChild.className = oChild.className + ' hidden';
console.log(oChild.className);
console.log(this.innerText);
console.log(this.innerHTML);
// this.innerHTML += "<span>哎哟</span>";
this.innerText += "<span>哎呦</span>";
}
//从此处可以看出事件操作时异步的，不等待
console.log(document.getElementById("user").value);
document.getElementById("user").value = "qingqing";
</script>
</body> </html>
6.DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div id="father">
<div id="laoda"></div>
<div id="laoer"></div>
</div>
<script>
var oLaoda = document.getElementById("laoda");
console.log(oLaoda.nextSibling); //会识别文本标签，空格换行
console.log(oLaoda.nextElementSibling);
//浏览器兼容性
var a = oLaoda.nextElementSibling || oLaoda.nextSibling ;
console.log(a);
console.log(document.getElementById("father").children);
console.log(oLaoda.parentNode); </script>
</body> </html>
7.真DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<button id="btn">隐藏</button>
<div class="box" id="box"> </div>
<script>
setTimeout(function () {
var oBox = document.getElementById("box");
// DOM的创建 子元素 节点
var oChild = document.createElement("div");
oChild.className = "child";
oChild.style.width = "200px";
oChild.style.height = "200px";
oChild.style.background = "red";
// 父.appendChild(子)
oBox.appendChild(oChild);
},2000)
</script>
</body> </html>
8.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background: red;
}
#aaa{
width: 50px;
height: 50px;
background-color: yellow;
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
top: 50px;
display: none;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button> <div id="aaa">qing <div class="box"></div>
</div>
<script>
var oBtns = document.getElementsByTagName("button");
for(var i = 0;i < oBtns.length;i++){
oBtns[i].onclick = function(){
for (var j = 0;j < oBtns.length;j++){
oBtns[j].className = "";
}
this.className = "active";
}
} // onmouseover 当穿过父元素和子元素时 会调用 onmouseout
// onmouseenter只穿过父元素 onmouseleave
document.getElementById("aaa").onmouseenter = function () {
console.log(1111);
this.children[0].style.display = "block";
}
document.getElementById("aaa").onmouseleave = function(){
this.children[0].style.display = "none";
}
</script>
</body> </html>
js基础知识2的更多相关文章
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- js基础知识--BOM
之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成: ECMAScript核心语法.BOM.DOM.今天就和大家详细说一下BOM的一些基础知识. BOM BOM通常被称为浏览器对象模型,主 ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础知识温习：Javascript中如何模拟私有方法
本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...
- js基础知识总结（2016.11.1）
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- MultiDesk远程桌面连接
MultiDesk 是一个选项卡(TAB标签)方式的远程桌面连接 (Terminal Services Client),可以管理组远程桌面连接,更改连接端口. 功能特性 绿色软件,只有一个很小的可执行 ...
- 导入数据到数据库表，报错[Err] [Row1] [Imp] 1153 - Got a packet bigger than 'max_allowed_packet' bytes
# 在数据库新增查询,执行如下命令即可: show VARIABLES like '%max_allowed_packet%'; set global max_allowed_packet = 2*1 ...
- How George Washington Angered Lawmakers Over Thanksgiving——VOA慢速英语
听力地址:How George Washington Angered Lawmakers Over Thanksgiving 中英对照:华盛顿总统将感恩节定为全国性节日 Words in This S ...
- LeetCode 64. 最小路径和(Minimum Path Sum) 20
64. 最小路径和 64. Minimum Path Sum 题目描述 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明: 每次只能向下或 ...
- Java线程同步synchronized的理解
JVM中(留神:马上讲到的这两个存储区只在JVM内部与物理存储区无关)存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,所有实例和实例的字段都在此区域,对于所有的线程是共享 ...
- （7）Spring Boot web开发 --- servlet容器
文章目录 配置嵌入式 Servlet 容器 注册 三大组件 使用其他 servlet 容器 使用外置的 `Servlet` 容器 配置嵌入式 Servlet 容器 Spirng Boot 默认使用自带 ...
- [C++] 习题 2.14 用队列实现桶排序
目录 前置技能 队列(已在上篇提到栈的时候顺便提到了,不再赘述) 桶排序 具体实现 由用户输入n个10以内的数,每输入i(0≤i≤9),就把它插入第i号队列中,最后把10个队列中的非空队列,按队列号从 ...
- Django框架下报的版本问题
报错环境 python=3.6.5,django=2.2,PyMySQL=0.9.3 …… django.core.exceptions.ImproperlyConfigured: mysqlclie ...
- Linux 进程控制
分享知乎上看到的一句话,共勉: 学习周期分为学习,思考,实践,校正四个阶段,周期越短,学习效率越高. 前面讲的都是操作系统如何管理进程,接下来,看看用户如何进行进程控制. 1.进程创建 先介绍一下函数 ...
- golang开发:(一)开发环境搭建vagrant+VirtualBox
开发环境介绍 不管何种开发语言,目前用的比较多的开发环境基本就是Vagrant+VirtualBox搭建的虚拟开发环境,这种开发环境的好处就是一次搭建处处可用,各个平台和系统都可以使用.开发团队中,可 ...