jQuery相关方法2

一、元素样式设置的方式（css，json键值对，链式编程）

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
            //第一种----普通的css设置
                //$("#dv").css("width","100px");
                //$("#dv").css("height","100px");
                //$("#dv").css("backgroundColor","red");
            //第二种-----json键值对格式
                //$("#dv").css({"width":"100px","height":"100px","backgroundColor":"red"});
            //第三种-----链式编程
                $("#dv").css("width","100px").css("height","100px").css("backgroundColor","red");
            });
        });
    </script>
    <input type="button" value="设置" id="btn">
    <div id="dv"></div>

二、链式编程（概念，前提，经验）

• 概念:对象不停的调用方法----对象.方法().方法().方法().....
• 前提:调用方法,如果返回值还是这个方法,就可以继续的调用方法
• 经验:在jQuery中,一般情况下,对象调用的方法,如果是设置的意思,返回的几乎都还是这个对象,可以使用链式编程

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function(){
                console.log($(this).val());//----这个是获取值,返回的已经不是原来的对象,不可用链式编程
                console.log($(this).val("嘿嘿"));//-----这是设置值,返回的还是原来的对象,可以链式编程
                $(this).val("嘿嘿").css("background","red");
            });
        });
    </script>
    <input type="button" value="哈哈" id="btn">

三、元素添加样式（addClass）

        .cls{
            width: 200px;
            height: 200px;
            background: red;
        }
        .cls2{
            border: 10px solid #000;
        }

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
            //添加一种样式
                //$("#dv").addClass("cls");
            //添加两种样式版本1
                //$("#dv").addClass("cls").addClass("cls2");
            //添加两种样式版本2
                $("#dv").addClass("cls cls2");
            });
        });
        //注意:$("#dv").css("class","cls")---不能添加样式
    </script>
    <input type="button" value="添加" id="btn">
    <div id="dv">一个div</div>

四、元素移除样式

        .cls{
            width: 200px;
            height: 200px;
            background: red;
        }
        .cls2{
            border: 10px solid #000;
        }

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
            //移除一种样式
                //$("#dv").removeClass("cls");
            //移除两种样式版本1
                //$("#dv").removeClass("cls").removeClass("cls2");
            //移除两种样式版本2
                $("#dv").removeClass("cls cls2");
            });
        });
        //注意:$("#dv").css("class","")---不能移除样式
    </script>
    <input type="button" value="移除" id="btn">
    <div id="dv" class="cls cls2">一个div</div>

五、案例：网页开关灯

        .cls{
            background: #000;
        }

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //版本1----hasClass,removeClass,addClass

        $(function(){
            $("#btn1").click(function(){
               if( $("body").hasClass("cls")){
                $("body").removeClass("cls");
               }else{
                $("body").addClass("cls");
               }
            });
        });
        //版本2----toggleClass切换类样式
        $(function(){
            $("#btn2").click(function(){
                $("body").toggleClass("cls");
            });
        });
    </script>
    <input type="button" value="版本1开关灯" id="btn1">
    <input type="button" value="版本2开关灯" id="btn2">

六、获取兄弟元素的方法

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //点击第五个li
            $("#five").click(function(){
            //当前li的所有后面的兄弟元素------nextAll()
                $(this).nextAll("li").css("background","red");
            //当前li的下一个的兄弟元素------next()
                $(this).next("li").css("background","yellow");
            //当前li的所有前面的兄弟元素------prevAll()
                $(this).prevAll("li").css("background","blue");
            //当前li的上一个的兄弟元素------prev()
                $(this).prev("li").css("background","orange");
            //当前li的所有兄弟元素-------siblings()
                //$(this).siblings("li").css("background","purple");
            });
        });
    </script>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li id="five">第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
        <li>第9个li</li>
        <li>第10个li</li>
    </ul>

七、案例：操作当前元素的兄弟元素样式

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //知识点:
        //1.链式编程----出现断链使用end()方法,修复断链,恢复到断链之前的状态,这种情况不推荐使用链式编程
        //2.parent()方法可以找到当前元素的父级元素
        //3.find()方法可以找到某个元素
        $(function(){
            $("ul>li").mouseenter(function(){//鼠标进入事件
                $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
            }).mouseleave(function(){//鼠标离开事件
                $(this).parent().find("li").css("backgroundColor","")
            }).click(function(){//鼠标点击事件
                $(this).prevAll("li").css("backgroundColor","blue").end().nextAll("li").css("backgroundColor","yellow");
            });
        });
    </script>
    <ul>
        <li>第1个div</li>
        <li>第2个div</li>
        <li>第3个div</li>
        <li>第4个div</li>
        <li id="five">第5个div</li>
        <li>第6个div</li>
        <li>第7个div</li>
        <li>第8个div</li>
        <li>第9个div</li>
        <li>第10个div</li>
    </ul>

八、案例：tab切换效果

        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }
        .tab{
            position: absolute;
            left: 0;
            top: 0;
        }
        .products{
            position: absolute;
            left: 0;
            top: 21px;
        }
        .tab li{
            list-style: none;
            float: left;
            margin: 0 10px;
        }
        .products div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: none;
        }
        .active{
            background: red;
        }
        .products .selected{
            display: block;
        }

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //找到li,注册鼠标进入事件
            $(".tab>li").mouseenter(function(){
                //当前li添加active样式,而它的兄弟元素则删除
                $(this).addClass("active").siblings("li").removeClass("active");
                //记录当前元素的索引值
                var index=$(this).index();
                //li对应的div根据索引值变化,添加selected样式,它的兄弟元素删除这个样式
                $(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
            });
        });
    </script>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">鸿星尔克</li>
            <li class="tab-item">阿迪达斯</li>
            <li class="tab-item">耐克</li>
            <li class="tab-item">特步</li>
        </ul>
        <div class="products">
            <div class="main selected">商品1</div>
            <div class="main">商品2</div>
            <div class="main">商品3</div>
            <div class="main">商品4</div>
        </div>
    </div>