JQuery大法--jQuery选择器

最新推荐文章于 2022-10-03 13:23:26 发布

宇宙一码平川

最新推荐文章于 2022-10-03 13:23:26 发布

阅读量175

点赞数

分类专栏：前端大法文章标签：选择器 jQuery

本文链接：https://blog.csdn.net/qq_36789311/article/details/99566690

版权

前端大法专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、jQuery介绍

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

1、下载jQuery

在官网进行下载

2、配置jQuery

将jquery.js导入到HTML文件的script中：

<script src="jquery.js"></script>

二、jQuery选择器

工厂函数：

（1）在参数中使用标记名

$("div"):用于获取文档中全部的<div>

（2）在参数中使用ID

$("#username"):用于获取文档中ID属性值为username的一个属性

（3）在参数中使用CSS类名

$(".btn"):用于获取文档中使用CSS类名位btn的所有元素

1、基本选择器

(1)ID选择器：利用DOM元素的id属性来筛选匹配的元素，并以jQuery包装集的形式返回给对象。

形式：$("#id")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
</head>
<body>
<input type="text" id="test_input" name="test">
<input type="button" value="输入的值">
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
        $("input[type='button']").click(function () {
           var inputValue = $("#test_input").val(); //为按钮绑定单击事件
           alert(inputValue);   //获取文本输入框的值
        });
    })
</script>
</body>
</html>

运行结果：

（2）元素选择器：根据元素的标记名选择

形式：$("element");

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <style>
        img{
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
<div><img src="chengxiao_01.jpg">程潇</div>
<div><img src="chengxiao_02.jpg">程潇</div>
<input type="button" value="确认">
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
        $("input[type='button']").click(function () {
            //获取第一个元素,eq()按顺序获取div元素
            $("div").eq(0).html("<img src='chengxiao_01.jpg'>超级可爱");
            //获取第二个元素,get()按顺序获取div元素
            $("div").get(1).innerHTML="<img src='chengxiao_02.jpg'>真的可爱";
        });
    });
</script>
</body>
</html>

运行结果：

按钮之前：

按钮之后：

eq()和get()是按照顺序获取元素,都是从0开始计数。

html()方法是jQuery的方法,innerHTML方法是DOM对象的方法。

$(document).ready()方法，当页面元素载入就绪时就会自动站执行程序，自动为按钮单击事件。

(3)类名选择器：以元素具有的CSS类名称查找匹配的元素

形式：$(".class")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类名选择器</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="myClass">程潇</div>
    <div >程潇哟</div>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () { //选取DOM元素
            $(".myClass").css("background-color","yellow"); //设置背景颜色
            $(".myClass").css("color","blue");  //设置字体颜色
        });
    </script>
</body>
</html>

运行结果：

类名选择器可能获取一组jQuery包装集，因为多个元素可以拥有同一个CSS样式

（4）符合选择器：并不是匹配同时满足几个选择器条件的元素，而是将每个选择器匹配的元素合并后一起返回，只要满足其中任何一个筛选条件即可。

形式：$("selector1,selector2,selectorN") #N表示多个选择器

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        .default{
            background-color: yellow;
            color: red;
            width: 100px;
        }
        .change{
            background-color:greenyellow;
            color: red;
        }
    </style>
</head>
<body>
    <p class="default">p元素</p>
    <div class="default">div元素</div>
    <span class="default" id="span">span元素</span>
    <input type="button" value="为div和span元素进行换肤">
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("input[type=button]").click(function () {
             $("div,#span").addClass("change"); //添加所使用的的CSS类
           });
        });
    </script>
</body>
</html>

运行结果：

2、层级选择器

层级选择器：根据页面DOM元素之间的父子关系作为匹配的筛选条件。

（1）ancestor descendan选择器(祖--孙选择器:用于在给定的祖先元素下匹配所有的后代元素)

形式：$("ancestor descendent");

参数说明：

①ancestor:任何有效的选择器

