day43 js
作者：互联网
day43 js
内容回顾:
JavaScript: 包含三部分
1.ECMAScript5 基础语法
声明变量 var
流程控制 if else if else while for do-while switch
运算符 += -= ++ -- = ==(比较的是值) ===(值和数据类型) != !== < >
数据类型
基本数据类型 string number boolean null undefined
复杂数据类型
Array Function Object
创建的两种方式
1.字面量方式创建 var arr1 = [];
2.构造函数方式创建 var arr = new Array();
没有dict这种数据类型: 但是我们可以用object来实现:下面是简单介绍,以后还会讲
<script>
//字面量方式创建
var person = {
name:'bajie', //前面的key可以不用""引号, 因为系统会自动为你带上
age:18,
funt:function () {
alert(this.name); //this指的就是person对象
}
}
console.log(person.name);
person.funt();
</script
Function
创建的两种方式:
1.普通函数方式 function add(x,y) { return x+y; }
2.函数对象方式 var add = function (x,y) { return x+y; }
arguments: 伪数组,实参列表: 有索引, 有length
2.DOM
3.BOM
今日内容
一.DOM操作
cocument object model: 文档 对象 模型
对象: 里面有属性和方法
属性: 获取值和赋值
方法: 赋值方法和调用方法
DOM树: document
html
body head
div div title meta link
... ...
DOM的获取:
可以获取各种对象
获取document对象 document
获取html对象 document.documentElement
获取body对象 documnet.body
获取body中的标签:三种方式
div#box.box
1.通过id获取
document.getElementById('box');
2.通过类名获取
document.getElementsByClassName('box'); #伪数组的使用: 比如给多个li,绑定事件, 就可以用for循环伪数组来进行
<body>
<ol>
<li class="box">bajie</li>
<li class="box">wukong</li>
<li class="box">datang</li>
<li class="box">lihai</li>
</ol>
<script>
var olis = document.getElementsByClassName('box')
for (i=0;i<olis.length;i++) {
olis[i].onclick = function () {
alert(this.innerText);
}
}
</script>
</body>
3.通过标签获取
document.getElementsByTagName('div');
DOM三步走:
1.获取事件源
2.事件绑定 onclick onmouseover onmouseout
3.事件驱动(业务逻辑)
1.对标签的样式属性操作(即标签的style属性)
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<p>bajie</p>
<script>
var objDiv = document.getElementsByClassName('box')[0]; //Elements 获取的是伪数组, 不是对象, 用下标[0]取出对象
objDiv.onclick = function () {
console.log(this.style); //这里的style获取的是: 行内的对象
this.style.backgroundColor = 'green';
this.style.width = '400px';
this.style.float = 'left';
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box{
width: 100px; /*能用css写的尽量不要用js, 因为js会产生性能消耗*/
height: 260px;
/*background: url(./image/timi.jfif) no-repeat 0px 0px;*/
background: url(./image/timi.jfif) no-repeat -162px 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var objDiv = document.getElementsByClassName('box')[0];
objDiv.onmouseover = function () {
this.style.backgroundPosition = "0px 0px";
};
objDiv.onmouseout = function () {
this.style.backgroundPosition = "-162px 0px";
};
</script>
</body>
</html>
2.对标签的属性操作
id
class
src
alt
href
title
type
name
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<img src="./image/1.jpg" alt="shop" class="shop" width="100" id="shop">
<script>
var objImg = document.getElementById('shop');
objImg.onmouseover = function () {
// this.src = "./image/2.jpg";
console.log(this.getAttribute('src')); //对应对象的get和set方法, 有助于理解js的底层语法,和上面方法用哪个都行: 用上面的比较简单的方法就行了
this.setAttribute('src', './image/2.jpg');
};
objImg.onmouseout = function () {
this.src = "./image/1.jpg";
}
</script>
</body>
</html>
3.对值的操作
innerText
innerHTML
value
<body>
<button id="btn"><span>隐藏</span></button>
<input type="text" value="bajie" id="input">
<script>
document.getElementById('btn').onclick = function () {
console.log(this.innerHTML); //获取的是: <span>隐藏</span> innerHTML:获取的是父标签下面的所有文本和所有子标签
console.log(this.innerText); //获取的是: 隐藏 innerText:获取的是父标签下面的所有文本(文字)
// this.innerHTML = '<span>单击</span>'; //设置的是"单击" innerHTML设置时,会把内容用html解析,再设置
this.innerText = '<span>单击</span>'; //设置的是"<span>单击</span>" innerText设置时,原样设置, 不解析
};
console.log(document.getElementById('input').value);
document.getElementById('input').value = '八戒'; //表单控件的值比较特殊, 标签行内的值保持不变, 不会变成你给设置的值
</script>
</body>
4.对DOM对象的操作(比如增删改查)
什么是DOM:
文档对象模型: DOM为文档提供了结构化的表示, 并定义了如何通过脚本来访问文档结构.
DOM的作用:
目的其实就是为了能让js操作html元素而制定的一个规范
DOM就是由节点组成的:
解析过程:
html加载完毕, 渲染引擎会在内存中把html文档,生成一个DOM树,getElementById是获取DOM树上的元素节点.然后操作时修改的是该元素的属性
DOM树:
在html中一切都是节点, 所有的节点都是对象object
元素节点: html标签
文本节点: 标签中的文本(包括标签之间的换行, 空格)
属性节点: 标签的属性
DOM可以做什么:
找对象: 元素节点
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应: 事件源,事件,事件的驱动程序
DOM节点的获取:
例如: div#box.box
三种方式: document.getElementById('box')
document.getElementsByClassName('box')[0]
document.getElementsByTagName('div')[0]
DOM访问关系的获取:
DOM的节点不是孤立的, 因此可以通过DOM节点之间的相对关系对它们进行访问:
爷爷 父辈 老大
老二
父辈 老大
节点的访问关系, 是以属性的方式存在的:(sibling 兄弟姐妹)
: 父节点
parentNode
: 兄弟节点
nextSibling
nextElementSibling
priviousSibling
priviousElementSibling
: 子节点
firstChild
firstElementChild
lastChild
lastElementChild
: 所有子节点
childNodes
children
浏览器的兼容性
var a = oLaoda.nextElementSibling || oLada.nextSibling;
获取所有子节点:
.childNodes: 标准属性, 返回的是指定元素的子节点的集合(包括元素节点, 所有属性, 文本节点), 是w3c标准
火狐, chrom等高版本会把换行也看做是子节点
.children: 非标准属性, 返回的是指定元素的子元素节点的集合
他只返回html节点, 甚至不返回文本节点
IE6/7/8中包含注释节点(也就是这些版本的时候: 注释不要写)
获取兄弟节点:
.nextSibling: 下一个节点(包括标签, 空文档, 换行节点)
IE6/7/8:指的是nextElementSibling
.nextElementSibling: 下一个元素节点(只有标签哈)
获取父节点:
调用者就是节点, 一个节点只有一个父节点, 调用方式就是
.parentNode
对DOM对象的操作(DOM由节点组成, 那么就是对节点进行操作):
创建:
<body>
<button id="btn">隐藏</button>
<div class="box" id="box"></div>
<script>
//定时器, 可以让DOM的创建延时加载, 就可以明显看到字盒子是通过js后加上去的, 这种效果
//setTimeout函数的两个参数: 1.回调函数 2.超时时间单位是毫秒(意思是: 2秒后执行回调函数里面的代码)
//回调函数只会被执行一次
setTimeout(
function () {
//获取父盒子
var objFather = document.getElementById('box');
//DOM的创建(即标签的创建); 创建子节点
var objChild = document.createElement('div'); //这里的标签名字可以是任意一个, 但是要让他语义化, 就不能任意创建标签名
objChild.className = 'child';
objChild.style.width = '200px';
objChild.style.height = '200px';
objChild.style.backgroundColor = 'red';
//父节点.appendChild(子元素对象)
objFather.appendChild(objChild);
objChild.style.backgroundColor = 'green'; //子标签属性可以在追加后改, 也可以在追加前更改
},2000
);
</script>
</body>
盒子的显示与隐藏: 方式三: DOM的创建 销毁 创建 销毁
方式一和方式二: 控制style.display属性显示隐藏 和 控制className对元素显示隐藏
有个问题: 初始化的时候有渲染开销
应用: 网页中频繁性的切换建议这两种
方式三: 对元素的创建和销毁, 这个的渲染开销比上面两种大的多
应用: 网页中少量的切换建议使用这个
接口: 就是api: 就是一个url地址
选项卡: 点击的选项变色, 其他不变
<head>
<title>Document</title>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//点一个按钮如何, 让其他按钮不变: 可以利用排他思想, 先让所有的按钮都不变, 然后选中的变化
var objBtns = document.getElementsByTagName('button');
for(var i=0; i<objBtns.length; i++){
objBtns[i].onclick = function () {
for(var j=0; j<objBtns.length; j++){objBtns[j].className = '';}
this.className = 'active';
}
}
</script>
</body>
5.介绍几个事件
onm ouseenter 和 onm ouseover的区别
onm ouseenter: 调用的时机: 只穿过父元素时, 这个事件被调用, 一般用这个,
onm ouseover: 调用的时机: 当鼠标穿过父元素和子元素的时候, 这个事件都被调用
onm ouseleave 和 onmouseout 的区别
好像没啥区别, 和上面的悬停配对使用就行了
<head>
<title>Document</title>
<style>
.father{
height: 50px;
width: 50px;
background-color: red;
position: relative;
}
.child{
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 50px;
display: none;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
<script>
var objFather = document.getElementsByClassName('father')[0]; //用伪数组取其中一个对象时, 这个下标别忘记写A
objFather.onmouseenter = function () {
console.log(this.children[0]);
this.children[0].style.display = 'block';
};
objFather.onmouseleave = function () {
this.children[0].style.display = 'none';
}
</script>
</body>
标签：style,DOM,标签,js,var,document,day43,节点 来源： https://www.cnblogs.com/aiaii/p/11914751.html