前几天回家，参加了全国的成人高考，都说学历是找工作的敲门砖，其实一点都不假，尤其是现在的社会竞争力那么强，你不学就会被淘汰。像要过自己想要的生活，就必须努力学习，努力赚钱，买自己想买的，过自己想过的。
废话不多说，学习今天的知识点。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 { 1000px;height: 475px;margin: 0 auto;margin-top: 100px;} .tab {border: 1px solid #ddd;border-bottom: 0;height: 36px; 320px;} .tab li {position: relative;float: left; 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; 1px;height: 14px;overflow: hidden;} .products { 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>
