[JQuery]：jQuery篩選元素方法、操作CSS樣式和處理事件方式

jQuery篩選元素

        雖然層次選擇器 + 過濾選擇器時也能做到篩選元素功能，但當HTML的DOM結構複雜時，獲取元素效率就會很慢，而且選取器字符串過長很不便於閱讀，所以可以使用jQuery的相關方法來輔助篩選元素，會比較方便直觀，更符合邏輯。

篩選元素的常用方法

• parent()：獲取匹配元素的父元素。
• children()：獲取匹配元素的所有子元素。
• next() ：獲取匹配元素的下一個元素。（注意：是同級元素）
• prev() ：獲取匹配元素的上一個元素。
• siblings() ：獲取匹配元素前後的同輩元素。
• closest()：獲取最近的匹配元素。首先從當前元素查找，找到就返回該元素。未找到逐級向上查找，如果找不到，返回一個空的jQuery對象。
• find()：在後代元素中搜索所有匹配的元素，非常有用。

<!-- 文檔結構 -->  
  <div id="div1">
        <p>p標籤</p>
        <ul>
            <li>一號</li>
            <li>二號</li>
            <li>三號</li>
            <li>四號</li>
        </ul>
        <p>p標籤2</p>
        <h4>第一個h4標籤</h4>
        <h4>第二個h4標籤</h4>
        <div id="div2">
            <ol>
                <li>有序1</li>
                <li>有序2</li>
            </ol>
        </div>
    </div>

        //獲取<ol>元素的父元素，然後獲取它的id
        var $parId = $("ol").parent().attr("id");
        console.log("#" + $parId);

        //獲取id爲div1的元素中所有子元素
        var $children = $("#div1").children();
        
        //選取所有<p>元素，獲取它們的下個元素
        var $next = $("p").next();

        //篩選出 <ul>的下一個元素並匹配<h4>元素。這裏不匹配，所以返回空jQuery對象
        var $nextArgs = $("ul").next("h4"); 
        
        //篩選<ul>元素之後的所有<h4>元素
        var $nextAll = $("ul").nextAll("h4");

        //篩選ul中所有li元素，匹配第二個li元素的上個元素
        var $prev = $("ul li").eq(1).prev();

        //篩選出<ul>元素的所有同輩元素
        var $siblings = $("ul").siblings();
        //其他方式實現
        var $siblings = $("ul").parent().children().not("ul"); //children(":not('ul')");

        //事件委託方式：給<ul>元素加上一個點擊事件
        $("ul").on("click", function(e){
            //拿到事件源, 從元素本身開始匹配<li>元素，匹配到就修改樣式
            $(e.target).closest("li").css("color", "red");
        });

        //測試結果，請自行填入相應變量,控制檯查看。
        console.log();

除了以上這些，還有許多篩選元素的方法，但不一一介紹了。如需詳細瞭解：單擊鏈接：jQuery-3.2.1的API文檔 ，建議收藏！還有一個jQuery教程網站也不錯，鏈接：jQuery教程。

jQuery操作CSS樣式

        如果是通過attr() 來設置style或class，那麼新style屬性值會替換舊style屬性值，class也是如此，那麼之前的style就會作廢，非常不靈活。所以應該使用如下方法來操作樣式：

• css(name, value) ：給匹配元素的內聯樣式中設置相關樣式。 css()方法同樣也具備get和set作用。
• addClass(“className”)：給匹配元素的class屬性添加類名。
• removeClass("className")：移除匹配元素的class屬性中指定的類名。

        //設置內聯樣式
        $("p").css("color", "red");
        $("p").css("font-size", "30px");
       
        //設置class屬性的值
        $("p").addClass("abc");
        $("p").addClass("xyz");

        //移除指定的class
        $("p").removeClass("xyz");

        //獲取指定樣式值
        $("p").css("color"); //無參數則是返回style全部屬性值
        //獲取class屬性的全部值
        $("p").attr("class")

jQuery並未提供刪除指定樣式方法，想讓某個樣式失效時，採用 $("selector").css("name", "")這種形式。

$("p").css("font-size", ""); //這時，這個樣式屬性就會被取消了。

當需要批量設置style樣式時，可以傳入一個json對象，json格式正好是key-value。

        //設置內聯樣式
        $("p").css({
            color:"red",
            fontSize:"30px" //如果樣式是橫線連接，就採用駝峯寫法。
        });