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的规划():避 ...
随机推荐
- beego框架(golang)学习验证码
beego框架(golang)学习验证码 登录页面使用验证码 路由设置 /beego_admin_template/routers/router.go get请求页面, post验证用户名密码和验证码 ...
- 最近邻与K近邻算法思想
在关于径向基神经网络的一篇博文机器学习之径向基神经网络(RBF NN)中已经对最近邻思想进行过描述,但是写到了RBF中有些重点不够突出,所以,这里重新对最近邻和K近邻的基本思想进行介绍,简洁扼要的加以 ...
- Error:(18, 51) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)
问题:主要是因为jdk版本不一样 解决: 方法一:List<String> list=new ArrayList<Stirng>(); 方法二:重新安装jdk8的版本(安装和配 ...
- 利用卷积神经网络处理cifar图像分类
这是一个图像分类的比赛CIFAR( CIFAR-10 - Object Recognition in Images ) 首先我们需要下载数据文件,地址: http://www.cs.toronto.e ...
- MacOS上使用Openconnect代替Cisco Anyconnect
OpenConnect是一个Cisco Anyconnect的替代品,具有开源.易获取.可靠等优点.而官方版本的Cisco Anyconnect配置较为繁琐,需要在管理界面同时部署多平台客户端才能支持 ...
- 使用gomod后，导入模块与编译要注意的事项
问题:在使用go mod后,执行编译会报错: Cannot load xxx: cannot find module providing package xxx 目录结构如下: J:. │ └─src ...
- （三）spring Security 从数据库中检索用户名和密码
文章目录 配置 Druid 数据源 数据库 Mapper 文件 自定义 `UserDetailsService` 自定义登陆校验器 `AuthenticationProvider ` 配置 secur ...
- flume-ng version出现错误Error: Could not find or load main class org.apache.flume.tools.GetJavaPrope的解决办法
错误: 找不到或无法加载主类 org.apache.flume.tools.GetJavaProperty或者Error: Could not find or load main class org. ...
- mongodb入门基本语法
show dbs 查看所有数据库列表 二. 创建数据库 使用数据库. 创建数据库 use student 如果真的想把这个数据库创建成功, 那么必须插入一个数据. 数据库中不能直接插入数据,只能往集合 ...
- Java源码阅读之ArrayList
基于jdk1.8的ArrayList源码分析. 实现List接口最常见的大概就四种,ArrayList, LinkedList, Vector, Stack实现,今天就着重看一下ArrayList的源 ...