JavaScript基础②

BOM操作

  1. 浏览器可视窗口尺寸

    JS

1
2
3
4
5
6
7
8
9
// 浏览器可视窗口尺寸
// 获取浏览器可视窗口的宽度
var w = window.innerWidth
// 获取浏览器可视窗口的高度
var h = window.innerHeight9898
// 输出一下
console.log(w)
console.log(h)
  1. 浏览器的弹出层

    JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 浏览器的弹出层
// 提示框
// window.alert( '欢迎光临' )
// 询问框
// var res = window.confirm( 'how are you?' )
// // // 输出返回值
// console.log( res )
// // 输入框
var res = window.prompt(' 请输入您的qq')
// // 输出返回值
console.log( res )
  1. 开启和关闭标签页

    HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <button id="on"> 开启 </button>
  <button id="off"> 关闭 </button>
  <script>
    // 开启按钮的点击事件
    on.onclick = function () {
      // 开启标签页
      window.open( 'http://www.mobiletrain.org/' )
    }
    // 关闭按钮的点击事件
    off.onclick = function () {
      // 关闭标签页
      window.close()
    }
  </script>
</body>
  1. 浏览器常见事件

    HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <img src="http://upload.mobiletrain.org/2021/0224/1614152185802.jpg" alt="">
  <script>
    // // 资源加载完毕
    window.onload = function () {
      console.log( '资源已经加载完毕' )
    }
    // 窗口尺寸改变
    // window.onresize = function () {
    //   console.log( '窗口尺寸发生变化了' )
    // }
    // 滚动条位置改变
    // window.onscroll = function () {
    //   console.log( '滚动条位置改变了' )
    // }
  </script>
</body>
  1. 浏览器滚动scrollTo

    HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <button id="go"> 走你 </button>
  <script>
    // // 按钮添加点击行为
    // go.onclick = function () {
    //   // 浏览器滚动到指定位置
    //   window.scrollTo( 300, 400 )
    // }
    // 按钮添加点击行为
    go.onclick = function () {
      // 浏览器滚动到指定位置
      window.scrollTo({
        left: 300,
        top: 400,
        behavior: 'smooth'
      })
    }
  </script>
</body>

js定时器

间隔定时器

HTML

1
2
3
4
5
6
7
8
9
10
<script>
  // 间隔定时器
  // 书写一个定时器
  setInterval(function () {
    console.log( '执行一次' )
  }, 1000)
</script>

JavaScript基础②

延时定时器

HTML

1
2
3
4
5
6
7
8
9
10
<script>
  // 间隔定时器
  // 书写一个定时器
  setTimeout(function () {
    console.log( '执行一次' )
  }, 5000)
</script>//打开浏览器的第五秒执行

定时器的返回值

JS

1
2
3
4
5
6
7
8
9
10
11
// 定时器返回值
// 书写第一个定时器
var timer1 = setInterval(function () {}, 1000)
// 书写第二个定时器
var timer2 = setTimeout(function () {}, 1000)
// 输出返回值
console.log( 'timer1 : ', timer1 )
console.log( 'timer2 : ', timer2 )

是第几个定时器就返回数字

JavaScript基础②

关闭定时器

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 定时器返回值
// 开启定时器
// 书写第一个定时器
var timer1 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
// 书写第二个定时器
var timer2 = setTimeout(function () {
  console.log('延时定时器')
}, 3000)
// // 给按钮绑定点击事件
off.onclick = function () {
  // 关闭定时器
  clearInterval(timer1)
  clearInterval(timer2)
}

DOM操作

获取元素的方式

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
  <div>一号</div>
  <div class="box">二号</div>
  <div class="box content">三号</div>
  <div class="box" id="container">四号</div>
  <script>
    // 获取元素的方式
    // 根据 id 获取页面元素
    // var ele = document.getElementById( 'abc' )
    // 输出返回值
    // console.log(ele)
    // 根据类名获取页面元素
    // var eles = document.getElementsByClassName( 'box' )
    // 输出返回值
    // console.log( eles )
    // 根据标签名获取页面元素
    // var eles = document.getElementsByTagName( 'div' )
    // 输出返回值
    // console.log( eles )
    // 根据选择器获取一个
    // var ele = document.querySelector( '.box' )
    // 输出返回值
    // console.log( ele )
    // 根据选择器获取一组
    var eles = document.querySelectorAll( '#container' )
    // 输出返回值
    console.log( eles )
  </script>
</body>

操作元素文本内容

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
  // 操作元素文本内容
  // 获取元素
  // var ele = document.querySelector( 'div' )
  // var btn = document.querySelector( 'button' )
  // // 获取元素的文本内容
  // console.log( ele.innerText )
  // // 给 按钮 绑定点击事件
  // btn.onclick = function () {      
  //   // 设置 div 内的文本内容
  //   ele.innerText = '新内容'
  // }
  // 获取元素
  var ele = document.querySelector( 'div' )
  var btn = document.querySelector( 'button' )
  // 获取元素的文本内容
  console.log( ele.innerHTML )
  // 给 按钮 绑定点击事件
  btn.onclick = function () {
    // 设置 div 内的文本内容
    ele.innerHTML = '<span>新内容</span>'
  }
