jQuery_CSS、属性

最新推荐文章于 2024-11-12 22:56:44 发布

仙鹤__

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量60

点赞数

文章标签： css jquery 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130666327

版权

jquery中css操作、class类操作、属性操作、效果

1.1 CSS

1.1.1 css操作

css(name|pro|[,val|fn])功能:设置样式和获取样式，就是操作style属性

1.访问

<h1 id="t1" style="color:blue;">小yu</h1>

2.jquery访问页面中的标签元素

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //css()设置和访问元素身上的样式(行内样式)
            //访问
          $c1=  $('#t1').css('color')
          console.log($c1);

          //1.设置单个css

        //   $('#t1').css('color','red')
        //   $('#t1').css('backgroundColor','orange')
        //   $('#t1').css('fontSize','130px')

          //简写
          $('#t1').css('color','red').css('backgroundColor','orange').css('fontSize','130px')

          //2.设置多个样式
          $('#t1').css({
            "color":"green",
            "backgroundColor":"pink",
            "fontSize":"120px"
          })

         
        })

    </script>

预览：

1.1.2 位置

offset和position方法

offset()方法获取元素距离document的位置

$(selector).offset();//返回值为对象{left:100,top:20}

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 200px;
        left: 100px;
    }
</style>

 <div class="box"></div>

 <script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //设置元素的偏移量
            $('.box').offset({
                top:300,
                left:300
            })
             //位置
            //获取元素的偏移量
            $o=$('.box').offset()
            console.log($o);
            console.log($o.top);
            console.log($o.left);
           
        })
    </script>

预览：

position方法

只能获取当前元素距离有定位的父元素的位置

$(selector).position();//获取相对于其最近的有定位的父元素位置

注意：这个方法，只有获取，没有设置。

<style>
    .parent{
        width: 600px;
        height: 600px;
        background-color: skyblue;
        margin:0 auto;
        position: relative;
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 200px;
        left: 100px;
    }
</style>

 <div class="parent">
        <div class="box"></div> 

    </div>

 <script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //位置
            //获取
            $p=$('.box').position()
            console.log($p);

            console.log($p.top);
            console.log($p.left);

            //设置
            //注意：position方法只能获取当前元素距离有定位父元素的位置(没有设置)
            // 我们可以通过attr方法，对元素的位置进行调整
         $('.box').attr("style","top:300px;left:300px;")
           
        })
    </script>

预览：

scrollTop方法

获取匹配元素相对滚动条顶部的偏移（白话：页面垂直方向上，卷曲（卷上去）的高度）

scrollLeft方法

获取匹配元素相对滚动条左侧的偏移（白话：页面水平方向上，卷曲的宽度）

设置或者获取垂直滚动条的位置
$(window).scrollTop();//获取页面被卷曲的高度
$(window).scrollLeft();//获取页面被卷曲的宽度

上面这两个方法需要结合事件中 scroll 一起使用。当用户滚动指定的元素时，会发生 scroll 事件。

<style>
    .container{
        width: 360px;
        height: 260px;
        margin:60px auto;
        overflow: auto;
        overflow-x:scroll;
    }
    .container p{
        width: 450px;
    }
</style>

<div class="container">
        <p>
            央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！
            央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！
            央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！

        </p>
        <p>
            他被吸进了20多米长的涵洞

            试想

            如果你被洪水卷挟着

            吸进了20多米长的涵洞

            漆黑的周遭

            湍急的洪流

        </p>
    </div>

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
         

            $('.container').scroll(function(){
            //获取页面被卷曲的高度
            $st=$('.container').scrollTop()
            console.log($st);
           
            //获取页面被卷曲的宽度 
            $sl=$(this).scrollLeft()
            console.log($sl);
           


            })
           
           
        })
    </script>

预览：

jQuery实现返回顶部效果

分析：

（1）需要使用 事件中的方法scroll （），这个方法的作用是：

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

（2）fadeIn(300)淡入--慢慢的显示出来

（3）fadeOut(300)淡出--慢慢的隐藏起来

（4）animate() 用于创建自定义动画的函数

素材来源：https://www.jq22.com/demo/jqueryTop/

<style>
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{background:url(img/blog7year_videobg.png);font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

    /* actGotop */
    .actGotop{position:fixed;_position:absolute;bottom:100px;right:50px;width:150px;height:195px;display:none;}
   
    .actGotop a,.actGotop a:link{width:150px;height:195px;display:inline-block;background:url(img/blog7year_gotop.png) no-repeat;_background:url(img/blog7year_gotop.gif) no-repeat;outline:none;}
   
    .actGotop a:hover{background:url(img/blog7year_gotopd.gif) no-repeat;outline:none;}
   
    </style>

<body style="height:2000px;">
        <div class="actGotop">
            <a href="javascript:;" title="返回顶部"></a>
        </div>

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $(window).scroll(function(){
                //获取卷上去的距离
                $top =$(this).scrollTop()
                console.log($top);
                //设置临界点
                if($top>=100){
                    $(".actGotop").fadeIn(300);
                }else{
                    $('.actGotop').fadeOut(300)
                }
            })

            //单击按钮
            $(".actGotop").click(function(){
                console.log(100);
               
                //给dom对象中的根节点指定一个自定义动画
                $("html,body").animate({
                    //以小驼峰的形式写属性是js的写法
                    // scrollTop:0

                    //在引号里面写属性,这个是css的写法
                    "scroll-top":0

                })

            })
        })
        </script>

预览：