Jquery选择器

最新推荐文章于 2024-04-17 09:18:10 发布

云中的星星

最新推荐文章于 2024-04-17 09:18:10 发布

阅读量612

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_61902288/article/details/126292694

版权

Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

基本选择器的使用

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的方法，让我们更加方便的获取到页面中的元素，jQuery选择器返回的是jQuery对象

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

层次选择器

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

筛选选择器

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }
    </style>
<body>
    <button id="btn1">所有含class的标签</button>
    <button id="btn2">所有含class是box1的标签</button>
    <button id="btn3">所有含class不是box1的标签</button>
    <button id="btn4">所有含class是以b开始的标签</button>
    <button id="btn5">所有含class包含o的标签</button>
    <hr>
    <div>div标签</div>
    <div class="box1">box1</div>
    <div class="box1">box1</div>
    <div class="bex2">bex2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div[class]").css("background-color","red")
            })
            $("#btn2").click(function(){
                $("div[class='box1']").css("background-color","grenn")
            })
            $("#btn3").click(function(){
                $("div[class!='box1']").css("background-color","yellow")
            })
            $("#btn4").click(function(){
                $("div[class^='b']").css("background-color","blue")
            })
            $("#btn5").click(function(){
                $("div[class='o']").css("background-color","blue")
            })
        })
    </script>
</body>