querySelector的使用,兼容性较好,排他思想

通过类名获取

  1. document.getElementsByClassName('类名')根据类名获得某些元素的集合
  2. document.querySelector('.box')返回指定选择器第一个元素对象
  3. document.querySelectorAll('选择器')返回指定选择器的所有元素对象

获取特殊元素

  1. 获取body元素 document.body
  2. 获取html元素 document.documentElement

事件基础

  1. 被JavaScript检测到的行为,响应机制
  2. 事件源,时间类型,时间处理程序
  3. 事件源 按钮对象
  4. 事件类型 比如onclick
  5. 事件处理程序 通过一个函数赋值的方式完成

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <button id="btn">你好</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('世界')
}
</script>
<div>你好世界</div>
<script>
var dir = document.querySelector('div');
dir.onclick = function(){
console.log('我被选中了');
}
</script>

操作元素

  1. 改变页面元素的内容 元素.innerText,不识别标签,非标准,去除空格和换行
  2. 元素.innerHtml 可识别标签,可获取标签和空格(形式)
  3. 这两个操作元素可获取元素里面的内容

查看实例

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
<style>
p{
width: 200px;
height: 50px;
line-height: 50px;
background-color: #7a1d8d;
}
div {
width: 100px;
height: 40px;
list-style: 40px;
background-color: #8a4444;
}
</style>
<button>
显示当前系统时间
</button>
<div>某个时间</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var p = document.querySelector('p')
btn.onclick = function() {
div.innerText = date();
}
function date() {
var date = new Date();
var day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return '今天是' + day[date.getDay()];
}
p.innerText = date();
</script>

通过修改标签属性

  1. 比如:img.src

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
img{
width: 200px;
}
</style>
<button class="ni">你好</button>
<button class="ss">世界</button>
<img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
<script>
var ni = document.querySelector('.ni');
var ss = document.querySelector('.ss');
var img = document.querySelector('img');
ni.onclick = function(){
img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
}
ss.onclick = function(){
img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
}
</script>
  1. 分时案例,显示不同的问候语

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
img{
width: 300px;
}
</style>
<body>
<img src="https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png" alt="">
<div>当前的时间为</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if (h < 12){
img.src = 'https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/anime/anime0.png'
div.innerHTML = '现在是上午,好好写代码'
}else if(h<18){
img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_68883968_20180804_203521.webp'
div.innerHTML = '现在是傍晚,好好写代码'
}else{
img.src = 'https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_65203608_20171003_092952.webp'
div.innerHTML = '现在是晚上,好好写代码'
}
</script>

修改表单属性

  1. 通过修改表单元素的属性,比如:表单元素按钮中,按钮禁用的两种方法
  2. 属性名(this).disabled = true

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
input.value = '你好世界';
btn.disabled = true;
// 禁用按钮 this.disabled = true
// this是指时间函数的调用者
}
</script>
  1. 密码显示与隐藏案例

查看实例

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
<style>
input {
outline: none;
border-radius: 5px;
border: 1px solid #888;
width: 100%;
}


div {
position: relative;
width: 200px;
}

i {
position: absolute;
right: 0px;
top: 5px
}
</style>

<body>
<div>
<input type="text" placeholder="请输入密码"><i class="fa fa-battery-2"></i>
</div>
<script>
var input = document.querySelector('input');
var i = document.querySelector('i');
i.onclick = function () {
if (input.type == 'text') {
input.type = 'password';
} else {
input.type = 'text';
}
}
</script>

通过js修改样式

  1. 元素.style里面的属性采用驼峰命名法,行内样式,权重较高
  2. 元素.className类名样式属性
  3. 利用样式的显示和隐藏 box.style.display: 'none'
  4. 精灵图 对于有规律的,可以使用for循环

操作元素

  1. onfocus/onblur,获得焦点,失去焦点
  2. 元素.className类名样式属性,更改元素的样式,适合样式较多
  3. 可以使用多类名选择器保留原来的样式

查看实例

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
<style>
.last {
width: 300px;
height: 200px;
font-size: 12px;
font-weight: 600;
color: antiquewhite;
background-color: blueviolet;
}

.chage {
width: 200px;
height: 300px;
font-size: 12px;
font-weight: 600;
color: #172ca7;
background-color: #19b8d471;
}
</style>

<body>
<input type="text" placeholder="你好世界">
<div class="last">
你好世界
</div>
<script>
var div = document.querySelector('div');
var flag = 0;
div.onclick = function () {
if (flag == 0) {
div.className = 'chage';
flag = 1;
} else {
div.className = 'last';
flag = 0;
}
}
</script>
</body>
  1. 使用获取焦点和失去焦点的案例

方法一

查看答案

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
<style>
input {
width: 300px;
border-radius: 5px;
outline: none;
border: 1px solid #888;
}
.itab{
position: relative;
display: inline-block;
width: 100px;
height: 20px;
line-height: 20px;
}
.fa-exclamation-circle {
position: absolute;
display: none;
left: 0;
top:0;
font-size: 12px;
color: #0099ff;
}

.fa-times-circle {
position:absolute;
display: none;
left: 0;
top:12px;
font-size: 12px;
color: red;
}

i p {
display: inline-block;
font-size: 12px;
color: #888;
}
</style>

<body>
<input type="text" name="" id="" placeholder="请输入密码">
<div class="itab">
<i class="fa fa-exclamation-circle">
<p>6-16位字符</p>
</i>
<span class="fa fa-times-circle">密码较短</span></div>
<script>
var input = document.querySelector('input');
var i = document.querySelector('i');
var span = document.querySelector('span')
input.onfocus = function(){
i.style.display = 'block';
span.style.display = 'none'
}
input.onblur = function(){
i.style.display = 'none';
span.style.display = 'block'
}
</script>

方法二

查看答案

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
<style>
input {
width: 300px;
border-radius: 5px;
outline: none;
border: 1px solid #888;
}


.fa-exclamation-circle {
color: #0099ff;
font-size: 12px;
}

.fa-times-circle {
color: red;
font-size: 12px;
}

.fa-check-circle {
color: green;
font-size: 12px;
}
</style>

<body>
<input type="password" name="" id="" placeholder="请输入密码" value="">
<i class="fa"></i>
<!-- <span class="fa fa-times-circle">fa fa-check-circle密码较短</span></div> -->
<script>
var input = document.querySelector('input');
var i = document.querySelector('i');
input.onfocus = function () {
i.className = 'fa fa-exclamation-circle';
i.innerHTML = '请输入1-16位字符的密码';
}
input.onblur = function () {
if (input.value.length < 6 || input.value.length > 16) {
i.className = 'fa fa-times-circle';
i.innerHTML = '您输入的密码不符合要求,请输入1-16位字符'
}
else {
i.className = 'fa fa-check-circle';
i.innerHTML = '您输入的密码正确!!'
}
}
</script>

</body>

排他思想

  1. 原理:所有元素清除样式,给所有元素设置样式

经典案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0;i<= btns.length - 1;i++){
btns[i].onclick = function(){
for(i = 0;i<btns.length;i++){
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>

鼠标经过离开

  1. onmouseover鼠标经过
  2. onmouseout鼠标离开