jQuery操作元素、事件处理

<!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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="p1" name="pt">大唐芙蓉园</p>
    <script>
        $(function(){
            let t = $('#p1').attr('name')  //获取id为p1得元素的name属性值
            console.log('id为p1得元素的name属性值：',t)
        })
    </script>
</body>
</html>

2、修改属性的值

（1）参数key表示属性名，参数value表示属性值

attr（key，value）

<!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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>    
    <button id="btn">显示图片</button>    
    <br><br>
    <img />
    <script>
        $(function(){            
            $('#btn').bind('click',function(){ //给按钮btn绑定click事件
                $('img').attr('src','../images/dog1.jpg')                
            })          
        })
    </script>
</body>
</html>

（2）采用 key : value 方式设置属性值，可以设置多个属性注：属性名不用引括号

attr（ { 属性1:属性值1，属性2:属性值2 }）

<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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <br><br>
    <img />
    <script>
        $(function(){            
            $('#btn').bind('click',function(){ //给按钮btn绑定click事件            
               $('img').attr({src:'../images/dog1.jpg',width:'500px',height:'400px'})
            })
        })
    </script>
</body>

（3）参数key表示属性名，fn是回调函数，在函数中设置属性的值。属性名需要用引号括起来

attr（key，fn）

<!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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <br><br>
    <img />
    <script>
        $(function(){           
            $('#btn').bind('click',function(){ //给按钮btn绑定click事件                
                $('img').attr('src',function(){
                    return '../images/cat2.webp'
                })
            })          
        })
    </script>
</body>
</html>

3、删除属性

removeAttr（属性名）

<!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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>   
    <button id="btn">显示图片</button>
    <button id="del">删除图片</button>
    <br><br>
    <img />
    <script>
        $(function(){           
            $('#btn').bind('click',function(){ //给按钮btn绑定click事件               
                $('img').attr('src',function(){
                    return '../images/cat2.webp'
                })
            })

            //删除图片
            $('#del').bind('click',function(){
                $('img').removeAttr('src')
            })
        })
    </script>
</body>
</html>

运行结果：点击“显示图片”，图片显示；点击“删除图片”，图片不显示。

二、操作元素的样式

1、通过class 属性修改

（1）给元素添加指定的类名（class属性值）

addClass（类名）

（2）删除元素的class属性

removeClass（类名）

<!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>
    <script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<style>
    .ok{
        color: green;
    }
    .false{
        color: red;
    }
</style>
<body>
    用户名：
    <input type="text" id="username"><span id="sp"></span>
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：
    <input type="password" id="pwd">
    <br><br>
    <button id="login">登录</button>


    <script>
        $(function(){