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的规划():避 ...
随机推荐
- mac的公式编辑器: mathtype/latex
mathtype 收费版,且马上不能在mac系统上使用 latex 搜索一下: ➜ ~ brew search latex ==> Formulae gnome-latex latex2html ...
- php 常用的常量
/* php 常用的常量 */ 1.系统常量 * FILE 当前PHP文件的相对路径 * LINE 当前PHP文件中所在的行号 * FUNCTION 当前函数名,只对函数内调用起作用 * CLASS ...
- 你应该知道的4个DSP开发支持库
引言 在dsp开发中,为了节省开发时间和难度,TI将一些成熟的算法封装为模块,供开发者使用.如果能充分利用这些算法支持库,对于加快dsp开发进程与提高代码质量.稳定性有非常大的帮助. Digital ...
- Appium移动自动化测试-----（九） appium API 之应用操作
1.安装应用 方法: installApp() 安装应用到设备中去.需要apk包的路径. driver.installApp("path/to/my.apk"); driver.i ...
- bam文件格式说明
bam文件说明 bam文件和sam文件内容其实是一样的,只是bam是二进制的压缩文件,需要通过特定的软件来进行查看,bam文件通常可以理解为12个字段组成 BAM格式分为header section( ...
- [转帖]上云测试，这些关键点你get 到没有
上云测试,这些关键点你get 到没有 https://www.cnblogs.com/mypm/p/10852656.html?tdsourcetag=s_pcqq_aiomsg sticky 还有s ...
- Nginx 系列教程
Nginx(一):Nginx介绍 Nginx(二):编译安装Nginx及参数说明 Nginx(三):nginx.conf配置文件说明 [1] 配置参数说明 Nginx(三):nginx.conf配置文 ...
- 用jquery和php实现ajax异步请求响应
ajax技术可以实现异步请求和响应,下面的是用jquery向一个php脚本发送异步请求,并得到响应. 第一步,准备好前台的html表单,和jquery实现的ajax请求 <html lang=& ...
- C++打印杨辉三角形
#include <iostream> #include <iomanip> #include <Windows.h> using namespace std; # ...
- 数据结构-单链表-类定义2-C++
上一次的C++链表实现两个单链表的连接不太理想,此次听了一些视频课,自己补了个尾插法,很好的实现了两个链表的连接,当然了,我也是刚接触,可能是C++的一些语法还不太清楚,不过硬是花了一些时间尽量在数据 ...