[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" //如果样式是横线连接，就采用驼峰写法。
        });