②descendant:用以2匹配元素的选择器，并且它是ancestor所指定元素的后代元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>祖孙选择器</title>
    <style type="text/css">
        #bottom{
            background-image:url(chengxiao_01.jpg);
            background-size: cover;
            width: 600px;
            height: 300px;
            clear: both;
            text-align: center;
            padding-top: 10px;
            font-size: 10pt;
        }
        .copyright{
            color: yellow;
            list-style: none;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div id="bottom">
        <ul>
            <li>程潇小可爱</li>
            <li>程潇大可爱</li>
        </ul>
    </div>
    <ul>
        <li>程潇小可爱</li>
        <li>程潇大可爱</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("div ul").addClass("copyright");
        });
    </script>
</body>
</html>

运行结果：

（2）parent>child选择器（父子选择器--用于给定的父元素下匹配所有的直接的子元素）

参数说明：

①parent元素：任何有效的选择器

②child元素: 用以匹配元素的选择器，它是匹配元素的选择器，并且是parent元素的直接子元素。

形式：$("parent>child")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子选择器</title>
</head>
<body>
<form name="form">
    <input type="text" name="name">
    <button onclick="showInfo()">测试</button>
</form>
<script src="jquery.js"></script>
<script>
    function showInfo() {
        alert($("form>input").val());
    }
</script>
</body>
</html>

运行结果：

（3）prev+next选择器:用于匹配所有紧接在prev元素后的next元素，prev和next是同级元素。

形式：$("prev+next")

参数说明：①prev:任何有效的选择器 ②next:一个有效选择器后面紧挨着的有效选择器。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后元素</title>
    <style>
        .background{
            background: yellow;
        }
        body{
            font-size: 12px;
        }
    </style>
</head>
<body>
<div>
    <label>第一个元素label</label>
    <p>第一个p</p>
    <fieldset>
        <label>第二个label</label>
        <p>第二个p</p>
    </fieldset>
</div>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("label+p").addClass("background");
        });
    </script>
</body>
</html>

运行结果：

（4）prev~siblings选择器：用于匹配prev元素之后的所有siblings元素,prev和siblings是相同的同辈元素

形式：$("prev~siblings");

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同辈元素</title>
    <style>
        .background{
            background: yellow;
        }
        body{
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>
    <p>第一个p</p>
    <p>第二个p</p>
</div>
<p>div外面的p元素</p>
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
        $("div~p").addClass("background");
    });
</script>
</body>
</html>

运行结果：

3、过滤选择器

（1）简单过滤器：以冒号开头，用于实现简单过滤效果的过滤器

形式:$("element:change")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单过滤器</title>
    <style>
        td{
            font-size: 12px;
            padding: 3px;
        }
        .th{
            background-color: red;
            font-weight: bold;
            text-align: center;
        }
        .even{
            background-color: blue;
        }
        .odd{
            background-color: orange;
        }

    </style>
</head>
<body>
    <table width="98%" border="0" align="center" cellpadding="1" bgcolor="yellow">
        <tr>
            <td width="11%" height="27px">学号</td>
            <td width="14%">姓名</td>
            <td width="12%">成绩</td>
            <td width="33%">家庭住址</td>
            <td width="30%">性别</td>
        </tr>
        <tr>
            <td height="27px">001</td>
            <td>李晓凡</td>
            <td>99</td>
            <td>山东日照</td>
            <td>男</td>
        </tr>
         <tr>
            <td height="27px">002</td>
            <td>崔月红</td>
            <td>98</td>
            <td>四川南充</td>
            <td>女</td>
        </tr>
         <tr>
            <td height="27px">003</td>
            <td>蔡春玲</td>
            <td>97</td>
            <td>四川广元</td>
            <td>女</td>
        </tr>
         <tr>
            <td height="27px">004</td>
            <td>柳博文</td>
            <td>96</td>
            <td>四川广安</td>
            <td>男</td>
        </tr>
    </table>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("tr:even").addClass("even");
           $("tr:odd").addClass("odd");
           $("tr:first").removeClass("even");
           $("tr:last").removeClass("odd");
        });
    </script>
