趣味 js —— 通过趣味案例走进 js 的世界
1 获取元素的三种基本方式
1.1 通过id名称获取元素:
<!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> <body> <p>这是一段话。</p> <script> var p1 = document.getElementById('p1') // 获取文档。 p1.style.color = 'blue' // 设置文档颜色为蓝色。 </script> </body> </html> // 输出结果是：蓝色字体的“这是一段话。”
1.2 通过标签名称获取元素:
<h1>标题1</h1> <h1>标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <script> var h1s = document.getElementsByTagName('h1') for(var i = 0;i<h1s.length;i++){ h1s[i].style.fontSize = 24px // 设置h1的字体大小为24px。 } </script>
1.3 通过类别名称获取元素：
<p class="c1">这是一段话</p> <h1 class="c1">这是一个标题<h1> <h1>这是第二个标题</h1> <h1 class="c1">这是第三个标题</h1> <script> var ph = document.getElementByClassName('c1') for(var i =0;i<=c1.length;i++){ c1[i].style.color = 'red' // 使每一个c1的字体颜色变为红色。 } // 输出结果是带有class值的字体颜色变为红色。 </script>
1.4 获取元素基本方式总结：
1.getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。 3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。） 4.通过JavaScript操作的css属性，与css不相同：
- 如果css属性是一个单词，写法保持不变。（如：color，width等）。
- 如果css属性是多个单词组合而成，则需要将第一个单词首字母小写，其他首字母大写，并去除连接符。（如：background-color，font-size等）。
1.5 HTML5新增的获取元素方式：
1.在HTML5中，新增的获取元素方式是：querySlector和querySlectorAll。 2.querySlector只能获取符合条件的第一个元素，而querySlectorAll可以获取符合条件的所有元素。 3.这个方法可以通过id，类别名称和标签名称获取元素，在使用的时候要遵循以下规则：
- id在前面加上 #
- 类别名称在前面加上 .
- 标签名称前面什么也不加
2 JavaScript操作元素样式
- 操作元素样式有两种方法：
2.1.style.css属性操作，只能一个一个地设置元素样式。
<!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> <body> <div class="box">hello!</div> <script> // 这样设置重复代码太多，看起来会太繁琐。 var div = document.querySelector('div') div.style.width = '300px' div.style.height = '150px' div.style.textAlign = 'center' div.style.border = '1px solid black' div.style.lineHeight = '150px' div.style.color = 'blue' </script> </body> </html>
2.2.className方法操作，可以一次设置多个样式。
<!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> .box{ width:300px; height:150px; text-align:center; border:1px solid black; line-height:150px; color:blue; } </style> <body> <div>hello!</div> <script> var div = document.querySelector('div') div.className = 'box' // 使用className同时设置多个样式。 </script> </body> </html>
3 JavaScript操作元素属性：
- 图片元素的属性操作
<img src="" alt=""> /*用JavaScript可以操作src属性。*/ <script> // 先获取img的src属性，再进行操作。 document.querySlector('img').src = '图片路径' </script>
表单元素的属性操作
<input type="text" name="" id=""> <script> // 先获取img的src属性，再进行操作。 document.querySlector(input).value = '请输入用户名：' </script>
4 JavaScript改变元素内容：
- 通过JavaScript中的innerHTML方法对HTML中的内容进行更改。
<p>内容</p> <script> // 先获取div里的内容，再进行修改。 var p = document.querySlector('p') console.log('p.innerHTML') // 在控制台显示内容 // 对p标签中的内容进行修改。 p.innerHTML = 'content' // p标签中的内容会变成content。 </script>
5 事件基础：
- 事件：浏览器在时刻监视着用户在页面上的行为，这些行为叫做用户事件。
- 用户做了某个行为，就会触发相应的事件。
- 开发者编写代码告诉浏览器，当用户触发了某个事件后，去执行的代码。
5.1 鼠标的单击事件：
<!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> button{ width: 100px; height: 50px; text-align: center; line-height: 50px; } </style> <body> <button>点击会有惊喜</button> <script> // 使用onclick（鼠标单击事件） document.querySelector('button').onclick = function (){ alert('哆啦A孟最帅了，我爱哆啦A孟！！！') } // 结果是：单击按钮，网页弹出内容。 </script> </body> </html>
6 换肤案例：
- 简单的换肤案例就是通过单击图片给背景更换背景图，需要采用JavaScript的单击事件。
换肤代码示例
<!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; font-size: 0; /*目的是为了取消图片之间的间隔*/ } body{ transition: all 1s; } .class{ width: 1400px; background-color: rgba(0, 0, 0, .5); margin: 0 auto; } .class img{ width: 280px; margin-left: 20px; cursor: pointer; /* 鼠标移动到图片上，会变成小手 */ border-radius: 10px; /* 设置图片的圆角 */ } .class :first-child{ margin-left: 110px; } .active{ /* border: 2px solid blue; 设置一个蓝色实线，2px的边框 */ transition: all 1s; transform: scale(1.1); } </style> <body> <div class="class"> <img src="images/bg1.jpeg" alt=""> <img src="images/bg2.jpeg" alt=""> <img src="images/bg3.jpeg" alt=""> <img src="images/bg4.jpeg" alt=""> </div> <script> // 设置默认的背景是第一张图片。 document.body.style.backgroundImage = 'url(images/bg1.jpeg)' // 使背景图覆盖body，以免出现背景不是完整图片的情况。 document.body.style.backgroundSize = 'cover' var imgs = document.querySelectorAll('img') // 获取所有的图片 // 使用for循环为每一个图片注册单击事件。 for(var i=0;i<imgs.length;i++){ imgs[i].onclick=function(){ // 单击图片事件执行的函数代码。 document.body.style.backgroundImage = `url(${this.src})` // 实现给更换背景。 reset() // 函数调用 // 为img标签添加class属性，值为 active。 this.className = 'active' // 效果：点击图片会在图片上产生蓝色边框。 } } // 排他思想 function reset(){ for(var i = 0;i<imgs.length;i++){ imgs[i].className = '' // 清除imgs的样式。 } } </script> </body> </html>
总结知识点：
- 使用for循环遍历所有的元素，可以同时为每一个元素进行操作，使代码更为简洁。
- transform属性用来转换元素的2D和3D，实现元素的旋转，缩放，移动和倾斜。
- transition表示检测元素当前的属性，如果发生改变，会在规定时间内完成改变。语法为：
transition: all 1s;即检测当前元素的所有属性，如果发生改变，会在1s内完成改变。transition: width 1s;即检测当前元素的width值，如果发生改变，会在1s内完成改变。
1 分时问候：
- 分时问候实例：
// 分时问候：获取当前时间，根据时间展示不同的页面内容。 var now = new Date() var hours = now.getHours() if(hours<12){ document.body.style.backgroundImage = 'url(images/bg1.jpeg)' }else if(hours>12 && hours<18){ document.body.style.backgroundImage = 'url(images/bg2.jpeg)' }else{ document.body.style.backgroundImage = 'url(images/bg3.jpeg)' } // 如果是上午，展示bg1那张图片。 // 如果是下午，展示bg2那张图片。 // 如果是晚上，展示bg3那张图片。
2 密码的显示与隐藏：
- 显示和隐藏密码就是将input标签的type属性text和password的互换。
<!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: 300px; border-bottom: 1px solid #eee; margin: 100px auto; } img{ width: 25px; height: 16px; } input{ border: none; /*去除边框*/ outline: none; /*去除轮廓线*/ padding-bottom: 10px; } </style> <body> <div class="box"> <input id="btn" type="password"> <img src="./images/睁眼.png" alt=""> </div> <script> // 显示和隐藏密码就是将input标签的type属性text和password的互换。 var img = document.querySelector('img') var input = document.querySelector('input') // 创建变量用于控制input的状态变化。 var flag = false img.onclick = function(){ if(flag == false){ // 点击图片，切换为密码可见，并将图片换为睁眼。 input.type = 'text' this.src = './images/睁眼.png' flag = true }else{ // 点击图片，切换为密码隐藏，并将图片换为闭眼。 input.type = 'password' this.src = './images/闭眼.png' flag = false } } </script> </body> </html>
3 关闭二维码：
- 关闭二维码案例：
<!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: 150px; height: 150px; margin: 50px auto; position: relative; /*相对定位*/ } .close{ position: absolute; /*绝对定位*/ left: -22px; top: 0px; border: 1px solid #aaa; width: 20px; height: 20px; text-align: center; line-height: 20px; cursor: pointer; } </style> <body> <div class="box"> <img src="./images/tianmao.png" alt=""> <div class="close">X</div> </div> <script> document.querySelector('.close').onclick = function(){ // 让二维码消失 document.querySelector('.box').style.display = 'none' } </script> </body> </html>
4 密码长度验证：
- 密码长度验证实例： 1.onfocus事件会在对象获取焦点时触发。 2.onblur事件会在对象失去焦点时触发。
<!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{ margin: 0 auto; width: 300px; height: 200px; font-size: 8px; line-height: 200px; } .message{ float: right; } </style> <body> <div class="box"> <input id="wenben" type="text" value="请输入密码："> <div class="message"> <img src="./images/zc.png" alt=""> <span id="info">请输入6-16位密码。</span> </div> </div> <script> // 在文本框中的 focus 事件中，将文本框中的value属性设置为空字符串 var password = document.querySelector('#wenben') wenben.onfocus = function(){ var val = this.value if(val == '请输入密码：'){ this.value = '' } } // 在文本的 blur 事件中，判断用户输入的密码是否符合要求 wenben.onblur = function(){ var len = this.value.length if(len>=6 && len<=16){ document.querySelector('img').src = './images/zq.png' document.querySelector('#info').innerHTML = '输入的密码正确！' document.querySelector('#info').style.color = 'green' }else{ document.querySelector('img').src = './images/cw.png' document.querySelector('#info').innerHTML = '输入的密码错误！' document.querySelector('#info').style.color = 'red' } } </script> </body> </html>
5 表格的隔行换色：
- style代码：
<style> *{ margin: 0; padding: 0; } table{ width: 80%; line-height: 50px; text-align: center; border: 1px solid #eee; margin: 50px auto; border-collapse: collapse; } th,td{ border: 1px solid #eee; } .odd{ background-color: skyblue; } .even{ background-color: whitesmoke; } </style>
javascript详细代码：
// 遍历整个tbody中的tr，获取所有的tr。 var trs = document.querySelectorAll('tbody tr') for(var i=0;i<trs.length;i++){ if(i%2 == 0){ trs[i].className = 'odd' }else{ trs[i].className = 'even' } // 为tr注册 onmouseover 事件 trs[i].onmouseover=function(){ this.style.backgroundColor = '#ccc' } // 为tr注册 onmouseovut 事件 trs[i].onmouseout=function(){ this.style.backgroundColor = '' } }
上述代码实现效果如下：
总结：
1.onmouseover事件：鼠标移动到对象上面，触发onmouseover事件，执行事件下的函数代码。
- 代码格式：
this.onmouseover = function(){ 函数体 }
2.onmouseout 事件：鼠标离开对象，触发onmouseout事件，执行事件下的函数代码。
- 代码格式：
this.onmouseout = function(){ 函数体 }
