jquery的选择器

jquery的选择器

1.jquery的基本选择器

<div>
    <p id="p1">昔我往矣</p>
    <p class="p2">杨柳依依</p>
    <p class="p2">今我来思</p>
    <p>雨雪霏霏</p>
</div>
<button> jq的基本选择器 </button>

<script>

    /*
    标签选择器 $(“a”)
    ID选择器 $(“#id”)     $(“p#id”)
    类选择器 $(“.class”)    $(“h2.class”)
    通配选择器$("*")
    并集选择器$("elem1,elem2,elem3")
     */
    document.querySelector("button").onclick = function () {

        let pArr = $("p");  // 拿到的是数组
        //size() 函数 是jq的
        console.log(pArr.size())

        // css() 操作属性的方法 (jq可以操作数组的所有的元素的样式)
        // pArr.css("backgroundColor","blue");
        // $(pArr[1]) 操作单个p标签的属性
        // $(pArr[1]).css("backgroundColor","yellow");

        //id 选择器
        // $("#p1").css("backgroundColor","green");
        // 类选择器
        // $(".p2").css("backgroundColor","green");
        $(".p2,button").css("backgroundColor","gold");
    }

</script>

2.jquery的层级选择器

<div id="div1">
    <p id="p1">
        <span>我是孙子标签 sapn</span>
    </p>

    <div id="div2">我是儿子div标签 </div>
    <span>儿子span标签 hello span1 </span> <br>
    <span>儿子span标签 hello span2 </span> <br>
    <span>儿子span标签 hello span3 </span> <br>
</div>
<button>
    层级选择器
</button>

<script>

    /*
    后代选择器$(ul li)
    父子选择器$(ul>li)
    后面第一个兄弟元素（紧跟）prev + next
    后面所有的兄弟元素(同辈) prev ~ next
     */
    document.querySelector("button").onclick = function () {

        // 后代 选择器
        // $("div span").css("backgroundColor","yellow");
        // 子代   选择器
        // $("div > span").css("backgroundColor","blue");
        //    后面第一个兄弟元素（紧跟）prev + next
        // $("div + span").css("backgroundColor","blue");
        $("div ~ span").css("backgroundColor","blue");
    }
</script>

3.jquery的位置选择器

<ul>
    <li>武汉</li>
    <li>长沙</li>
    <li>广州</li>
    <li>深圳</li>
    <li>香港</li>
    <li>澳门</li>
</ul>
<script>
    /*
    03、位置选择器
    :first 第一个  :last  最后一个
    :odd 奇数    :even 偶数
    :eq(index)   等于
    :lt(index)    小于
    :gt(index)   大于
     */
     // 第一个
    // $("li:first").css("backgroundColor","red");
    // $("li:last").css("backgroundColor","blue");
    // $("li").last().css("backgroundColor","blue");
    // 最后一个
    // $("li:odd").css("backgroundColor","blue");
    // $("li:even").css("backgroundColor","yellow");
    // 等于
    // $("li:eq(3)").css("backgroundColor","yellow");
    // 小于
    // $("li:lt(3)").css("backgroundColor","red");
    // 大于
    // $("li:gt(3)").css("backgroundColor","pink");

    // 去除第一个
    // $("li:not(:first)").css("backgroundColor","pink");
    //去掉 3个
    $("li:not(:eq(2))").css("backgroundColor","pink");
</script>

4.jquery的子元素选择器

<div id="div1" style="height: 300px; border: 3px solid red;">
    <h1>hello p </h1>
    <p>hello p </p>
    <ul>
        <li>List Item1</li>
        <li>List Item2</li>
        <li>List Item3</li>
        <li>List Item4</li>
    </ul>

    <ul>
        <li>List2 Item1</li>
        <!--   <li>List2 Item2 </li>-->
    </ul>
    <p>hello p </p>
    <p>hello p </p>
