DAY9
一、浏览器的 onscroll 事件
这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，或者鼠标滚轮滚动的时候出发
window.onscroll = function () {
console.log('浏览器滚动了')
}
- 注意：前提是页面的高度要超过浏览器的可视窗口才可以
scrollTop 获取滚动的距离
滚动距离
document 文档对象
获取的是页面向上滚动的距离
两种方式
document.body.scrollTop 没有<!DOCTYPE html>
document.documentElement.scrollTop 有<!DOCTYPE html>
//兼容写法 || 只有有一个条件成立直接使用即可
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
function getScrollTop(){
if(document.body.scrollTop){
return document.body.scrollTop
}else{
return document.documentElement.scrollTop
}
}
二、滑动导航栏
window.onscroll = function () {
// 判断 当距离 > 多少的 时候 让导航栏 显示出来
var top = document.body.scrollTop || document.documentElement.scrollTop
if (top > 500) {
nav.style.top = 0
}else{
nav.style.top = '-100px'
}
}
btn.onclick = function () {
// var top = document.body.scrollTop || document.documentElement.scrollTop
// top = 0 // 直接给一个变量赋值 和页面滚动没有关系 我们要设置的不是变量 是页面卷曲出去的距离
var timer = setInterval(function () {
document.body.scrollTop ? document.body.scrollTop -= 10 : document.documentElement.scrollTop -= 10
var top = document.body.scrollTop || document.documentElement.scrollTop
if (top === 0) {
clearInterval(timer) //清除定时器
}
}, 10) //每10毫秒移动10像数
}
三、浏览器不包含滚动条的宽和高
console.log(window.innerWidth)
console.log(document.documentElement.clientWidth)
console.log(window.innerHeight)
console.log(document.documentElement.clientHeight)
四、获取元素的尺寸
三大系列
1、client
1、clientWidth clientHeight 元素内容 + padding
console.log(box.clientWidth)
console.log(box.clientHeight)
2、clientLeft clientTop 元素左边框 border-left和上边框border-top的宽度
console.log(box.clientLeft)
console.log(box.clientTop)
2、offset
3、offsetWidth offsetHeight 元素内容 + padding + border
console.log(box.offsetWidth)
console.log(box.offsetHeight)
4、offsetLeft offsetTop
- 没有定位的时候 元素相对于页面左边和页面上边的距离 （margin）
- 有定位的时候 元素相对于有定位的父元素左边和上边的距离
console.log(box.offsetLeft)
console.log(box.offsetTop)
3、page
五、BOM方法扩展
open() 在新窗口打开一个页面,参数1表示打开网站地址 参数2表示是否新窗口打开 参数3表示新窗口样式
close() 关闭当前页面
btn.onclick = function(){
window.open('http://www.baidu.com','_blank', 'width=500, height=500')
}
btn1.onclick = function(){
window.close()
}
onresize 窗口大小改变的时候触发
window.onresize = function(){
console.log(‘函数触发’)
}
六、DOM
BOM 浏览器对象模型
DOM 文档对象模型 就是提供了一系列方法让我去操作页面上的元素
DOM 里面有一个顶级对象 document
console.log(document)
//循环执行
var s1 = '★☆★Javascript学习网★☆★'
var s2 = '☆★☆Javasctipte学习网☆★☆'
//定时器
// 开关变量
var isOpen = true
setInterval(function(){
if(isOpen){
document.title = s1
isOpen = false
}else{
document.title = s2
isOpen = true
}
},1000)
七、获取页面元素
<div calss="box" id="box"></div>
1、通过 id 名字获取元素
获取到的就是页面中的那个 id 为 box 的 div 标签
getElementById
var box = document.getElementById("box")
console.log(box) // <div></div>
2、通过 class 类名获取元素
getElementsByClassName 不能直接使用 class 因为 class 是一个关键字
获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是伪数组
返回值是一个伪数组 有索引号，可以遍历但是不能直接使用数组的方法
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
var ul = document.getElementById('uu1')
var reds = ul.getElementsByClassName("red")
在整个文档里面去获取
console.log(reds)
3、通过 标签名获取元素 返回值是伪数组
getElementsByTagName()
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
4、通过 css 选择器(任意的 css 选择器都可以)获取元素
querySelector()
queryselector系列
id选择器
标签选择器
类选择器
...
只能获取满足条件的第一个元素
var li = document.querySelector('li:nth-child(odd)') //odd是奇数行，even是偶数行
console.log(li)
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
5、通过 css 选择器获取元素 (多个)
querySelectorAll()
获取所有满足条件的元素
var lis = document.querySelectorAll('li')
console.log(lis)
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
伪数组不能使用数组的方法
通过 querySelectorAll() 获取的伪数组 能够使用数组的 forEach 方法
lis.forEach(function(item) {
console.log(item)
八、获取页面上的属性元素
1、获取 html
document.documentElement
console.log(document.documentElement)
2、获取 body
document.body
console.log(document.body)
3、获取的是 title 标签里面的内容
document.title
console.log(document.title)
4、获取表单元素
通过表单元素的 name 属性获取元素
getElementsByName()
console.log(document.getElementsByName('username'))
九、简单操作元素属性
// 通过标签名获取元素 || 通过 css 选择器获取元素
var ul = document.getElementsByTagName('ul')[0]
// console.log(ul)
var li = ul.getElementsByTagName('li')[3]
// console.log(li)
1、id
console.log(ul.id)
ul.id = ‘uu1’
2、className
-
专门用来操作元素的类名的
<body> <div class="box"></div> <script> var div = document.querySelector('div') console.log(div.className) // box </script> </body> -
也可以设置元素的类名，不过是全覆盖式的操作
<body> <div class="box"></div> <script> var div = document.querySelector('div') div.className = 'test' console.log(div) // <div class="test"></div> </script> </body>-
在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
系统自带的
元素.classList.add(类名)
元素.classList.remove(类名)
<style> .f1{ background-color: brown; width: 200px; height: 200px; } .f2{ line-height: 200px; text-align: center; } </style> <body> <!-- className --> <button id="btn2">className类样式</button> <div id="box2" class="f1">元素二</div> <!-- classList --> <button id="btn3">className类样式</button> <div id="box3" class="f1">元素三</div> <script> //1. 获取button按钮设置点击事件 var btn3Ele = document.querySelector('#btn3') btn3Ele.onclick = function(){ // 2. 获取元素三 var box3Ele = document.querySelector('#box3') // box3Ele.classList.add('f2') box3Ele.classList.remove('f1') console.log(box3Ele) //<div id="box3">元素三</div> } //1. 获取button按钮设置点击事件 var btn2Ele = document.querySelector('#btn2') btn2Ele.onclick = function(){ // 2. 获取元素二 var box2Ele = document.querySelector('#box2') box2Ele.className = 'f2' console.log(box2Ele) //<div id="box2" class="f2">元素二</div> } </scripts> </body>
-
3、style
-
专门用来给元素添加 css 样式的
-
添加的都是行内样式
元素.style.样式名 = 样式值
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
// <div style="width: 100px; height: 100px; background-color: pink;"></div>
</script>
</body>
4、innerHTML
获取: innerHTML 能获取到标签但是是字符串显示
设置:都是全覆盖 直接把本身有的内容替换
-
获取元素内部的 HTML 结构
<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerHTML) /* <p> <span>hello</span> </p> */ </script> </body> -
设置元素的内容
<body> <div></div> <script> var div = document.querySelector('div') div.innerHTML = '<p>hello</p>' </script> </body>- 设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素
5、innertext
innerText 获取: innerText 只能获取元素里面的文本内容
-
获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）
<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerText) // hello </script> </body> -
可以设置元素内部的文本
<body> <div></div> <script> var div = document.querySelector('div') div.innerText = '<p>hello</p>' </script> </body>- 设置完毕以后，会把
<p>hello</p>当作一个文本出现在 div 元素里面，而不会把 p 解析成标签
- 设置完毕以后，会把
6、getAttribute
获取元素的自定义属性
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('a')) // 100
console.log(div.getAttribute('class')) // box
</script>
</body>
7、setAttribute
给元素设置一个属性（包括自定义属性）
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.setAttribute('a', 100)
div.setAttribute('class', 'box')
console.log(div) // <div a="100" class="box"></div>
</script>
</body>
8、removeAttribute
直接移除元素的某个属性
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
div.removeAttribute('class')
console.log(div) // <div a="100"></div>
</script>
</body>
9、value
<body>
用户名: <input type="text" id="username" value=""/>
<script>// 表单内容获取
var inputEle = document.querySelector('#username')
inputEle.value = 'zhousir'
console.log(inputEle.value) //zhousir
</script>
</body>
6741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
