前端06 /JavaScript之BOM、DOM
前端06 /JavaScript
目录
昨日内容回顾
js的引入
方式一:
<script>
js代码
</script>
方式二:
<script src='xxxx.js'></script>
js的编程要求
结束符 ;
注释 // 单行注释
/*多行注释*/
变量
声明 var
变量的命名 : 数字 字母 下划线 $
不能用js中的保留字
输入输出
alert('弹出的警告框')
console.log('在控制台里打印')
var inp = prompt('请输入内容 :')
基础数据类型
number
整数和小数都属于number类型
toFixed(2) 保留两位小数
string
'字符串' "字符串"
属性 :length
方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值)
toLowerCase(),toUpperCase()
boolean
true [] {}
false undefined null NaN 0 ''
null
设置为空
undefined
未定义 当一个变量只声明 不赋值的时候
转换
parseInt('123') 字符串转数字
parseFloat('1.235') 字符串转小数
String(undefined) 小数转字符串(推荐)
var a = 123
a.toString() 数字转字符串
Boolean(数据类型) 任意类型转换成boolean
内置对象类型
array
var a = [1,2,3,4]
var a = new Array([1,2,3,4])
属性:length
方法:push() pop() shift() unshift()
slice() reverse() join('sep') sort() splice(1,2,'新的值') concat()
自定义对象
var obj = {'alex':'name'} //对象
json数据类型序列化
'{"key":18,"123":[1,2,3]}'
自定义对象 = JSON.parse(json字符串)
json字符串 = JSON.stingify(自定义对象)
运算符
算数运算符 : + - * / ** % ++ -- var b = ++a varb = a++
赋值运算符 : = += -= *= /= %=
比较运算符 : > < >= <= == != === !==
逻辑运算符 : &&与 ||或 !非
流程控制
条件判断
if(条件){
//满足条件之后要执行的代码
}else if(条件){
//满足条件之后要执行的代码
}else{
//都不满足之后要执行的代码
}
switch(值){
case 值1:
代码;
break
case 值2:
代码;
break
default:
代码
}
循环
while(条件){
循环体
}
for(var i=0;i<10;i++){
循环体
}
for(i in arr){
i是索引,arr[i]是具体的值
}
for(vari=0;i<arr.length;i++){
i是索引,arr[i]是具体的值
}
三元运算符
var 值 = 条件 ? 条件为true返回的内容:条件为false返回的内容
函数
function 函数名(参数){
函数体
return 返回值 //返回值的个数必须是一个,如果返回多个值,放在数组中返回
}
函数名(参数)
arguments 函数中内置的动态单数,可以接收所有的参数
匿名函数
var 变量名 = function(参数){
函数体
return 返回值
}
自调用函数
(function(形参){
函数体
return 返回值
})(实参)
今日内容
1.BOM
location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面
定时器
1. setTimeOut() 一段时间之后执行某个内容,执行一次
示例
var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000); 单位毫秒
清除计时器
clearTimeout(a);
2.setInterval() 每隔一段时间执行一次,重复执行
var b = setInterval('confirm("xxxx")',3000);单位毫秒
清除计时器
clearInterval(b);
2.DOM
2.1 什么是dom
document object modle 文档对象模型
整个文档就是一颗树
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
在页面上还有一些动作效果:
根据人的行为改变的 点击 鼠标悬浮
自动在改变的
2.2 js是怎么给前端的web加上动作的呢?
1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签
2.3 查找标签
1.直接查找
var a = document.getElementById('baidu') //根据ID获取一个标签，直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('son') //根据class属性获取，返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象
var divs = document.getElementsByTagName('div') //根据标签名获取标签合集，返回元素组成的数组
console.log(divs)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
操作:
var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');
2.间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
操作:
var divEle = document.getElementById('d1');
找父级:divEle.parentElement;
找儿子们:divEle.children;
找第一个儿子:divEle.firstElementChild;
找最后一个儿子:divEle.lastElementChild;
找下一个兄弟:divEle.nextElementSibling;
3.标签操作
创建标签:重点
var aEle = document.createElement('a');
//aEle就是一个新创建出来的标签对象
添加标签
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
示例:
var divEle = document.getElementById('d1')
divEle.appendChild(aEle)
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例:
var divEle = document.getElementById('d1'); 找到父级标签div
var a = document.createElement('a'); 创建a标签
a.innerText = 'baidu'; 添加文本内容
var span2 = document.getElementById('s2'); 找到div的子标签span2
divEle.insertBefore(a,span2); 将a添加到span2的前面
html文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
删除节点
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);
替换节点：
somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉
标签的复制
节点.cloneNode() //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
4.文本节点操作
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签
取值示例:
div2.innerText; 不识别标签
"are you ok? span1 span2 span3"
div2.innerHTML; 识别标签
"
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
"
设置值:
var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';
2.4 属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."
示例:
<a href="http://www.baidu.com">百度</a>
操作
var a = document.getElementsByTagName('a');
a[0].href; 获取值
a[0].href = 'xxx'; 设置值
2.5 获取值操作
输入框 input
获取值
var inpEle = document.getElementById('username');
inpEle.value;
设置值
inpEle.value = 'alexDsb';
select选择框
获取值
var selEle = document.getElementById('select1');
selEle.value;
设置值
selEle.value = '1';
2.6 类操作
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList; 标签对象所有的class类值
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
示例:
var divEle = document.getElementById('d1');
divEle.classList.toggle('cc2');
var a = setInterval("divEle.classList.toggle('cc2');",30);
判断有没有这个类值的方法
var divEle = document.getElementById('d1');
divEle.classList.contains('cc1');
2.7 css设置
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
设置值:
divEle.style.backgroundColor = 'yellow';
获取值
divEle.style.backgroundColor;
3.事件
简单示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc1 {
width: 100px;
height: 100px;
background-color: red;
}
.cc2{
background-color: green;
}
</style>
</head>
<body>
<div class="cc1 xx xx2" id="d1">
</div>
<script>
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
}
</script>
</body>
</html>
绑定事件的方式
方式1:
<script>
var divEle = document.getElementById('d1'); 1.找到标签
divEle.onclick = function () { 2.给标签绑定事件
divEle.style.backgroundColor = 'purple';
}
</script>
下面的this表示当前点击的标签
var divEle = document.getElementById('d1');
divEle.onclick = function () {
this.style.backgroundColor = 'purple';
}
方式2
标签属性写事件名称=某个函数();
<div class="cc1 xx xx2" id="d1" onclick="f1();"></div>
<script>
js里面定义这个函数
function f1() {
var divEle = document.getElementById('d1');
divEle.style.backgroundColor = 'purple';
}
</script>
获取当前操作标签示例,this标签当前点击的标签
<div class="cc1 xx xx2" id="d1" onclick="f1(this);"></div>
function f1(ths) {
ths.style.backgroundColor = 'purple';
}
绑定方式:
<button id="btn">点击一下</button>
方式一:
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('点我干嘛')
}
方式二:
btn.onclick = clik
function clik() {
alert('不要点')
}
方式三:
<button id="btn" onclick="clik()">点击一下</button>
function clik() {
alert('不要点')
}
