前端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('不要点')
}
前端06 /JavaScript之BOM、DOM的更多相关文章
- JavaScript：BOM&DOM
BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...
- javascript （BOM DOM）
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
- JavaScript之BOM+DOM
BOM 浏览器对象模型, 用于把浏览器相关的组件封装为对象进行操作. BOM是包含了DOM的. window对象 弹出框相关 确认: 取消: 与打开关闭window有关的方法 定时器相关 暂停选老婆 ...
- 前端--javaScript之BOM和DOM
BOM和DOM概述 BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话". DOM(Document Object Model ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- 前端学习笔记之BOM和DOM
前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
随机推荐
- Apache（httpd）详解
httpd详解(思维导图) 1. httpd服务 ASF 服务器类型 http服务器 应用程序服务器 httpd的特性 高度模块化 DSO机制 MPM httpd的并发响应模型 prefork wor ...
- Fabric网络节点发现及成员管理
一个新节点通过已知的节点加入到网络中,此时,它所知的网络节点信息是非常有限的,需要通过节点发现获知更多的节点,建立起足够的连接.另外,当一个新节点加入到网络时,原有网络节点也需要通过节点发现感知到新节 ...
- 从字符串到常量池，一文看懂String类设计
从一道面试题开始 看到这个标题,你肯定以为我又要讲这道面试题了 // 这行代码创建了几个对象? String s3 = new String("1"); 是的,没错,我确实要从这里 ...
- Beta冲刺<8/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第八天(05.26) 作业正文 如下 其他参考文献 ... B ...
- docer
docker默认是不保存文件的,包保存文件需要进行映射 dockerfile编写如下 直接下面的命令会失败 因为run后面的命令/bin/bash会失败,执行的是dockffile中定义的httpd ...
- Python3-算法-冒泡排序
冒泡排序 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来,走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成,这个算法的名字由来是因为越大的元素 ...
- Laravel 如何在blade文件中使用Vue组件
Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...
- 深入理解RocketMQ（九）---实战（代码）
一.批量发送消息 即多条消息放入List,一次发送,从而减少网络传输,提高效率 DefaultMQProducer producer = new DefaultMQProducer("bat ...
- Spring Security(三) —— 核心配置解读
摘要: 原创出处 https://www.cnkirito.moe/spring-security-3/ 「老徐」欢迎转载,保留摘要,谢谢! 3 核心配置解读 上一篇文章<Spring Secu ...
- spring boot 整合Thymeleaf模板
SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...