首页 问答社区 web技术 正文

jQuery选择器

2021-02-06 16:43:13 174 0
tangjin

基本选择器

要想操作dom的话需要获取dom对象，jQuery中使用选择器来获取dom对象，常用的基本选择器有

  • id选择器:$(“#id”)
  • class选择器:$(“.class”)
  • 元素选择器:$(“div”)

如下示例使用三种选择器分别获取div中的文本内容然后再修改文本内容。

jQuery选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">id选择器</div>
    <div class="big">class选择器</div>
    <div>元素选择器</div>


</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {
        //获取id是div1的dom对象，然后再获取里面的文本内容
        console.log($("#div1").text());
        //修改id是div1的dom对象的文本内容
        $("#div1").text("div1");

        //获取class是big的dom对象然后再获取里面的文本内容
        console.log($(".big").text());

        //获取所有div里面的文本内容
        console.log($("div").text());
    });


</script>
</html>

使用jquery实现点击按钮后修改div的背景色：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1" class="big">id选择器</div>
    <div class="big">class选择器</div>
    <div>元素选择器</div>

    <button id="btn1">修改id选择器的背景色</button>
    <button id="btn2">修改全部背景色</button>
    <button id="btn3">修改id是div1且class是big的背景色</button>

</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {

        $("#btn1").click(function () {
            $("#div1").css("background-color","orange");
        });


        $("#btn2").click(function () {
            //修改全部的背景色，*表示通配符
            $("*").css("background-color","pink");
        });

        $("#btn3").click(function () {
            //修改id是div1且class是big的背景色
            $("#div1.big").css("background-color","green");
        });
    });


</script>
</html>

层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子。。。) parent > child :在给定的父元素下匹配所有的子元素(儿子) prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌) prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div class="small">123
        </div>
        <div class="small">456</div>
    </div>
    <div id="div2">
        <div class="small">789</div>
    </div>
    <div id="div3">
        <div class="small">101112</div>
    </div>

    <button id="btn1">修改所有body下的div的背景色</button>
    <button id="btn2">修改body中儿子的背景色</button>
    <button id="btn3">修改id是div2的下一个div的背景色</button>
    <button id="btn4">修改id是div1的所有兄弟元素</button>
    <button id="btn5">修改id是div1的儿子的背景色</button>

</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {

        $("#btn1").click(function () {
            $("body div").css("background-color","orange");
        });


        $("#btn2").click(function () {

            $("body>div").css("background-color","pink");
        });

        $("#btn3").click(function () {

            $("#div2+div").css("background-color","green");
        });

        $("#btn4").click(function () {

            $("#div1~div").css("background-color","blue");
        });

        $("#btn5").click(function () {

            $("#div1>div").css("background-color","red");
        });
    });


</script>
</html>

基本过滤选择器

常用的过滤选择器

  • :first 获取第一个元素
  • :last 获取最后一个元素
  • :not)获取除开给定选择器的其他元素
  • :even获取索引为偶数的元素，索引从0开始
  • :odd获取索引为奇数的元素，索引从0开始
  • :eq获取制定索引元素，从0开始
  • :gt获取大于给定索引的元素，从0开始
  • :lt获取小于给定索引的元素，从0开始
  • :header获取标题类型元素
  • :animated获取正在执行动画效果的元素

比如要选择第一个div对象可以使用下面写法：

$('div').first() 等价于  $("div:first")

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div class="small">123
        </div>
        <div class="small">456</div>
    </div>
    <div id="div2">
        <div class="small">789</div>
    </div>
    <div id="div3">
        <div class="small">101112</div>
        <div class="small">131415</div>
    </div>

    <button id="btn1">修改第一个div的背景色</button>
    <button id="btn2">修改最后一个div的背景色</button>
    <button id="btn3">修改奇数的div的背景色</button>
    <button id="btn4">修改偶数的div的背景色</button>

</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {

        $("#btn1").click(function () {
            $("div:first").css("background-color","orange");
        });


        $("#btn2").click(function () {

            $("div:last").css("background-color","pink");
        });

        $("#btn3").click(function () {

            $("div:odd").css("background-color","green");
        });

        $("#btn4").click(function () {

            $("div:even").css("background-color","blue");
        });

    });


</script>
</html>

属性选择器

可以根据给定的属性查找相应的dom对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div class="small">123
        </div>
        <div class="small">456</div>
    </div>
    <div>
        <div class="small">789</div>
    </div>
    <div>
        <div class="small">101112</div>
        <div class="small">131415</div>
    </div>

    <button id="btn1">修改有id的div的背景色</button>
    <button id="btn2">修改id是div1的div的背景色</button>

</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {

        $("#btn1").click(function () {
            $("div[id]").css("background-color","orange");
        });


        $("#btn2").click(function () {

            $("div[id='div1']").css("background-color","pink");
        });



    });


</script>
</html>

表单选择器

表单选择器可以方便开发者获取某个类型的表单元素 :input

:input选择器选择input、textarea、select和button元素　　

:text

:text选择器选择所有的单行文本框　

:password

:password选择器选择所有的密码框

:radio

:radio选择器选择所有的单选框

:checkbox

:checkbox选择器选择所有的多选框

:submit

:submit选择器选择所有的提交按钮

:image

:image选择器选择所有的图像按钮

:reset

:reset选择器选择所有的重置按钮

:button

:button选择器选择所有的按钮

:file

:file选择器选择所有的文件上传域

:enabled

:enabled选择器选择可用的表单元素

:disabled

:disabled选择器选择不可用的表单元素

:checked

:checked选择器选择被选中的元素(单选框、复选框)

:selected

:selected选择器选择被选中的元素(下拉列表)

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" /><br />
    <input type="checkbox" /><br />
    <input type="radio" /><br />
    <input type="image" /><br />
    <input type="file" /><br />
    <input type="submit" />
    <input type="reset" /><br />
    <input type="password" /><br />
    <input type="button" /><br />
    <select><option/></select><br />
    <textarea></textarea><br />
    <button></button>
</form>

<br/>
<button id="btn1">选择所有input元素</button>
<button id="btn2">选择文本框</button>
<button id="btn3">隐藏checkbox</button>

</body>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {

        $("#btn1").click(function(){
            $(":input").css("background-color","pink");
        });
        $("#btn2").click(function(){
            $(":text").css("background-color","orange");

        });
        $("#btn3").click(function(){
            $(":checkbox").hide();

        });


    });


</script>
</html>

收藏
分享
海报
0 条评论
174
上一篇：servlet3.0新特性之文件上传 下一篇：jQuery操作节点

相关文章

本站已关闭游客评论，请登录或者注册后再评论吧~

忘记密码？

图形验证码