</script>

操作元素属性

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
  <button>操作属性</button>
  <div id="box" hello="world">div 标签</div>
 <input type="" name="" id="" value="" />
  <script>
    // 操作元素属性
    // 原生属性
    // 获取元素
    var box = document.querySelector( 'div' )
    var inp = document.querySelector( 'input' )
    var btn = document.querySelector( 'button' )
    // // 获取元素属性
    // console.log( box.id )
    // console.log( inp.type )
    // // 给按钮绑定点击事件
    // btn.onclick = function () {
    //   // 修改元素属性
    //   box.id = 'content'
    //   inp.type = 'checkbox'
    // }
    // 获取自定义属性
    var res = box.getAttribute( 'hello' )
    console.log( res )
    // 给按钮绑定点击事件
    btn.onclick = function () {
      // 修改自定义属性
      box.removeAttribute('hello')
    }
  </script>
</body>

操作元素类名

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <button>操作类名</button>
  <div class="content">文本内容</div>
  <script>
    // 操作元素类名
    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )
    // 获取类名
    console.log( box.className )
    // 给 按钮 绑定点击事件
    btn.onclick = function () {
      // 设置 div 内的类名
      box.className = '新内容'
    }
  </script>
</body>

操作元素样式

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
  <button>操作样式</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
  <script>
    // 操作元素类名
    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )
    // 获取样式
    console.log( box.style.width )
    console.log( box.style.height )
    console.log( box.style.backgroundColor )
    // 给 按钮 绑定点击事件
    btn.onclick = function () {
      // 设置 div 的样式
      box.style.width = '200px'
      box.style.height = '300px'
      box.style.backgroundColor = 'skyblue'
    }
  </script>
</body>

操作元素非行内样式

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <button>操作类名</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
  <script>
    // 操作元素类名
    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )
    // 获取样式
    console.log( window.getComputedStyle(box).width )
    console.log( window.getComputedStyle(box).height )
    console.log( window.getComputedStyle(box).fontSize )
  </script>
</body>

案例:回到顶部

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 3000px;
    }
    .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background-color: skyblue;
      transition: top .5s linear;
      position: fixed;
      top: -80px;
      left: 0;
    }
    .goTop {
      width: 50px;
      height: 50px;
      background-color: pink;
      font-size: 20px;
      text-align: center;
      line-height: 25px;
      color: #fff;
      position: fixed;
      bottom: 50px;
      right: 50px;
      display: none;
    }
  </style>
</head>
<body>
  <div class="header">顶部通栏</div>
  <div class="goTop">回到顶部</div>
  <script>
  var header =document.querySelector('.header')
  var goTop = document.querySelector('.goTop')
   window.onscroll = function () {
	   var height = document.documentElement.scrollTop || document.body.scrollTop
	   if(height>=300){
		   header.style.top='0px'
		   goTop.style.display='block'
	   }
	   else{
		   header.style.top='-80px'
		    goTop.style.display='none'
	   }
   }
    goTop.onclick=function(){
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		})
	}
  </script>
</body>
</html>

