jQuery（二）样式操作和click事件

最新推荐文章于 2024-05-02 18:12:22 发布

码界索隆

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量167

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/COOL66BOY/article/details/123395035

版权

文章目录

jQuery样式操作
- 操作行间样式
- 操作样式类名
click事件
- toggleClass()和click的联合使用
获取元素的索引值
- 练习-选项卡

jQuery样式操作

jQuery用法思想二：
同一个函数完成取值和赋值

操作行间样式

        $(function(){
            var $box = $('.box');
            $box.css('width'); //获取对象的宽
            alert($box.css('font-size')); //可以获取行间没有设置的属性
            //属性值直接书写数字不需要写单位，要写单位要用字符串写法即：'200px';
            $box.css({'width': 200,'backgroundColor':'red'}); //修改对象的宽和背景颜色
        })

注：
1. 属性值直接书写数字不需要写单位，要写单位要用字符串写法即：‘200px’;
2. 选择器获取的多个元素，获取信息获取的是第一个。
3. 原生js无法读取行间没有定义的css属性值，jQuery可以。

操作样式类名

$(’#div1’).addClass(‘divClass2’) //为id为div1的对象追加样式divClass2
$(’#div1’).removeClass(‘divClass’) //移出id为div1的对象的clss名为divClass的样式
$(’#div1’).addClass(‘divClass divClass2’) //移出多个样式
$(’#div1’).toggleClass(‘anotherClass’) //重复切换anotherClass样式（有就去掉，没有就加上）

click事件

原生js用的是onclick，jQuery用的是clcik

给元素绑定click事件，可以用如下方法：

  $(function(){
            var $box = $('.box');
            //绑定click事件
            $box.click = function(){
                //获取当前触发事件的对象
                $(this)
                //内部的this指的是原生对象，$(this)指的是jQuery对象

注：内部的this指的是原生对象，$(this)指的是jQuery对象

toggleClass()和click的联合使用

        $(function(){
            var $box = $('.box');
            var $btn = $('#btn1');
            //绑定click事件
            $btn.click(function(){
                // if($box.hasClass('display')){
                //     $box.removeClass('display');
                // }

                // else{
                //     $box.addClass('display');
                // }
            //简化成下面写法
            $box.toggleClass('display');//控制盒子的隐藏和显示
                // //获取当前触发事件的对象
                // $(this).css('color','green');
                // //内部的this指的是原生对象，$(this)指的是jQuery对象
            });

        })

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取，注释：如果未找到元素，index() 将返回 -1。

        $(function(){
            var $li = $('.list li').eq(1);
            alert($li.index()); //弹出1
        })

练习-选项卡

<!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>选项卡</title>
    <script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            var $btn = $('input');
            var $div = $('div');
            $btn.click(function(){
            $(this).addClass('input_style').siblings().removeClass('input_style');
            $div.eq($(this).index()).addClass('box_style').siblings().removeClass('box_style');
            })

        })
    </script>
    <style>
        input{
            font-size: 20px;
            border: none;
        }
        .input_style{
            background-color: gold;
        }

        div{
            display: none;
        }

        .box_style{
            width: 400px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            display: block;
        }
    </style>
</head>
<body>
    <input class="input_style" type="button" value="选项一">
    <input type="button" value="选项二">
    <input type="button" value="选项三">
    <div class="box_style">选项一的内容</div>
    <div>选项二的内容</div>
    <div>选项三的内容</div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（二）样式操作和click事件

文章目录jQuery样式操作操作行间样式操作样式类名click事件toggleClass()和click的联合使用获取元素的索引值练习-选项卡jQuery样式操作jQuery用法思想二：同一个函数完成取值和赋值操作行间样式 $(function(){ var $box = $('.box'); $box.css('width'); //获取对象的宽 alert($box.css('font-size'));
复制链接

扫一扫