jQuery jQuery样式操作、click事件绑定

最新推荐文章于 2024-07-14 03:40:57 发布

郭庆汝

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/guoqingru0311/article/details/119830175

版权

jQuery jQuery样式操作样式操作

1、获取样式属性与操作样式属性
2、操作样式类名
3、click事件绑定
4、使用.toggleClass切换类样式
5、选项卡

在这里插入图片描述

1、获取样式属性与操作样式属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery样式操作</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $box = $('#box');

            // 获取样式（读取属性值）
            var sTr = $box.css('fontSize');
            alert(sTr); // 得到字体的像素值

            // 操作元素的样式（写属性值）
            $box.css({"color":"red",
                    "backgroundColor":"green",
                    "width":"100px","height":"50px",
                    "line-height":"50px"});

        });

    </script>
</head>
<body>
    <div id="box">div元素</div>

</body>
</html>

显示效果如下：
在这里插入图片描述

2、操作样式类名

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $class = $('.class');
            // 添加类属性
            $class.addClass('box','big')
            // 移除类属性
            $class.removeClass('red');
        });

    </script>

    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .big{
            font-size: 30px;
        }

        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div class="class red">div元素</div>
</body>
</html>

在这里插入图片描述

3、click事件绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery绑定click事件</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {

                // 进行样式切换
                if (!$('.box1').hasClass('box')){
                    $('.box1').addClass('box');
                }
                else {
                    $('.box1').removeClass('box')
                }
            });
        })
    </script>

    <style type="text/css">
        .box{
            width: 100px;
            height: 200px;
            background-color: goldenrod;
        }

        .col01{
            background-color: pink;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换样式" id="button">
    <div class="box1">div元素</div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

4、使用.toggleClass切换类样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切换</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {

                // 使用toggleClass切换类样式
                $('.box1').toggleClass('box');
            });
        })
    </script>

    <style type="text/css">
        .box{
            width: 100px;
            height: 200px;
            background-color: goldenrod;
        }

        .col01{
            background-color: pink;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换样式" id="button">
    <div class="box1">div元素</div>

</body>
</html>

在这里插入图片描述

5、选项卡

在这里插入图片描述

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        .btns input{
            width: 100px;
            height: 40px;
            background-color: #b3b3b3;
        }
        .btns .current{
            background-color: goldenrod;
        }

        .cons div{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
            text-align: center;
            line-height:300px;
            font-size: 30px;
        }
        .cons .activate{
            display: block;
        }

    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var $btns = $('.btns input');
            var $cons = $('.cons div');
            // alert($btns.length);

            $btns.click(function () {
                // this：指的是原生的this，表示当前点击的对象;加上‘$’表示的是jQuer对象
                // $(‘div’).siblings()： 表示除了该元素之外的其他同级元素
                // 当前点击的按钮加上current样式后，除了当前，其他按钮去掉current样式
                $(this).addClass('current').siblings().removeClass('current');

                // 显示当前点击元素的index索引值
                var this_index=$(this).index();
                alert(this_index);
                // 当前点击的按钮对应的索引值的div加上activate样式，其他的去掉activate样式
                $cons.eq($(this).index()).addClass('activate').siblings().removeClass('activate');

            });

        });

    </script>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>

    <div class="cons">
        <div class="activate" >选项卡一的内容</div>
        <div>选项卡二的内容</div>
        <div>选项卡三的内容</div>
        
    </div>

</body>
</html>