</body>
</html>

运行结果：

（2）内容过滤器：通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。

内容过滤器包含：①:contains(text) ②:empty ③:has(selector) ④:parent

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤器</title>
</head>
<body>
<table width="98%" border="0" align="center" cellpadding="1" bgcolor="yellow">
        <tr>
            <td width="11%" height="27px">学号</td>
            <td width="14%">姓名</td>
            <td width="12%">成绩</td>
            <td width="33%">家庭住址</td>
            <td width="30%">性别</td>
        </tr>
        <tr>
            <td height="27px">001</td>
            <td>李晓凡</td>
            <td></td>
            <td>山东日照</td>
            <td>男</td>
        </tr>
         <tr>
            <td height="27px">002</td>
            <td>崔月红</td>
            <td>98</td>
            <td>四川南充</td>
            <td>女</td>
        </tr>
         <tr>
            <td height="27px">003</td>
            <td>蔡春玲</td>
            <td></td>
            <td>四川广安</td>
            <td>女</td>
        </tr>
         <tr>
            <td height="27px">004</td>
            <td>柳博文</td>
            <td>96</td>
            <td>四川广安</td>
            <td>男</td>
        </tr>
    </table>
<script src="jquery.js"></script>
<script>
    $("td:parent").ready(function () {
       $("td:parent").css("background-color","yellow");
       $("td:empty").html("暂无内容");
       $("td:contains('四川广安')").css("color","red");
    });
</script>
</body>

</html>

运行结果：

（3）可见性过滤器:利用元素的可见状态匹配元素。

visible过滤器：匹配所有可见元素

hidden过滤器：匹配所有不可见元素(display:none; input yupe:hidden;)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性过滤器</title>
</head>
<body>
    <input type="text" value="显示的input元素">
    <input type="text" value="隐藏的inpue元素" style="display: none">
    <input type="hidden" value="隐藏域">
    <script src="jquery.js"></script>
    <script>
         $(document).ready(function () {
           alert($("input:visible").val() + "\n\r" + $("input:hidden:eq(0)").val() +"\n\r" + $("input:hidden:eq(1)").val());
        });
    </script>
</body>
</html>

运行结果：

（4）表单对象的属性过滤器：通过表单元素的状态属性匹配元素，包括：

①checked过滤器 (匹配所有选中的被选中元素)

②：disabled过滤器（匹配所有不可用元素）

③:enabled过滤器（匹配所有可用元素）

④selected过滤器（匹配所有选中的option元素）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
    <form>
        <a>爱好</a>
        篮球：<input type="checkbox" checked value="篮球">
        足球：<input type="checkbox" checked value="足球">
        网球: <input type="checkbox" value="网球"><br>
        国籍：<input type="button" value="中国" disabled><br>
        城市：<select onchange="selectVal()">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
              </select>
    </form>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("input:checked").css("background-color","yellow").val();
           $("input:disabled").val("我是不可用的");
        });
        function selectVal() {
            alert($("select option:selected").val());
        }
    </script>
</body>
</html>

运行结果：

4、属性选择器：通过元素的属性作为过滤条件进行筛选对象

5、表单选择器：匹配经常在表单中出现的元素，但是匹配的元素不一定在表单中。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
</head>
<body>
<form>
    复写框：<input type="checkbox">

</form>
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
       $(":checkbox").attr("checked","checked");
    });
</script>
</body>
</html>

运行结果

本期学习到此结束，欢迎各位关注指教。

宇宙一码平川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery大法--jQuery选择器

一、jQuery介绍jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。1、下载jQuery在官网进行下载2、配置jQuery将jquery.js导入到HTML文件的script中：<script src="jquery.js"></script>二、j...
复制链接

扫一扫