</div>
<script>
    /*
        :nth-child(index)  这个是从1开始的
        :only-child 是唯一的孩子
        :first-child  第一个孩子
        :last-child  最后一个孩子
     */
    // $("ul li:nth-child(1)").css("backgroundColor","red");
    // $("ul li:only-child").css("backgroundColor","red");
    // $("ul li:first-child").css("backgroundColor","red");
    // $("ul li:last-child").css("backgroundColor","gold");

    //类型 last-of-type
    // last-child  元素
    // $("ul li:last-of-type").css("backgroundColor","gold");

    $("div h1:first-child").css("backgroundColor","blue");
    $("div p:first-of-type").css("backgroundColor","pink");
</script>

5.jquery的属性选择器

<form action="doRegister.jsp" method="get">
    <table border="1" width="40%">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td>
        </tr>
        <tr>
            <td>密&nbsp;码</td>
            <td><input type="password" name="pwd" id="pwd"/></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="color" name="spwd" id="repwd"/></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="男"/>男
                <input type="radio" name="sex" checked="checked" value="女"/>女
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input type="number" name="sage" id="age" value="18"/></td>
        </tr>
        <tr>
            <td>电子邮箱</td>
            <td><input type="email" name="semail" id="email"/></td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <input type="checkbox" name="hobby" value="music" checked/>音乐
                <input type="checkbox" name="hobby" value="sports"/>体育
                <input type="checkbox" name="hobby" value="art"/>美术
            </td>
        </tr>
        <tr>
            <td>身份</td>
            <td>
                <select name="professional">
                    <option value="1">工人</option>
                    <option value="2">农民</option>
                    <option value="3" selected="selected">解放军</option>
                    <option value="4">知识分子</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>简历</td>
            <td>
                <textarea name="resume" rows="5" cols="40">请输入简历</textarea>
            </td>
        </tr>
        <tr>
            <td>照片</td>
            <td><input type="file" name="photo" id="photo"/></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="提交" disabled="disabled"/>
                <input type="reset" value="重置"/>
                <input type="button" value="返回" onclick="alert('back')"/>
            </td>

        </tr>
    </table>
</form>
<script>

    /*
    [attribute]  		     有属性		$("div[id]");
    [attribute=value]    属性等于
    [attribute!=value]    属性不等于
    [attribute^=value]   属性值开始
    [attribute$=value]    属性值结尾
    [attribute*=value]    属性值统配所有
     */
    // 拿到所有的有 type属性的标签
    // $("[type]").css("backgroundColor","blue");
    // 拿到指定的标签的type属性的标签
    // $("input[type]").css("backgroundColor","blue");

    // type属性等于指定的值
    // $("input[type = email]").css("backgroundColor","blue");
    // 开始
    // $("input[type^= pass]").css("backgroundColor","pink");
    // 结尾
    $("input[type$= word]").css("backgroundColor","green");
    //包含
    $("input[type*= a]").css("backgroundColor","blue");

</script>

6.jquery的基本选择器

   这个页面和上面属性选择器使用的是同一个页面
    /*
        :text   :password  :radio  :checkbox  :hidden  :file  :submit
        :input  匹配所有 input, textarea, select 和 button 元素
        :selected  :checked  :enabled  :disabled
        :hidden :visible  :not
        注意$(“input”)和$(“:input”)的区别
     */
    // $(":text").css("backgroundColor","red");
    // $("input:text").css("backgroundColor","pink");
    // $(":password").css("backgroundColor","pink");
    // $(":file").css("backgroundColor","green");
    // $(":submit").css("backgroundColor","blue");

    let aaa = $("input[type=checkbox]:checked");
    console.log(aaa.get(0).value);

    let a1 = $("input");  // 拿到  input的所有的标签   14 个
    console.log(a1.length)
    let a2 = $(":input");  // 表单中的所有的元素 (包含 select 和   textarea 标签 )
    console.log(a2.length)