JQuery样式操作和click事件和索引值-选项卡

最新推荐文章于 2021-03-28 17:56:04 发布

SpecYue

最新推荐文章于 2021-03-28 17:56:04 发布

阅读量247

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_34788903/article/details/86556750

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JQuery的css函数既能读属性值，也能写属性值：

<!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 () {
            var $div=$('#box');
            var sTr=$div.css('fontSize');//读
            alert(sTr);

            $div.css({backgroundColor:'pink',color:'black',fontSize:'20px'})//写
        });
    </script>
</head>
<body>
    <div id="box">div元素</div>
</body>
</html>

其实不光是css函数，JQuery内的其他函数也是这样的，如果放值就是写，如果不放就是读。

样式的加减

<!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 $div=$('.box');
            $div.addClass('big');//加入big类
            $div.removeClass('red');//去除red样式类
        })
    </script>

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

        .big{
            font-size: 30px;
        }

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

给元素绑定click事件

$('#btn1').click(function)(){
	//内部的this指的是原生对象
	//使用JQuery对象用$(this)
}

点击事件，切换样式

<!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 $btn=$('#btn');
            $btn.click(function () {//绑定事件
                // var $div=$('.box');
                // if(!$div.hasClass('col01')){
                //     alert(1);
                // }
                // $div.addClass('col01');
                //可以简化成下面的写法
                $('.box').toggleClass('col01');//切换样式
            })
        });
    </script>

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

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

索引值-选项卡

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

var $li=$('.list li ').eq();
alert($li.index());//弹出
...................
<ul class="list">
<li>1</li>
<li>2</li>
..............
<li>6</li>
</ul>

得到索引值

<!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 $li=$('.list li');
            // alert($li.length);
            alert($li.eq(3).index());
            var s=$li.filter(".myli").index();
            alert(s);
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="myli">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

选项卡的制作，点击事件之后，当前点击的事件加上样式，其他统计的元素，去掉样式，关键代码

				$(this).addClass('current').siblings().removeClass('current');
                var num=$(this).index();
                $div.eq($(this).index()).addClass('active').sibling().removeClass('active');

完整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .btns input{
            width: 100px;
            height: 40px;
            background-color: grey;
            border: 0;
        }

        .btns .current{
            background-color: gold;
        }

        .cons div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*整体都不显示了*/
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }

        .cons .active{
            display: block;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btn=$('.btns input');
            var $div=$('.cons div');
            // alert($btn.length);
            // alert($div.length);

            $btn.click(function () {
                // 我点击哪一个按钮，$(this)就指的是谁,而this
                //指的是原生的，$（this）指的是JQuery的
                // $(this).siblings().removeClass('current');
                // $(this).addClass('current');//可以用链式调用
                $(this).addClass('current').siblings().removeClass('current');
                var num=$(this).index();
                $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
            })
        })
    </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="active">选项卡1的内容</div>
        <div>选项卡2的内容</div>
        <div>选项卡3的内容</div>
    </div>
</body>
</html>

JQuery可以使用链式调用，在改变选项卡样式的时候就用到了。

SpecYue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery样式操作和click事件和索引值-选项卡

JQuery的css函数既能读属性值，也能写属性值：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;样式操作&lt;/title&gt; &lt;script type="te
复制链接

扫一扫