js（JavaScript）：事件，元素（增删改查）
触屏事件touch
移动端的事件，跟点击事件不一样的地方在于，可以多点触控。
案例代码；
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 600px; height: 400px; margin: 0 auto; background: skyblue; } </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body>
<div id="d1"> 手机触屏颜色改变 </div> <script type="text/javascript"> var d1 = document.querySelector('#d1') console.log(d1)
//触屏事件是2009年以后才有相关的触屏事件。只能用ECMASCRIPT5,才能够实现。只能用addEventListener才能创建事件 //在触屏事件中想要获取触控点的位置，可以通过属性touches来获取多个点的触控位置。 //触屏开始事件 d1.addEventListener("touchstart",function(event){ console.log(event) }) //触摸移动事件 /*d1.addEventListener('touchmove',function(e){ console.log(e) }) //触摸结束事件 d1.addEventListener("touchend",function(e){ console.log(e) })*/
</script> </body> </html>
|
聚焦事件onfocus
当输入框被点击之后，光标在输入框闪动的时候，即为聚焦的事件。
案例：
|
var input1 = document.querySelector('#input1'); //聚焦事件 input1.onfocus = function(){ var alertDiv = document.createElement("div") alertDiv.className = "alert" alertDiv.innerHTML = "输入密码时候，请注意身旁无人" document.body.appendChild(alertDiv) } |
输入事件onInput
输入事件与按键事件的主要区别在于，输入事件会以输入框是否真正输入新的内容而触发事件。而按键事件是每次按键都会触发。
|
var d1 = document.querySelector('#d1') //输入事件 d1.oninput = function(e){ console.log(e) //假设密码当密码等于123456的时候，那么显示绿色的背景，说明密码输入是正确 console.log([d1]) if(d1.value=='123456'){ d1.style.background = "green" }else{ d1.style.background = "red" } document.querySelector('h1').innerHTML = d1.value } |
输入内容改变事件 onchange
|
//输入框内容变更事件,并且焦点失去之后才会触发 /*d1.onchange = function(e){ console.log(e) }*/ |
文档加载事件onload
文档或者是图片或者视频，都可以使用onload事件来进行判断内容是否加载完毕。图片想要获取宽高，必须等待图片加载完毕
案例：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript">
window.onload = function(){ //文档加载完毕 console.log('文档加载完毕') var d1 = document.querySelector('#d1') console.log(d1) }
var img = document.createElement("img") //在JavaScript里，加载属于异步。 img.src = 'img/img1.jfif' document.body.appendChild(img) console.log([img])
//调用记载完毕的事件 img.onload = function(){ console.log(img.width) console.log(img.height) }
</script> <div id="d1"> helloworld </div> </body> </html>
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 600px; height: 400px; margin: 0 auto; display: flex; background: skyblue; } .alert{ width: 500px; height: 300px; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; background: orangered; color: #fff; text-align: center; border-radius: 20px; /*line-height: 300px;*/ font-size: 40px; font-weight: 900; display: flex; justify-content: center; align-items: center; } </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <input type="text" name="input1" id="input1" value="" /> <div id="d1"> 手机触屏颜色改变 </div> <h1></h1> <script type="text/javascript"> //1.触屏事件touch:移动端的事件，跟点击事件不一样的地方在于，可以多点触控。 var d1=document.querySelector("#d1") //触屏事件是2009年以后才有相关的触屏事件。只能用ECMASCRIPT5,才能够实现。只能用addEventListener才能创建事件 //在触屏事件中想要获取触控点的位置，可以通过属性touches来获取多个点的触控位置。 //触屏开始事件 d1.addEventListener("touchstart",function(event){ console.log(event) }) //触摸移动事件cons d1.addEventListener("touchmove",function(e){ console.log(e) }) //触摸结束事件 d1.addEventListener("touchend",function(e){ console.log(e) }) //--------------------------------------------------------------- //2.聚焦事件onfocus:当输入框被点击之后，光标在输入框闪动的时候，即为聚焦的事件。 var input1=document.querySelector("#input1"); //聚焦事件 input1.onfocus=function(){ //创建一个Div var al=document.createElement("div") al.className="alert" al.innerHTML="输入密码时，请注意旁边无人" document.body.appendChild(al) } //----------------------------------------------------------- //3.输入事件onInput:输入事件与按键事件的主要区别在于，输入事件会以输入框是否真正输入新的内容而触发事件。而按键事件是每次按键都会触发。 //输入事件 input1.oninput=function(e){ console.log(e) //假设密码当密码等于123456的时候，那么显示绿色的背景，说明密码输入是正确 if(d1.value=='123456'){ input1.style.background = "green" }else{ input1.style.background = "red" } document.querySelector('h1').innerHTML = d1.value } //输入内容改变事件 onchange //输入框内容变更事件,并且焦点失去之后才会触发 d1.onchange = function(e){ console.log(e) //--------------------------------------------------------------- //4.文档加载事件onload:文档或者是图片或者视频，都可以使用onload事件来进行判断内容是否加载完毕。图片想要获取宽高，必须等待图片加载完毕 window.onload=function(){ //文档加载完毕 console.log('文档加载完毕') var d1=document.querySelector("#d1") } var img = document.createElement("img") //在JavaScript里，加载属于异步。 img.src="img/5-7.jpg" document.body.appendChild(img) //调用记载完毕的事件 img.onload = function(){ console.log(img.width) console.log(img.height) } </script> <div id="d1">hello</div> </body> </html>
1、在元素的最后面追加子元素
//语法:父元素.appendChild(子元素对象)
2、在什么元素前面追加元素
//语法：父元素.insertBefore(插入的元素对象,参考对象)
document.insertBefore()
3、替换元素
//语法：父元素.replaceChild(替换的元素对象，被替换的元素对象)
document.replaceChild()
4、删除某个元素
//语法：父元素.removeChild(删除元素对象)
document.removeChild()
5、创建元素，并没有显示在页面上，都需要上面的appendChild/insertBefore/replaceChild任意一种来完成插入到页面结构中
//语法：document.createElement("元素标签的名称")
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .main{ width: 600px; height: 300px; margin: 0 auto; background: skyblue; display: flex; } .child{ width: 200px; height: 400px; } .c1{ background: skyblue; } .c2{ background: cornsilk; } .c3{ background: plum; } #girl{ width: 200px; height: 300px; } </style> </head> <body> <h1>点击相对应的类型，对图片进行归类</h1> <img id="girl" src="img/5-7.jpg"/> <div class="main"> <div class="child c1">制服</div> <div class="child c2">少女</div> <div class="child c3">成熟</div> </div> <script type="text/javascript"> //1、在元素的最后面追加子元素 //语法:父元素.appendChild(子元素对象) var h1 = document.querySelector('h1'); var main = document.querySelector(".main") var girl = document.querySelector('#girl') main.onclick=function(e){ e.target.appendChild(girl) } //-------------------------------------------------------------- //2、在什么元素前面追加元素 //语法：父元素.insertBefore(插入的元素对象,参考对象) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li class="l1"> <h1>美女类型1</h1> </li> <li class="l2"> <h1>美女类型2</h1> </li> <li class="l3"> <h1>美女类型3</h1> </li> </ul> <script type="text/javascript"> //2、在什么元素前面追加元素 //语法：父元素.insertBefore(插入的元素对象,参考对象) var girl=document.createElement("img") girl.src = "img/5-7.jpg" girl.style.width = "200px" girl.style.height = 'auto' var l2 = document.querySelector('.l2') //获取参考对象l2下面的h1 var h1 = document.querySelector('.l2 h1') l2.insertBefore(girl,h1) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="main"> <img style="width: 300px;" src="img/5-7.jpg"/> </div> <script type="text/javascript"> //3、替换元素 //语法：父元素.replaceChild(替换的元素对象，被替换的元素对象) var main = document.querySelector('.main') //被替换的元素对象 var oldImg = document.querySelector('.main img') //创建新的图片对象 var newImg = document.createElement('img') newImg.src = "img/u=2129560155,3163871690&fm=26&gp=0.jpg" main.replaceChild(newImg,oldImg) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>hello</h1> <div class="main"> <img style="width: 300px;" src="img/5-7.jpg"/> </div> <script type="text/javascript"> //4、删除某个元素 //语法：父元素.removeChild(删除元素对象) var h1=document.querySelector("h1") //document.body.removeChild(".main") //document.body.removeChild("h1") h1.parentElement.removeChild(h1) //便捷删除元素对象的方式 //语法：元素对象.parentElement.removeChild(元素对象) </script> </body> </html>
Audio音频
//audio常用的属性和方法
//play()播放、pause()暂停
//volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量
//muted设置静音，true就静音，false不静音
//currentTime,获取和设置当前播放到什么位置
//onplay播放的事件
//onpause暂停事件
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .jdt{ width: 800px; height: 20px; line-height: 20px; background: #ccc; margin: 0 auto; display: flex;
align-items: center; } .jd{ width: 20px; height: 18px; background: deepskyblue; } </style> </head> <body> <!-- src="音频的网络资源地址" controls ="设置音频是否显示控制器"
--> <audio src="img/M500004PPCIB1Mq36U.mp3"></audio>
<div class="btn"> 播放 </div>
<div class="next"> 下一首 </div>
<div class="jdt"> <div class="jd">0%</div> </div>
<script type="text/javascript"> //audio常用的属性和方法 //play()播放、pause()暂停 //volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量 //muted设置静音，true就静音，false不静音 //currentTime,获取和设置当前播放到什么位置
//onplay播放的事件 //onpause暂停事件
var a1 = document.querySelector('audio') console.log(a1) var jd = document.querySelector('.jd')
var btn = document.querySelector('.btn') btn.onclick = function(){ console.log(a1) if(btn.innerHTML.trim()=="播放"){ a1.play() btn.innerHTML = "暂停" }else{ a1.pause() btn.innerHTML = "播放" } } var interTime = null;
a1.onplay = function(e){ console.log('onplay') console.log(e)
interTime = setInterval(function(){ //获取当前的事件 var currentTime = a1.currentTime //获取当前播放进度的百分比 var num = parseInt((currentTime/a1.duration)*100) console.log(num)
var width = 800*num/100; jd.style.width = width + 'px'
jd.innerHTML = num +'%' },1000)
}
a1.onpause = function(){ clearInterval(interTime) } // a1.onplaying = function(e){ // console.log('onplaying') // console.log(e) // }
//更改歌曲 var next = document.querySelector('.next') next.onclick = function(){ a1.src = 'img/zjl.wav' a1.play() } </script> </body> </html>
|
音频：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .jdt{ width: 800px; height: 20px; line-height: 20px; background: #ccc; margin: 0 auto; display: flex; align-items: center; } .jd{ width: 20px; height: 18px; background: deepskyblue; } </style> </head> <body> <!-- src="音频的网络资源地址" controls ="设置音频是否显示控制器" <audio controls="controls" src="img/2.mkv"></audio>用的是系统自带的播放器 --> /*自己写的播放器*/ <audio src="img/2.mkv"></audio> <div class="btn">播放</div> <div class="next">下一首</div> <div class="jbt"> <div class="jd"></div> </div> <script type="text/javascript"> //audio常用的属性和方法 //play()播放、pause()暂停 //volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量 //muted设置静音，true就静音，false不静音 //currentTime,获取和设置当前播放到什么位置 //loop循环播放 //onplay播放的事件 //onpause暂停事件 //trim()函数移除字符串两侧的空白字符或其他预定义字符。 var a1=document.querySelector("audio") console.log(a1) var jd=document.querySelector(".jd") var btn = document.querySelector('.btn') btn.onclick = function(){ console.log(a1) if(btn.innerHTML.trim()=="播放"){ a1.play() btn.innerHTML = "暂停" }else{ a1.pause() btn.innerHTML = "播放" } } var interTime = null; a1.onplay=function(e){ //播放的事件 console.log('onplay') console.log(e) //setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式 interTime = setInterval(function(){ //获取当前的事件 var currentTime = a1.currentTime //获取当前播放进度的百分比 var num = parseInt((currentTime/a1.duration)*100) console.log(num) var width = 800*num/100; jd.style.width = width + 'px' jd.innerHTML = num +'%' },1000) } a1.onpause = function(){ clearInterval(interTime) } //更改歌曲 var next=document.querySelector(".next") next.onclick = function(){ a1.src = 'img/3.mkv' a1.play() } </script> </body> </html>
视频：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .jdt{ width: 800px; height: 20px; line-height: 20px; background: #ccc; margin: 0 auto; display: flex; align-items: center; } .jd{ width: 20px; height: 18px; background: deepskyblue; } </style> </head> <body> <!-- src="视频的网络资源地址" controls ="设置视频是否显示控制器" poster="设置没有播放内容时候的图片" <video poster="img/5-7.jpg" controls="controls" src="img/3.mkv"></video>用的是系统自带的播放器 --> <video poster="img/5-7.jpg" src="img/3.mkv"></video> /*自己写的播放器*/ <div class="btn">播放</div> <div class="next">下一首</div> <div class="jbt"> <div class="jd"></div> </div> <script type="text/javascript"> /* muted:静音 play():播放 pause():暂停 volume:音量 currentTime:当前播放的世界 loop:是否循环播放 duration:播放总时间 //onplay播放的事件 //onpause暂停事件 webkitRequestFullScreen()：设置全屏播放，仅用于谷歌浏览器。 * */ var a1=document.querySelector("video") console.log(a1) var jd=document.querySelector(".jd") var btn = document.querySelector('.btn') btn.onclick = function(){ console.log(a1) if(btn.innerHTML.trim()=="播放"){ a1.play() btn.innerHTML = "暂停" }else{ a1.pause() btn.innerHTML = "播放" } } var interTime = null; a1.onplay=function(e){ //播放的事件 console.log('onplay') console.log(e) //setInterval是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式 interTime = setInterval(function(){ //获取当前的事件 var currentTime = a1.currentTime //获取当前播放进度的百分比 var num = parseInt((currentTime/a1.duration)*100) console.log(num) var width = 800*num/100; jd.style.width = width + 'px' jd.innerHTML = num +'%' },1000) } a1.onpause = function(){ clearInterval(interTime) } //更改歌曲 var next=document.querySelector(".next") next.onclick = function(){ a1.src = 'img/3.mkv' a1.play() } </script> </body> </html>