案例:全选

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100px;
      padding: 20px;
      border: 1px solid pink;
      margin: 30px auto;
      border-radius: 5px;
    }
    hr {
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    全选 : <input type="checkbox"> <br>
    <hr>
    <input type="checkbox"> 选项一 <br>
    <input type="checkbox"> 选项二 <br>
    <input type="checkbox"> 选项三 <br>
    <input type="checkbox"> 选项四 <br>
  </div>
  <script>
    // 1. 获取元素
    var allBtn = document.querySelector('input')
    var items = document.querySelectorAll('input:nth-child(n + 2)')
    // 2. 给全选按钮绑定事件
    allBtn.onclick = function () {
      // 2-1. 拿到自己的选中状态
      var type = allBtn.checked
      // 2-2. 把自己的选中状态设置给每一个选项按钮
      for (var i = 0; i < items.length; i++) {
        items[i].checked = type
      }
    }
    // 3. 循环给每一个选项按钮绑定点击事件
    for (var i = 0; i < items.length; i++) {
      // 3-1. 给每一个选项按钮绑定点击事件
      items[i].onclick = function () {
        // 3-2. 首先定义假设变量.
        var flag = false
        // 3-3. 通过循环来验证我们的假设
        for (var j = 0; j < items.length; j++) {
          if (items[j].checked === true) {
            flag = true//如果遍历的每个都为真,则为真。
          }
		  else{
			  flag= false//如果有一个是假的,则暂停,直接返回假
			break
		  }
        }
        // 3-4. 把我们得到的结果设置给全选按钮
        allBtn.checked = flag
      }
    }
  </script>
</body>
</html>

JavaScript基础②

案例:选项卡

JavaScript基础②

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, ol, li {
      list-style: none;
    }
    .box {
      width: 600px;
      height: 400px;
      border: 3px solid pink;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }
    .box > ul {
      height: 60px;
      display: flex;
    }
    .box > ul > li {
      flex: 1;
      color: #fff;
      background-color: skyblue;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
	  border-right: 1px solid black;
    }
    .box > ul > li.active {
      background-color: orange;
    }
    .box > ol {
      flex: 1;  /*flex:1表示平分空间*/
      position: relative;
    }
    .box > ol > li {
      width: 100%;
      height: 100%;
      background-color: purple;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 100px;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    .box > ol > li.active {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <script>
    // 1. 获取元素
    var btns = document.querySelectorAll('ul > li')
    var tabs = document.querySelectorAll('ol > li')
    // 2. 给 btns 里面所有按钮添加点击事件
    btns.forEach(function (item, index) {
	console.log(item)//foreach函数forEach 是 ES5 中操作数组的一种方法,主要功能是遍历数组,其实说穿了,就是 for 循环的加强版,该语句需要一个回调函数,作为参数。回调函数的形参,依次为,value:遍历的数组内容;index:对应的数组索引,array:数组本身。
      item.onclick = function () {
   console.log(item)//点哪里,index的值就是你点击对应的索引
   console.log(index)//点哪里,index的值就是你点击对应的索引
        // 2-2. 给 btns 和 tabs 里面的所有内容取消 active 类名
        btns.forEach(function (t, i) {
          t.className = ''
          tabs[i].className = ''
        })
        // 2-3. 当前点击的按钮和索引对应的盒子添加 active 类名
        item.className = 'active'
        tabs[index].className = 'active'
      }
    })
  </script>
</body>
</html>

console.log(item)//点哪里,item的值就是你点击对应的currentvalue

console.log(index)//点哪里,index的值就是你点击对应的索引

JavaScript基础②

创建节点

JS

1
2
var div=document.createElement('div')
console.log(div)

JavaScript基础②

插入节点

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
  <p>我是 div 内本身的 p 标签</p>
</div>
<script>
  // 创建一个 span 标签
  var span = document.createElement('span')
  // 向 span 内添加一些文本内容
  span.innerText = '我是创建出来的 span 标签'
  // 输出一下
  console.log(span)
  // 获取到页面上的 div 元素
  var div = document.querySelector('div')
  // 把创建的 span 标签插入到 div 内部
  div.appendChild(span)
</script>

JavaScript基础②

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <div>
   <p>我是 div 内本身的 p 标签</p>
 </div>
 <script>
// 创建一个 span 标签
   var span = document.createElement('span')
   // 向 span 内添加一些文本内容
   span.innerText = '我是创建出来的 span 标签'
   // 输出一下
   console.log(span)
   // 获取到页面上的 div 元素
   var div = document.querySelector('div')
   // 获取到 div 内部本身的 p 标签
   var p = document.querySelector('p')
   // 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面
   div.insertBefore(span, p)
 </script>

JavaScript基础②

删除节点

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div>
   <p>我是 div 内部本身的 p 标签</p>
   <span>我是 div 内部本身的 span 标签</span>
 </div>
 <script>
   // // 获取到 div 元素
   // var div = document.querySelector('div')
   // // 获取到 p 元素
   // var p = document.querySelector('p')
   // // 从 div 内删除 p 元素
   // div.removeChild(p)
   // 获取到 div 元素
   var div = document.querySelector('div')
   // 把 div 删除
   div.remove()
 </script>

替换节点

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
    <p>我是 div 内的 p 标签</p>
    <span>我是 div 内的 span 标签</span>
    <p>我是 div 内的 p 标签</p>
  </div>
  <script>
    // 创建一个 i 标签
    var i = document.createElement('i')
    // 向 i 标签内添加一些文本
    i.innerText = '我是创建出来的 i 标签'
    // 获取到 div 元素
    var div = document.querySelector('div')
    // 获取到 span 元素
    var span = document.querySelector('span')
    // 使用创建的 i 标签去替换 div 内本身的 span 标签
    div.replaceChild(i, span)
  </script>

克隆节点

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
  <p>我是 div 内的 p 标签</p>
</div>
<script>
  // 获取 div 元素
  var div = document.querySelector('div')
  // 克隆一个 div 元素, 不克隆后代元素
  var clone1 = div.cloneNode(false)
  // 克隆一个 div 元素, 克隆后代元素
  var clone2 = div.cloneNode(true)
  // 输出
  console.log('不克隆后代节点 : ', clone1)
  console.log('克隆后代节点 : ', clone2)
</script>

JavaScript基础②