jQ常规选择器总结

jQ最方便的部分就是选择器对于元素的筛选：基本标签匹配、层级、可见性、内容、属性、表单、子元素、表单对象等方便都做了一些封装！

html结构：

<div id="wrap">
    <box class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li class="three">3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>hello</li>
            <li><p></p></li>
            <li></li>
        </ul>
        <form>
            <label>name:</label>
            <input type="text" value="请输入用户名" name="username">
            <input type="text" value="请输入密码" name="passwd">
            <input type="submit" name="login" value="登录">
            <input type="submit" name="reg" value="注册">
        </form>
        <input type="button" name="" value="重置">
    </box>
</div>

选择器总结：

    $("*") // 获取所有的元素
    $("#wrap") // id 类的元素
    $(".nav") // class 类的元素
    $("ul") // ul标签类的元素
    $("ul li") // 给定的祖先下匹配所有的子元素
    $(".nav,ul,form") // 多项同时选择元素
    //层级
    $("form > input") // form下的第一个input元素 父元素的第一个子元素
    $("label + input") // 匹配所有跟在lable后面的input元素 此时匹配到的是表单中所有的input
    $("form ~ input") // form 的同级input元素
    //基本
    $("ul li:first").css({"color":"red"}) // ul下面的第一个li
    $("ul li:last").css({"color":"green"}) // ul下面的最后一个li
    $("ul li:even").css({"backgroundColor":"yellow"}) // ul下面所有的奇数行
    $("ul li:odd").css({"backgroundColor":"pink"}) // ul下面所有的偶数行
    $("ul li:eq(3)").css("color","white") // 对象集合li里面索引为3的li
    $("ul li:gt(3)").css("color","white") // 对象集合li里面索引大于3的li
    $("ul li:lt(3)").css("color","red") // 对象集合li里面索引小于3的li
    //----------------------------------------------------------------
    //:not()伪类过滤选择器
    $("ul li:not(.three)") //所有的li里面排除class为three的li  $("selector1:not(selector2)")
    $("input:not(:checked)") // 所有的input,排除已经选中的复选框
    // 按内容匹配
    $("ul li:contains('hello')").css("color","red") // 选中内容为hello的li
    $("ul li:empty").css("backgroundColor","red") // 选中内容为空的li
    $("ul li:has('p')").addClass('p') //选中内部有p标签的li
    $("ul li:parent").addClass('p') //匹配含有文本或者子元素的li，即能作为父级存在的li
    //按显隐性匹配
    //-----------------------------------------------------------
    // 如 $('input:hidden') 匹配属性display为hidden的input，或者是type为hidden的input
    // 如 $('input:visible') 匹配所有可见的input
    // ----------------------------------------------------------
    // 按属性匹配
    $("input[name='username']") // 匹配name为username的输入框
    $("input[name!='username']")// 匹配name不为username的输入框  
    //  ' ^= ' 以特定字符串开头的;  '$=' 以特定字符串结尾的 '*=' 包含某种特定字符串的 
    //  
    $(":input") // 匹配所有input  
    //:text 匹配所有文本框(type='text') :password 匹配所有密码框(type='password') :radio 单选框  
    //:checkbox 复选框(type='checkbox') :submit 提交按钮 :reset 重置按钮 :button 所有按钮
    // $("select option:selected") 所有选中的下拉框  $("input:checked") 所有选择的复选框
    //---------------------------------------------------------------------------------
    //子元素筛选
    $("ul li:fist-child") // 匹配ul下面第一个子元素li