关于jQuery的选择器

1.简单的布局

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn" id="anniu">按钮</button>
<button class="btn" id="anniu2">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<h1>1111</h1>
<h2>1111</h2>
<h3>1111</h3>
<h4>1111</h4>
<div></div>
<div>

</div>
<div>
</div>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>

<span id="#span">特殊字符</span>
<span class="+span">特殊字符</span>

2.书写简单的样式

 <style>
        input:focus{
            color: red;
        }
        button{
            display: none;
        }
    </style>

3.关于jQuery的选择器的属性

    console.log($("*"));
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#anniu"));
    console.log($("#anniu,#anniu2"));

    console.log($("ul li"));
    console.log($("ul.menu>li"));
    console.log($("ul.menu>li:nth-child(1)+li"));
    console.log($("ul.menu>li:nth-child(1)~li"));
    console.log($("ul.menu>li:first"));
    console.log($("ul.menu>li:first-child"));
    console.log($("ul.menu>li:not(.child)"));//:not(selector)

    console.log($("ul.menu>li:even"));
    console.log($("ul.menu>li:odd"));

    console.log($(".menu>li:eq(3)"));

    console.log($(".menu>li:lt(2)"));
    console.log($(".menu>li:gt(2)"));


    console.log($("body :header"));

    $("input").focus(); //默认获得焦点
    console.log($("body :focus"));

    console.log($(":root"));

    console.log($("ul li:contains(2)"));
    console.log($("ul li:contains(你)"));

    console.log($("div:empty"));


    console.log($("ul.menu:has(.child)"));

    console.log($("div:parent")); //匹配的元素必须有子元素或者 内容


    console.log($(":visible"));
    console.log($(":hidden"));


    console.log($("input[type]"));
    console.log($("input[type='text']"));
    console.log($("input[type^='t']"));
    console.log($("input[type$='t']"));
    console.log($("input[type*='x']"));
    console.log($("input[type][class][id]"));

    console.log($("#nav>li:first-child"));
    console.log($("#nav>li:last-child"));
    console.log($("#nav>li:first-of-type"));
    console.log($("#nav>li:last-of-type"));
    console.log($("#nav>li:nth-child(3)"));
    console.log($("#nav>li:nth-last-child(2)"));
    console.log($("#nav>li:nth-of-type(2)"));
    console.log($("#nav>li:nth-last-of-type(2)"));

    console.log($(":input"));
    console.log($(":text"));
    console.log($(":password"));
    console.log($(":radio"));
    console.log($(":checkbox"));
    console.log($(":submit"));
    console.log($(":reset"));
    console.log($(":file"));
    console.log($(":image"));


    console.log($("input:disabled"));
    console.log($("input:enabled"));
    console.log($("input[type=radio]:checked"));
    console.log($("select>option:selected"));

    //$.escapeSelector("#span")   3.0+
    console.log($.escapeSelector("#span"));
    console.log($("#"+$.escapeSelector("#span")));//   \#span
    console.log($("."+$.escapeSelector("+span")));//   \#span