jquery选择器总结

什么是jquery?

Jquery就是对原生的js代码的封装。所以在使用jquery的时候需要导入jquery的文件。

使用jquery的好处？

使用更少的代码做更多的事情。

image.png

编写第一个jquery程序：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门程序</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>

<div>第一个jquery程序</div>

<input type="button" value="点击" onclick="f1()"/>

<script type="text/javascript">
    function f1() {
//            document.getElementsByTagName("div")[0].style = "color:red";
        jQuery("div").css("color", "red");
    }
</script>
</body>
</html>

Jquery的选择器: $和jQuery一样

使用jquery选择器的主要目的就是为了能够快速找到页面上的各个元素。
原生的js中怎么做？

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()

在jquery中就要方便的多：使用jquery选择器，跟css选择器非常的类似。

1.基本选择器：

元素选择器: $(“标签名”)
id选择器: $(“#id属性值”)
类选择器: $(“.class属性值”)
通配符选择器:$(“*”) 选择页面中所有的元素
选择器组:$(“selector1,selector2...”) 根据多个选择器来选择多个元素

image.png

<input type="text" name="username" id="user" class="gou" value="哈哈"/>
<input type="text" name="email" id="mail" class="gou" value="123@163.com">
<input type="text" name="phone" id="call" class="ph" value="12300000000">

<input type="button" value="点击" onclick="f1()"/>

<script type="text/javascript">
    function f1() {
        //$("标签名")
//        $("input").css("background-color", "green");
        // $(".class属性值")
//        $(".gou").css("width", "500px");
        //$("#id属性值")
//        $("#user").css("color", "yellow");

        //$("*")
//        $("*").css("background-color", "red");
//        $("*").css("margin", "0");

        //使用选择器组获取前三个input标签, 会将每一个选择器所定位的元素找到
        // $("selector1, selector2, ...")
        $("#user, #mail, #call").css("background-color", "red");
    }

2.层级选择器: $(div span)

$(s1 s2): 选择s1下所有的s2 忽略层级关系

    <div>
        <span>狗娃被选择</span>
        <p><span>铁蛋被选择</span></p>
    </div>
    <div>狗剩</div>
    <span>翠花</span>

$(s1 > s2):选择s1下所有的s2 不忽略层级关系

    <div>
        <span>狗娃被选择</span>
        <p><span>铁蛋</span></p>
    </div>
    <div>狗剩</div>
    <span>翠花</span>

$(s1 + s2):选择s1后第一个s2兄弟节点

    <div>
        <span>狗娃</span>
        <p><span>铁蛋</span></p>
    </div>
    <p>狗蛋</p>
    <span>二狗子</span>
    <div>狗剩</div>
    <span>翠花被选择</span>
    <span>三狗子</span>

$(s1 ~ s2):选择s1后面所有的s2兄弟节点

    <div>
        <span>狗娃</span>
        <p><span>铁蛋</span></p>
    </div>
    <p>狗蛋</p>
    <span>二狗子被选择</span>
    <div>狗剩</div>
    <span>翠花被选择</span>
    <span>三狗子被选择</span>

3.并且选择器

image.png

4.内容包含选择器

<body>
    <div>我是<p>中国</p>人</div>
    <div>哈哈<span id="person">你是外国人</span></div>
    <input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
    function f1() {
        // 选择文本内容包含中国的div标签
//        $("div:contains(中国)").css("color", "red");

        // 选择 哈哈你是外国人
//        $("div:has(#person)").css("color", "red");

    }

</script>
</body>

5.属性选择器

    <input type="text" id="id1" class="class1" name="user" value="Java">
    <input type="text" id="id2" class="class2" name="pass" value="123">
    <input type="text" id="id3" class="class3" name="email" value="1@163.com">
    <input type="text" id="id4" class="class4" name="phone" value="15011111777">
    <input type="text" id="id5" class="class1" name="username" value="Java"/>

    <input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
    function f1() {
        // $("[属性名]")  查询所有包含该属性名的元素
//        $("[type]").css("color", "red");

        // $("[属性名=属性值]")  查询某个属性名=属性值的元素
//        $("[name=user]").css("background-color", "yellow");

        // $("[属性名^=value]") 属性值以value开头
        // $("[属性名$=value]") 属性值以value结尾
//        $("[name^=use]").css("width", "500px");
//        $("[value$=va]").css("font-size", "2em");

        // $("[属性名!=value]") 属性名不等于value值
        // 如果没有该属性名, 那么默认也会选中
//        $("[class!=class2]").css("background-color", "red");

//        $("[class][class!=class2]").css("background-color", "red");

        // $("[属性名*=value]") 属性值包含value
        $("[value*=5]").css("background-color", "red")
        
    }

6.关于复选框、单选框、下拉框的操作

获取被选中的复选框 : checked

image.png

<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="PHP">PHP
<input type="checkbox" name="hobby" value="C">C
<input type="checkbox" name="hobby" value="C++">C++
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
    function f1() {
//        alert($("input:checked"));

        for (var i = 0; i < $("input:checked").length; i++) {
            // 输出每一个被选中的框的value值
            alert($("input:checked:eq(" + i + ")").val());
        }

    }

获取被选中的单选框 :checked

image.png

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
    function f1() {
        // 获取被选中的单选框的值
        alert($("input:checked").val())
    }

</script>

获取下拉框的值 : selected

image.png

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>杭州</option>
</select>
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
    function f1() {
        // 获取下拉框的值

        alert($("option:selected").html());
    }

</script>

完整代码地址

https://github.com/menglanyingfei/front-end-Learning/tree/master/jquery/jquery_day01

jquery选择器总结

什么是jquery?

使用jquery的好处？

Jquery的选择器: $和jQuery一样

1.基本选择器：

2.层级选择器: $(div span)

3.并且选择器

4.内容包含选择器

5.属性选择器

6.关于复选框、单选框、下拉框的操作

完整代码地址

推荐阅读更多精彩内容