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的规划():避 ...
随机推荐
- Python扫描器-端口扫描
结合渗透测试最常见就是单个域名扫指纹,自动子域名查找.获取所有子域名的IP,自动C段IP查找相同子域名,利用有效IP扫端口. 常见端口库扫描 service_list = { 21:"FTP ...
- Transformer的numpy实现
下面的代码自下而上的实现Transformer的相关模块功能.这份文档只实现了主要代码.由于时间关系,我无法实现所有函数.对于没有实现的函数,默认用全大写函数名指出,如SOFTMAX 由于时间限制,以 ...
- PHP中文名加密
<?php function encryptName($name) { $encrypt_name = ''; //判断是否包含中文字符 if(preg_match("/[\x{4e0 ...
- Deepin 15.11 install nvidia dirver[mei you an zhuang shu ru fa]
1.firstly, exec: sudo vim /etc/modprobe.d/blacklist-nouveau.conf[create], and input [blacklist nouve ...
- gensim中word2vec
from gensim.models import Word2Vec Word2Vec(self, sentences=None, size=100, alpha=0.025, window=5, m ...
- Java基础笔试练习（六）
1.在Java中,一个类可同时定义许多同名的方法,这些方法的形式参数个数.类型或顺序各不相同,传回的值也可以不相同.这种面向对象程序的特性称为? A.隐藏 B.覆盖 C.重载 D.Java不支持此特性 ...
- C/C++ cmake example
学习 Golang,有时需要 Cgo,所以需要学习 C.C++. 语言入门: https://item.jd.com/12580612.html https://item.jd.com/2832653 ...
- hdu 2643 rank 第二类斯特林数
题意:给定n个人,要求这n个人的所有可能排名情况,可以多个人并列(这个是关键). 题解:由于存在并列的问题,那么对于n个人,我们最多有n个排名,枚举一下1~n,累加一下就好.(注意这里是变种的斯特林数 ...
- 前端开发 Vue -4promise解读2
https://www.runoob.com/vue2/vue-tutorial.html promise promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执 ...
- springboot接收date类型参数
springboot接收日期类型参数,实现自动转换. 1. 当请求类型为json,date类型字段为 json 字段时,可以使用如下两种方法 1.1. 当前参数加两个注解(有些文章说接收只需要加 @D ...