梦蓝樱飞(一点一滴, 记录个人成长之路)

时光荏苒,祝愿勿忘曾经的初心 && 活在当下,一定做好现在的事情

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.基本选择器:

  1. 元素选择器: $(“标签名”)
  2. id选择器: $(“#id属性值”)
  3. 类选择器: $(“.class属性值”)
  4. 通配符选择器:$(“*”) 选择页面中所有的元素
  5. 选择器组:$(“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

阅读更多
版权声明:本文为 梦蓝樱飞 原创文章,可以随意转载,但真诚希望在明确位置注明原文超链接的出处!!! 非常感谢! https://blog.csdn.net/menglanyingfei/article/details/79292633
文章标签: JS jquery 选择器
个人分类: jquery
上一篇SSM框架系列学习总结0之IDEA+Maven+SSM整合
下一篇Java框架基础 静态代理和动态代理
想对作者说点什么? 我来说一句

Jquery选择器说明文档.doc

2011年08月02日 109KB 下载

Jquery选择器总结

2013年08月31日 57KB 下载

Jquery选择器大全

2011年02月11日 28KB 下载

JQuery选择器总结

2014年01月24日 106KB 下载

jQuery选择器-过滤器总结

2011年12月01日 3KB 下载

没有更多推荐了,返回首页

关闭
关闭