jQuery attr、prop、css、class、宽度和定位

本文链接：https://blog.csdn.net/weixin_45000381/article/details/93671401

标题1、attr和prop学习

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./node_modules/jquery/dist/jquery.js"></script>
    </head>
    <body>
        <div ab="a"></div>
        <div ab="a"></div>
        <div ab="a"></div>
        <div></div>
        <div></div>
    
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <script>
            // 仅获取第一个元素的
        //    console.log($("div").attr("ab"));
        //   $("div").attr("ab","b");
    
        // $("div").attr("ab",function(index,item){
        //     return index;
        // })
    
        // $("div").attr({
        //     a:"1",
        //     b:function(index,item){
        //         return index;
        //     }
        // })
        // 删除标签属性
        // $("div").removeAttr("a");
    
        //     var div=document.querySelector("div");
        //     div.abc=3;
        //    console.log( $("div").eq(0).prop("abc"));
        //    $("div").prop("data",1);
        //    $("div").prop("data",function(index,item){
        //        return index;
        //    })
    
            // $(":checkbox").eq(0).on("click",function(){
            // //    if(this.checked){
            // //     $(":checkbox").not(this).attr("checked","checked");
            // //    }else{
            // //     $(":checkbox").not(this).removeAttr("checked");
            // //    }
            //     $(":checkbox").not(this).prop("checked",this.checked);
            // })
    
                // var s=$("div");
                // s.abc=10;
                // console.log(s.abc);
    
    
                // $("div").abc=10;
                // 每次使用的$("div")都是一个新对象
                // console.log($("div").abc);//undefined;
    
    
    
                // jQuery对象寄存数据属性
                // $("div").data("abc",10);
                // console.log($("div").data("abc"));
        </script>
    </body>
    </html>

标题2，css和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div
        {
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        .div0{
            width: 100px;
            height: 100px;
            border-radius: 0;
            background-color: red;
        }
        .div1{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: yellow;
        }
    </style>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // $("div").css("width",100).css("height","100px").css("backgroundColor",function(){
        //     var col="#";
        //     for(var i=0;i<6;i++){
        //         col+=Math.floor(Math.random()*16).toString(16);
        //     }
        //     return col;
        // });


        // $("div").css({
        //     width:100,
        //     height:100,
        //     backgroundColor:function(){
        //         var col="#";
        //         for(var i=0;i<6;i++){
        //             col+=Math.floor(Math.random()*16).toString(16);
        //         }
        //         return col;
        //     }
        // });

            // 直接可以获取css计算后的样式,会带单位
    //   console.log(  $("div").css("width"));
    // 获取第一个元素的指定的多个样式,返回一个对象
    //   console.log($("div").css(["width","height"]));


            // $("div").addClass("div1");
            // $("div").addClass("div1 div0");
            // $("div").removeClass("div1");

            $("div").addClass("div0").on("click",function(){
                // 切换样式,奇数添加,偶数删除
                // $(this).toggleClass("div1");
                // 只切换到第一种
                // $(this).toggleClass("div1",true);
                // 不切换
                // $(this).toggleClass("div1",false);
            })
    </script>
</body>
</html>

标题3、宽度和定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <style>
        p{
            height: 1000px;
        }
        .div0{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left:50px;
            top:50px;
        }
        .div1{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            left:25px;
            top:25px;
        }
        .div2{
            width: 50px;
            height: 50px;
            background-color: orange;
            position: fixed;
            right: 25px;
            bottom:25px;
        }
    </style>
</head>
<body>
    <p></p>
    <!-- <div class="div0">
        <div class="div1"></div>
    </div> -->
    <div class="div2"></div>
    <script>
        // $("div").width(100).height(100).css("backgroundColor","red");
        // $("div").width(function(index){
        //     return (index+1)*50
        // });
        // 获取第一个元素宽度
        // console.log($("div").width());


        // $("div").innerWidth(100);//innerWidth  width+padding
        // $("div").outerWidth(100);//outerWidth  width+padding+border 
        // $("div").outerWidth(true);//不能设置,只能获取   width+padding+border+margin


            // 相对页面顶端的距离
    //    console.log($(".div1").offset());
            // $(".div1").offset({left:100,top:100});
            // $(".div1").offset({left:100})



            // 和定位中left和top相同,相对父元素,等同于DOM offsetLeft和offsetTop
            // console.log($(".div1").position());
            // $(".div1").position();//用于获取
            // $(".div1").css({left:100,top:100})



            // console.log($(document).scrollTop());//获取当前的滚动条位置
        //    $(document).on("click",function(){
        //     // $(document).scrollTop(50);//需要交互后才可以设置
        //    })


            // init();
            // function init(){
            //     $(".div2").on("click",function(){
            //         $(".div2").data("bool",!$(".div2").data("bool"));
            //     });
            //     setInterval(animation,16);
            // }

            // function animation(){
            //     if(!$(".div2").data("bool")) return;
            //     if($(document).scrollTop()<=0) $(".div2").data("bool",false);
            //     $(document).scrollTop($(document).scrollTop()-100);
            // }
    </script>
</body>
</html>