前端 day 06 5.18 js入门终章，DOM，BOM操作·
5.18
上周回顾
html
-
文档结构：html，head，body
-
标签的分类
- 单标签，双标签
- 块级标签，行内标签，特例：p标签
-
特殊符号： ，&，>...
-
常用标签
- div
- span
- a：href，target
- img：src，alt，title，height，width
- ul-li列表标签，自带40的padding-left
- table表格标签
- thead：th/td
- tbody
-
form表单
用来获取前端数据，用户点击，上传，输入的
主要属性： - action：用户数据提交的路径 不写：默认向当前url提交 全写：向指定url提交 写后缀 - method：控制提交方式：post，get，默认是get请求 - enctype：控制数据提交的编码格式：urlencoded，formdata 朝后端发的，一定写在form表单内 <form></form> -
input标签
可以在form表单内，接收用户的输入
type属性
text password date radio checked 默认选中 checkbox file submit //触发表单的提交动作 button 标签也可以 reset -
select标签
下拉选项标签，一个个选项写在option内
-
textarea
论坛评论，个性签名，可以获取大段文本
-
获取用户数据的标签都应该有name属性来表明数据的含义，类似于字典的key
获取到的用户数据类似于字典的value
CSS
-
基本
- 用于书写html样式 - 注释/**/ - 引入方式：style，link，行内 -
查找标签
选择器：属性名:属性值
-
基本选择器
#id {} //id选择器 .class {} //类选择器 html,body {} //标签选择器 * {} //选择所有 -
组合选择器
将标签的嵌套关系描述成亲戚关系
div span{} /*后代，div里面所有的span*/ div>span {} /*儿子，div下第一层span*/ div+span{} /*毗邻，靠近div下方的*/ div-span{} /*弟弟选择器*/ -
不同的选择器可以并列混用
使用逗号
,，空格 -
伪类选择器
a标签的四个状态：link，hover，active，visited
input框聚焦：focus
-
伪元素选择器
first-letter before,after：解决浮动带来的影响：.clearfix:after -
属性相关
字体相关：font-family，font-size，font-weight 颜色相关：color：rgb()，rgba()，#EEEEEE text-align:center background:red url("") no- repeat center; background-attachment: fixed; 边框：border: solid 2px black; 例子：圆形头像 display:block,inline,inline-block; -
盒子模型
margin，border，padding，center -
浮动
float，左或着右，浮动的元素回造成父标签塌陷
清除浮动 .clearfix，哪里塌陷加在哪里
.clearfix:after { content:''; display:block; clear:both; } -
定位
相对，绝对，固定，静态
-
z-index
模态框，登陆界面三层窗口
-
透明度：opacity，shadow
JavaScript
-
面对对象的编程语言，可以在浏览器里运行
-
基本
//注释 /*注释*/ /*引入方式：script*/ -
变量
- 声明变量用关键字：var，let - 常量const - 命名规范 - 数字字母下划线，$ - 推荐驼峰体 - 不能用关键字 -
数据类型
- 数值类型：number，NaN - 字符类型：string 模板字符串`${name}` - 布尔值 - null，undefined - 数组对象Array，对应python的列表 -
运算符
++，===，&&，||，！ -
流程控制
//if if(a){ console.log(a) }else if(b){ console.log(b) }else{ console.log(c) } //for for(let i=0;i++;i<10){ console.log(i) } //while while(i<10){ console.log(i) } -
三元运算
res = 1>2?a:b -
函数
function func(arg1,arg2){ arguments return '只能返回一个' }箭头函数
var func = v =>v //函数名，形参，返回值 -
自定义对象
在js创建对象有一个关键字new
//两种创建方式 //第一种，直接写 d1 = {'name':'aaa','age':21} //第二种，使用new先得到一个空对象，再给对象加属性 d2 = new Object d2.name = 'aaa' -
json对象
JSON.stringify() //dumps JSON.parse() //loads -
date对象，math对象，regexp对象
今日内容
- js结束
- dom与bom
- jQuery框架
BOM与DOM操作
学了这些操作，才能把JavaScript用在浏览器上
BOM：浏览器对象模型，js代码操作浏览器
DOM：文档对象模型，js代码操作标签
BOM操作
window对象
window对象指代的就是浏览器窗口
//一些方法
window.innerHeight //得到当前浏览器窗口高度
window.innerWidth //当前浏览器窗口的宽度
window.open(url,'','height=800px,width=400px') //新建一个浏览器窗口，指定url，宽度高度
//还可以用来扩展父子页面通信window.opener()
window.close() //关闭当前的网页
winidow子对象
window.navigator.appName
window.navigator.appVersion
window.navigator.userAgent //用来表示当前是否是一个浏览器，爬虫的时候用于伪装是浏览器访问
window.navigator.platorm
history对象
window.history.back() //回退到上一页
window.history.forward() //前进到下一页
//浏览器左上角的两个箭头
location对象 掌握
window可以省略
window.location.href //获取当前页面的url
window.location.href = url //让页面跳转到指定的url
window.location.reload() //刷新页面
弹出框
-
警告框
alert('警告信息') -
确认框
confirm('确认信息') //会返回用户点击了取消或着确认 -
提示框
prompt('提示内容','输入框内容') //可以接收输入
计时器相关 重要
-
过一段时间后触发，只触发一次：setTimeout
<script> function func1(){ alert(123) } let t = setTimeout(func1,3000) //毫秒为单位，3秒后执行func1任务 clearTimeout(t) //取消定时任务 //如果想要取消，需要先指定定时任务 </script> -
一段时间就触发一次，循环触发：setInterval
//计时器，每三秒触发一次，弹出三次之后不再弹出 <script> function func2(){ alert(123) } function show(){ let t = setInterval(func1,3000) function inner(){ clearInterval(t) } setTimeout(inner,9000) } show() </script>
DOM操作
DOM树
DOM规定html文档中每个成分都是一个节点
JavaScript可以通过DOM创建动态的html，对页面的所有时间做出反应
先学查找标签，再学操作标签
DOM操作需要用关键字document起手
查找标签
-
直接查找：id查找，类查找，标签查找
<!--id查找--> document.getElementById('d1') <!--类名查找，得到一个数组，数组[索引]才能对指定一个标签操作--> document.getElementsByClassName('c1') <!--标签查找，得到一个数组--> document.getElementsByTagName('div')[1] -
间接查找：
parentElement //父节点标签元素 children //所有子标签 firstElementChild //第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementSibling //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素
DOM节点操作
createElement，appendChild，.insertBefore(添加的，被插入的)，.removeChild()，.innerText()，setAttribute(‘name’,’value’)
//例：创建一个标签，将标签添加到原本的html中
let imgEle = document.createElement('img')
//创建一个img标签
imgEle.src = 'snuff.png'
//通过直接点等于，设置属性
imgEle.setAttribute('name','aaa')
//设置自定义属性，这个方法也可以设置默认属性
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)
//appendChild把图片标签添加在divele的最下面
//例，创建a标签，设置文本，添加到标签内部的顶部
let aEle = document.createElement('a')
//创建一个a标签
aEle.href= 'http://emoboy.club/'
//给标签添加链接
aEle.innerText = '点击跳转'
//添加a标签内部文字
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
//通过id找打要插入的位置，pele之前
divEle.insertBefore(aEle,pEle)
//把aele插入放在pele之前
divEle.innerText //得到标签内的所有文本
divEle.innerHTML //得到标签内的所有html代码：标签
//也可以通过设置这两个值，改变页面的元素
divEle.innerText = '<h1>hhh</h1>' //不识别html标签
divEle.innerHTML = '<h1>hhh</h1>' //识别html标签
获取值操作
.value
//获取用户输入的标签内的数据
//一个普通的input输入框
let inputEle = document.getElementById('input1')
inputEle.value
//得到输入框内已经输入的值
//获取input上传的文件
let fileEle = document.getElementById('file1')
fileEle.value //只能得到文件的路径名
fileEle.files //得到一个数组，数组的第一个就是这个文件
fileEle.files[0] //上传的文件
class，CSS操作
以id为d1的div标签为例，操作class
let divEle = document.getElementById('d1')
divEle.classList //获取标签所有的类属性
//DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
divEle.classList.remove('bg_red') //移除某个类属性
divEle.classList.add('bg_red') //添加类属性，要先写好这个属性，才能添加
divEle.classList.contains('c1') //验证是否包含某个类属性，返回true/false
divEle.classList.toggle('bg_red') //有则删除无则添加
DOM操作CSS
统一用style起手，style.属性
let pEle = document.getElementsByTagName('p')[0] //以第一个p标签为例
pEle.style.color = 'red' //改变字体颜色
pEle.style.fontSize = '28px' //改变字体大小
css中所有带横杠的，在dom操作css的时候，都把横杠去掉，变成驼峰体
font-size ====> fontSize
background-color ====> backgroundColor
事件
满足某种条件，触发，如点击，按下键盘，输入框获得焦点
绑定事件的两种方式
写在标签里面，标签查找
<body>
<button onclick="func1">点1</button>
<button id="d1">点2</button>
<script>
function func1(){
alert('123')
}
let btnEle=document.getElementById('d1')
btnEle.onclick = function(){
alert('222')
}
</script>
</body>
script标签可以放在header内，也可以放在body内，但是通常情况下，都放在body内的最下方
因为加载顺序从上往下，如果js放在body顶部，会找不到标签。引入js文件，或着在html里写js，都放在body的最下面
window.onload = function(){
...
}
等待浏览器窗口加载完毕再运行的代码
