day78-jQuery-跟CSS操作相关的内容

1. 跟CSS操作相关的内容:
    1.1 类名操作：()里面填写的是类名，记得类名是字符串格式的。
        addClass();// 添加指定的CSS类名。例如：$('.c1').addClass('hide');
        removeClass();// 移除指定的CSS类名。
        hasClass();// 判断样式存不存在
        toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：自定义模态框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        .cover {
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .modal{
            width:400px;
            height:200px;
            background-color:white;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-100px;  /*居中*/
        }
        .c1:hover{
            color:red;
        }
        .hide {     /*隐藏标签*/
            display: none;
        }
    </style>
</head>
<body>
<div class="c1">点我送迈腾2020款TSI DSG</div>
<div class="cover hide"></div>
<div class="modal hide">
    <form action="">
        <div>
            <lable>用户名<input type="text" name="用户名"></lable>
            <lable>密码<input type="password" name="password"></lable>
        </div>
        <div>
            <input type="submit" value="登录">
            <input type="button" value="取消" class="cancle">
        </div>

    </form>
</div>

<script src="jquery-3.4.1.min.js"></script>
<script>
    //点c1触发下面的两标签删除类名hide
    $('.c1').click(function () {
        $(this).nextAll().removeClass('hide');
    });
    //点cancle触发两标签添加hide
    $('.cancle').click(function () {
        $('.cover').addClass('hide');
        $('.modal').addClass('hide');
    });

</script>
</body>
</html>

    1.2 CSS操作：注意：属性值就是键值对，要使用引号
        $("p").css("color", "red"); //将所有p标签的字体设置为红色

　　　　　$("p").css('border','red solid 1px');

        $("p").css({'color':'green','font-size':'20px'}); //修改多个属性值，要使用键值对。


        示例：点击字体，变绿变大。
            <style>p{color:red;font-size:15px;}</style>
            <p>迈腾2020款</p>
            <p>努力追求</p>
            <script>
                    //this是当前点击的p标签
                    $('p').click(function () {
                            $(this).css({'color':'green','font-size':'20px'});
                        });
            </script>

    1.3 位置操作：注意：属性值就是键值对，但这里的top和left不需要引号。尺寸也不需要px作为单位。
        offset()    // 获取当前窗口的相对偏移$('div').offset()结果是Object { top: 0, left: 0 }，
            //设置位置$('div').offset({top:100,left:50});
        position()        // 获取相对父元素的偏移,注意body标签也可以是父元素
        scrollTop()    // 获取相对滚动条顶部的偏移，常用：$(window).scrollTop()；等于一个尺寸。
                    $(window).scrollTop(0)；窗口滚动条滚动到顶部的距离是0。
        scrollLeft()    // 获取相对滚动条左侧的偏移
示例：返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        div{
            width:200px;
            height:3000px;
            background-color:red;
        }
        .b1{
            position:fixed;
            right:30px;
            bottom:30px;
            font-size:20px;
            background:black;
            color:white;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div>divdiv</div>
    <button class="b1 hide">返回顶部</button>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(window).scroll(function () {
            if($(window).scrollTop()>200){//窗口滚动条滚动到顶部的距离大于200
                $('.b1').removeClass('hide');//那么返回顶部这四个字出现
            }else{$('.b1').addClass('hide');}//距离小于等于200，否则隐藏
        });

        $('.b1').click(function () {
            $(window).scrollTop(0);//窗口滚动条滚动到顶部的距离是0。
        });
    </script>
</body>
</html>

    1.4 尺寸：
        height()        //$('.c1').height() 内容区的高度
        width()        //$('.c1').height() 内容区的宽度

        innerHeight()    //内容区+padding的高度
        innerWidth()    //内容区+padding的宽度

        outerHeight()    //内容区+padding+border的高度
        outerWidth()    //内容区+padding+border的宽度

posted @ 2020-03-10 11:08 梁劲雄阅读(102) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

梁劲雄

day78-jQuery-跟CSS操作相关的内容

公告