js（JavaScript）：事件，元素（增删改查）

触屏事件touch

移动端的事件，跟点击事件不一样的地方在于，可以多点触控。

案例代码；

<!DOCTYPE html>

<html>

<head>

#d1{

600px;

height: 400px;

margin: 0 auto;

background: skyblue;

}

</style>

</head>

<body>

手机触屏颜色改变

</div>

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>

</head>

<body>

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>

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=" 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=" 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>

.jdt{

800px;

height: 20px;

line-height: 20px;

background: #ccc;

margin: 0 auto;

display: flex;

align-items: center;

}

.jd{

20px;

height: 18px;

background: deepskyblue;

}

</style>

</head>

<body>

<!--

src="音频的网络资源地址"

controls ="设置音频是否显示控制器"

-->

播放

</div>

下一首

</div>

</div>

//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>