querySelector的使用,兼容性较好,排他思想
通过类名获取
document.getElementsByClassName('类名')
根据类名获得某些元素的集合document.querySelector('.box')
返回指定选择器
的第一个
元素对象document.querySelectorAll('选择器')
返回指定选择器的所有元素对象
获取特殊元素
- 获取
body
元素 document.body
- 获取
html
元素 document.documentElement
事件基础
- 被JavaScript检测到的行为,响应机制
- 事件源,时间类型,时间处理程序
- 事件源 按钮对象
- 事件类型 比如onclick
- 事件处理程序 通过一个函数赋值的方式完成
查看实例
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>
|
操作元素
- 改变页面元素的内容
元素.innerText
,不识别标签,非标准,去除空格和换行 元素.innerHtml
可识别标签,可获取标签和空格(形式)- 这两个操作元素可获取元素里面的内容
查看实例
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>
|
通过修改标签属性
- 比如:
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 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>
|
修改表单属性
- 通过修改表单元素的属性,比如:表单元素按钮中,按钮禁用的两种方法
属性名(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; } </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
| <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修改样式
元素.style
里面的属性采用驼峰命名法,行内样式,权重较高元素.className
类名样式属性- 利用样式的显示和隐藏
box.style.display: 'none'
- 精灵图 对于有规律的,可以使用for循环
操作元素
- onfocus/onblur,获得焦点,失去焦点
- 元素.className类名样式属性,更改元素的样式,适合样式较多
- 可以使用多类名选择器保留原来的样式
查看实例
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 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> <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 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>
|
鼠标经过离开
onmouseover
鼠标经过onmouseout
鼠标离开