jQuery选择器

最近给写的都是笔记，只是知识点，没有示例和效果图，看的很难明白，看的效果也不是很好，接下来就把知识点和案例结合到一起，可能更好的理解看的也比较方便

jQuery的选择器分为两类

通过css选择器选取元素：
 1. 基本选择器
 2. 层次选择器
 3. 属性选择器
通过过滤选择器选取元素：
 1. 基本过滤选择器
 2. 可见性过滤选择器

今天咱们先说通过css选择器选择元素，其实css选择器也就是之前h5学过的，基本上的话都会，算是复习了

第一个基本选择器

1. 标签选择器:根据标签名称获取元素 例如：$（“h1”）
2. 类选择器：根据类名称获取元素 例如：$(“.class”)
3. id选择器：根据id名称获取元素 例如：$(“#id”)
4. 全局选择器：获取所有的元素 例如：$(“*”)
5. 并集选择器：将每一个匹配到的元素合并到一起 例如：$(“h1,.class,#id,span”)
   先看html代码

<section id="book">
    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>

jQuery代码

	//标签选择器的使用
    $("h1").css("color","green")
    //类选择器
    $(".price").css({"background":"red","padding":"20px"})
    //id选择器
    $("#author").css("color","pink")
    //并集选择器
    $(".intro,dd,dt,#jdPrice").css("color","purple")
    //全局选择器
    $("*").css("font-weight","bolder")

第二个层次选择器：

1. 后代选择器：选取某元素的所有后代元素 例如：$(“ul li”)
2. 子类选择器：选取某元素的所有子元素 例如：$(“ul>li”)
3. 相邻选择器：获取某元素的下一个同辈元素 例如：$(“ul+p”)
4. 同辈选择器：获取某元素之后所有的同辈元素 例如：$(“ul~p”)
5. 所有兄弟选择器：.siblings
   html5代码同上第一个标签选择器的代码
   jQuery的代码：

        //后代选择器：获取元素的后代元素
        // $(".textRight p").css("color","red")
        //子选择器：获取元素的子元素
        // $(".textRight>p").css("color","red")
        //相邻选择器 获取紧邻元素后的下一个兄弟元素
        // $("h1+p").css("background","blue")
        //同类选择器:获取紧邻元素后的所有同辈元素
        //$("h1~P").css("background","blue")

第三个属性选择器：

1. 属性选择器: 包含某属性 $(“a[href]”)
2. 包含某属性并且属性值等于绝对值 $(“a[href=‘abc’]”)
3. 包含某属性并且属性值不等于绝对值 $(“a[href!=‘abc’]”)
4. 属性值以xxx开头 $(“a[href^=‘xxx’]”)
5. 属性值以xxx结尾 $("a[href$=‘xxx’]")
6. 包含某属性的绝对值 $(“a[href*=‘xxx’]”)
   这个换个html5的代码

<section id="news">
    <header>京东快报<a href="#" class="more">更多 > </a></header>
    <ul>
        <li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
        <li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
        <li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
        <li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
        <li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
    </ul>
</section>

jQuery代码

        //包含该元素
        // $("a[href]").css("color","red")
        //属性值等于绝对值
        // $("a[href='sale.jd.com/act/h7mf8.html']").css("color","blue")
        //属性值不等于绝对值
        // $("a[href!='sale.jd.com/act/h7mf8.html']").css("color","red")
        //属性值包含绝对值
        // $("a[href*='com']").css("color","red")
        //属性值以xxx开头
        $("a[href^=www]").css("color","pink")
        //属性以xxx结尾
        $("a[href*=html]").css("color","red")

最后需要注意的：

1. 代码有的注释掉了，因为不注释掉后边效果会把前面效果覆盖掉，如果大家看的话把前边的双斜杠去掉。
2. 这些都是在jQuery里面写的，需要先导入jQuery包和jQuery框架
3. 空格不要随便写：因为空格代表后代