yquery-操作样式属性

前几天回家，参加了全国的成人高考，都说学历是找工作的敲门砖，其实一点都不假，尤其是现在的社会竞争力那么强，你不学就会被淘汰。像要过自己想要的生活，就必须努力学习，努力赚钱，买自己想买的，过自己想过的。

废话不多说，学习今天的知识点。jq操作样式。

样式属性操作css
 
操作css改变样式方法
<script>
    //方法1 css({json})
    $f(unction(){
        $("div").css({"width":100,"height":100, "background":"red"})
    })
    //第二种方法
    $(window).ready(function(){
        $("div").css("background","blue")
    })
    //第三种方法 一个参数获取，参数值
    $(document).ready(function(){
        console.log($("div").css("width"))
    })
</script>

 

添加类 删除类  判名 返回值（true false）

 $(function(){
            $("button:eq(0)").click(function(){
                //添加类名
                $("div").addClass("current");
                
                //判断类名
                alert($("div").hasClass("current"))
            });
            $("button:eq(1)").click(function(){
                //删除类名
                $("div").removeClass("current");
                
                //判断类名
                alert($("div").hasClass("current"))
            })
        })
    </script>

 

切换类 没有类添加类，有类删除类
  
 $("div").toggleClass("current")
 
案例
切换背景
<script>
        $(function(){
            $("button").click(function(){
                if($("div").hasClass("current")===true){
                    $("div").removeClass("current")
                }else{
                    $("div").addClass("current")
                }
            })
        })
    </script>

淘宝top栏

 <style type="text/css">
        * {  margin: 0;  padding: 0; }
        ul { list-style: none; }
        .wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}
        .tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}
        .tab li {position: relative;float: left;width: 80px; height: 34px;
            line-height: 34px; text-align: center; cursor: pointer; border-top: 4px solid #fff; }
        .tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}
        .products {width: 1002px;border: 1px solid #ddd;height: 476px;}
        .products .main { float: left; display: none; }
        .products .main.selected {display: block;  }
        .tab li.active {border-color: red;border-bottom: 0; }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        jQuery(window).ready(function(){
            //鼠标放到LI上，对应的LI添加类，其他LI删除类
            //下面对应的DIV添加类，其他的删除类
            $(".tab>li").click(function(){
                $(this).addClass("active").siblings("li").removeClass("active");
                $(".products>.main").eq($(this).index()).addClass("selected").siblings(".main").removeClass("selected")
            })
        })
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="../image/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../image/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../image/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../image/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

 

 

 

posted @ 2017-10-31 12:05  Me*淡定  阅读(404)  评论(1)  编辑  收藏  举报