jquery基础用法

jquery的选择器：所有选择器选择出来的元素都是以数组的形式返回

html代码结构

 <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <ul class="list">
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
        <li>link6</li>
    </ul>
    <div class="msg">
        <div class="xbox">
            <h2>二级标题1</h2>
            <h2>二级标题2</h2>
        </div>
        <h2>二级标题3</h2>
        <h2>二级标题4</h2>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" abc="hello">
    <input type="text" abc="hello" qwe>
    <input type="text" abc="world" qwe>

    // id：失明特性
     $("#box").css("background","red");

    // class
     $(".cont").css("background","red");

    // 标签
    $("span").css("background","red");

    // 属性
     $("input[abc=hello][qwe]").css("background","red");

    // 包含：后代
    $(".msg h2").css("background","red");

    // 群组：
     $("#box,.cont,span").css("background","red");

    // 包含：子
    $(".msg>h2").css("background","red");

    // 下一个兄弟
     $(".msg+span").css("background","red");
    // 下所有兄弟
    $(".msg~span").css("background","red");

    // 指定索引，从0开始
     $(".cont:eq(1)").css("background","red");

    $(".list li:eq(2)").css("background","red");

    // 第一个或最后一个
     $(".list li:first").css("background","red");
     $(".list li:last").css("background","red");

     $(".list li:odd").css("background","red");
    $(".list li:even").css("background","red");

jquery筛选方法

  $(".msg~h2")
    $(".msg").children("h2").css("background","red");
 //   如果能够使用筛选方法，尽量不要使用过于复杂的字符串传参实现选择
    $(".msg h2")
    $(".msg").find("h2").css("background","red");

    $(".list").children("li").first().css("background","red");
    $(".list").children("li").last().css("background","red");
    $(".list").children("li").eq(3).css("background","red");

    $(".msg").next("span").css("background","red");
    $(".msg").nextAll("span").css("background","red");

    $(".list").prev(".cont").css("background","red");
    $(".list").prevAll(".cont").css("background","red");

    $(".list").siblings().css("background","red");

    $(".xbox").parent().css("border","solid 1px black");
    $(".xbox").parents().css("border","solid 1px black");

    $(".list").children("li").eq(3).end().css("background","red");