jQuery_方法_事件_ZHOU125disorder_

jQuery_方法_事件

方法

    <div class="father">
        <ul>1
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <div>5</div>
            <span>6</span>
            <p>7</p>
        </ul>
        <div>鞠婧祎</div>
        <ol>1
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // find()方法
        // 获取当前元素集合种的每个元素的后代
        $(".father").find("li").css("color","#096");
        // 在给定的父元素下匹配所有的子元素
        // children()方法
        $(".father").children("ul").css("color","#096");
        // next()下一个li
        // js   nextElementSibling
        $(".father").children().first().next("div").css({"width":"100px","height":"100px","background-color":"#096"});
        //prev  上一个
        $(".father").children().last().children().last("li").css("color","#096");
        $(".father").children().last().children().last("li").prev().css("color","#096");
        // nextAll()    下面的全部
        $(".father").children().nextAll().css("color","#096");
        $(".father").children().last().children().last().prevAll().css("color","#096");
        // siblings()   获取匹配集合种每个元素的同胞，通过选择器进行筛选
        $(".father").children().first().css("color","#096");
        $(".father").children().first().siblings().css("color","#096");
        //siblings()    里面不写东西则取反
        $(".father").children().first().children().siblings("li").css("color","#096");
    </script>

事件

    <button>Game Over</button>
    <div style="width: 100px;height: 100px;background-color:#096;"></div>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // 绑定事件
        // js内联模式   动态绑定   addEventListener

        // 第一种：直接使用事件名
        $("button").click(function(){
            alert("Game Over");
        });

        // 第二种方式  on(事件，function)
        $("button").on("click",function(){
            alert("Game Over");
        });

        // 第三种方式：bind(事件，function)
        $("button").bind("click",function(){
            alert("Game Over");
        });

        // 解绑事件
        // off()通常用于移除通过on方法绑定的事件
        $("button").off("click");
        // unbind()
        $("button").unbind();

        
        // 复合事件
        $("div").hover(function(){
            $("div").css("background-color","#ddd");
        },function(){
            $("div").css("background-color","#096");
        });
    </script>