jQuery-常用事件

最新推荐文章于 2024-10-03 22:12:17 发布

toptap8_nn

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量74

点赞数

分类专栏： jQuery web前端文章标签： jquery html css

本文链接：https://blog.csdn.net/u011713916/article/details/119939950

版权

jQuery 事件处理 DOM操作样式修改输入框内容获取

关键词由CSDN通过智能技术生成

jQuery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

web前端

9 篇文章 0 订阅

订阅专栏

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 src="./main.js"></script>

    <script>
        // 设置一个点击事件，点击时页面全部变为红色
        $(function(){
            // 取出所有的标签
            var $lis = $('ul li');
            // 增加点击事件
            $lis.click(function(){

                // 原生kjs的写法
                // this.style.color = 'red';

                // jQuery的写法
                $(this).css({'color':'red'});
                // 获取点击标签的索引
                alert($(this).index());

            });

            // -----
            // 点击按钮获取文本框的内容

            var $btn1=$('#btn1');
            $btn1.click(function(){
                
                var $txt1 = $('#text1');
                // 弹出文本框的内容
                alert($txt1.val());

            });

            // 获取焦点文本框变成红色
            // 失去焦点文本框背景变成白色
            var $txt1 = $('#text1');
            $txt1.focus(function(){

                $(this).css({'background':'red'});
            });

            // 失去焦点文本框背景变成白色
            $txt1.blur(function(){

                $(this).css({'background':'white'});

            });

            // 给div标签设置鼠标悬停
            $('div').mouseover(function(){

                $(this).css({'background':'green'});

            });

            // div标签鼠标离开时变成白色背景色

            $('div').mouseout(function(){

                $(this).css({'background':'white'});

            });

        });
        
    </script>

    <style>
        .css{
            background: white;
        }
    </style>


</head>
<body>
    <div>
        <ul>
            <li>苹果</li>
            <li>鸭梨</li>
            <li>香蕉</li>
        </ul>
        <input type="text" name="文本" id="text1">
        <input type="button" value="button" id="btn1">
    </div>
    
    
</body>
</html>