欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

jQuery中的选择器是什么？jquery选择器的介绍

程序员文章站 2022-05-30 18:55:30
...
本篇文章给大家带来的内容是关于jQuery中的选择器是什么？jquery选择器的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

选择器

选择器是什么

jQuery的选择器是用于定位HTML页面中的元素，其用法最初设计是源于CSS的选择其用法，但是jQuery的选择器进行了扩展，远比CSS的选择器更加强大。

基本选择器

基本选择去具有以下几种：
1.ID选择器
2.元素选择器
3.类选择器
4.通配符选择器
5.组合选择器
示例代码如下：

<body>
<div id="d1">卧龙学苑</div>
<div id="d2" class="cls">前端开发</div>
<script>
    console.log($('#d1'));
    console.log($('div'));
    console.log($('.cls'));
    // 通配符选择器 - 匹配所有
    console.log($('*'));
    // 组合选择器 - 多个选择器之间使用逗号分隔(并集)
    console.log($('#d1, .cls'));
    // 组合选择器 - 多个选择器之间没有任何分隔(交集)
    console.log($('#d2.cls'));

</script>
</body>

层级选择器

jQuery的层级选择器具有以下几种：
1.后代选择器 根据给定元素的祖先元素下匹配所有的后代元素
2.子选择器 根据给定的父元素下匹配所有的子元素
3.相邻兄弟选择器 根据给定的目标元素匹配下一个相邻兄弟元素
4.普通兄弟选择器 根据给定的目标元素匹配后面所有兄弟元素
由于jQuery对象是类数组对象，及时匹配的元素只有一个，返回的结果依旧是类数组对象。
示例代码如下：

<body>
<div id="parent">
    <div id="child">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="child2">
        <div id="d3"></div>
    </div>
</div>
<script>
    console.log($('#parent div'));
    //父子选择器
    console.log($('#parent>div'));
    // 指定元素的下一个相邻兄弟元素
    console.log($('#d1+div'));
    // 指定元素的后面所有的兄弟元素
    console.log($('#d1~div'));
    // siblings()方法 - 获取指定元素所有的兄弟元素(前面+后面)
    console.log($('#d1').siblings('div'));

</script>
</body>

基本过滤选择器

jQuery的基本过滤选择器具有以下几种：
1.:first过滤选择器 获取第一个元素
2.：last过滤选择器 获取最后一个元素
3.：even过滤选择器 匹配所有索引值为偶数的元素，从0开始
4.：odd过滤选择器 匹配所有索引值为奇数的元素，从0开始
5.:eq（）过滤选择器 匹配一个给定索引值的元素
6.:gt（）过滤选择器 匹配所有大于给定索引值的元素
7.:lt（）过滤选择器 匹配所有小于给定索引值的元素
8.:not（）过滤选择器 去除所有与给定选择器匹配的元素
9.:header过滤选择器 匹配如h1 h2 h3 h4 h5 h6之类的标题元素
10.:animated过滤选择器 匹配正在执行动画效果的元素（由jQuery实现的动画）
示例代码如下：

<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<div>卧龙学苑</div>
<div id="d2">
    <div id="child"></div>
</div>
<div></div>
<div></div>
<div>前端开发</div>

<div id="animated"></div>

<script>
    // 在指定范围匹配的元素中进行筛选
    console.log($('div:first'));
    console.log($('div:last'));
    // 索引值为偶数时 -> 奇数元素；索引值为奇数时 -> 偶数元素
    console.log($('div:even'));
    console.log($('div:odd'));
    // :eq(index) -> index表示索引值
    console.log($('div:eq(0)'));// 等于
    console.log($('div:gt(2)'));// 大于
    console.log($('div:lt(2)'));// 小于
    // :header -> 匹配h1~h6元素
    console.log($(':header'));

    function animated(){
        $('#animated').slideToggle(animated);
    }
    animated();
    // :animated -> 只能匹配由jQuery实现的动画
    console.log($(':animated'));

    console.log($('div:not("#child")'));

</script>
</body>

内容过滤选择器

jQuery中提供了以下几种内容过滤选择器
1.：contains（）过滤选择器 匹配包含给定位版本的元素
2.：empty过滤选择器 匹配不包含子元素或者文本的空元素
3.：parent过滤选择器 匹配有子元素或者文本的元素
4.：has（）过滤选择去 匹配含有选择器所匹配的元素的元素
示例代码如下：

<body>
<div>这是div元素</div>
<div></div>
<div>
    <div id="child"></div>
</div>
<script>
    console.log($('div:contains("di")'));
    console.log($('div:empty'));
    console.log($('div:parent'));
    // :has() - 表示包含匹配指定选择器元素的父级元素
    console.log($('div:has("#child")')[0]);

</script>
</body>

可见性过滤选择器

1.：hidden过滤选择器 匹配所有不可见元素，或者type为hidde的元素
2.：visible过滤器选择器 匹配所有可见的元素

<body>
<div id="d1">卧龙学苑</div>
<div id="d2">前端开发</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
    /*
        :hidden选择器
        * 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
        * 还能匹配HTML页面中不做任何显示效果的元素
        * 用法 - 尽量确定元素类型或指定范围
     */
    console.log($(':hidden'));
    /*
        :visible选择器
        * 匹配CSS样式属性visibility设置为hidden的隐藏元素
          * 当visibility设置为hidden时的元素，依旧占有页面空间
        * 还能匹配HTML页面中<html>和<body>元素
     */
    console.log($(':visible'));

</script>
</body>

属性过滤选择器

1.[attr]过滤选择器 匹配包含给定属性的元素
2.[attr=value]过滤选择器 匹配给定的属性是某个特定值的元素
3.[attr！=value]过滤选择器 匹配不含有特定的属性，或者属性不等于特定值的元素
4.[attr^=value]过滤选择器 匹配给定的属性是以某些值开始的元素
5.[attr$=value]过滤选择器 匹配给定的属性是以某些值结尾的元素
6.[attr*=value]过滤选择器 匹配给定的属性是包含某些值的元素
7.组合过滤选择器 匹配元素需要同时满足多个属性过滤器

<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
    console.log($('div[name]'));
    console.log($('div[class=mydiv]'));
    // [attr!=value]选择器 - 包含没有attr属性的元素
    console.log($('div[class!=mydiv]'));

    console.log($('div[class^=my]'));
    // 属性过滤选择器组合用法 -> 交集
    console.log($('div[name=d1][class^=my]'));

</script>
</body>

子元素过滤选择器

1.：nth-child（）过滤选择器 匹配其父元素下的第N个子或奇偶元素
2.：first-child过滤选择器 匹配第一个子元素
3.：last-child过滤选择器 匹配最后一个子元素
4.：only-child过滤选择器 如果某个元素是父元素中唯一的子元素，就会被匹配

<body>
<div id="parent">
    <div id="d1">这是id为d1的div元素</div>
    <div id="d2">这是id为d2的div元素</div>
    <div id="d3">这是id为d3的div元素
        <div id="child"></div>
    </div>
</div>
<script>
    // :first-child - 当前元素是否为第一个子元素
    console.log($('div:first-child'));
    console.log($('div:last-child'));
    /*
        :nth-child(index)
        * 作用 - 匹配当前元素作为第index个子元素
        * 注意 - index是从 1 开始，表示第几个
     */
    console.log($('div:nth-child(1)'));

    console.log($('div:only-child'));

</script>
</body>

表单对象属性过滤器

1.：enabled过滤选择器 匹配所有可用元素
2.：disabled过滤选择器 匹配所有不可用元素
3.：checked过滤选择器 匹配所有选中的被选中元素
4.：selected过滤选择器 匹配所有选中的<option>元素

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>北京</option>
        <option selected>南京</option>
        <option>天津</option>
    </select>
</form>
<script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));

</script>
</body>

表单选择器

jQuery中的选择器是什么？jquery选择器的介绍

更多有关于jquery选择器的知识可以参考jquery手册或者去看一下jquery视频教程。

相关推荐：

jquery选择器介绍

jquery选择器(常用选择器说明)_jquery

以上就是jQuery中的选择器是什么？jquery选择器的介绍的详细内容，更多请关注其它相关文章！

相关标签： html javascript

上一篇： 电视剧《扶摇》热播 创业者如何才能扶摇直上九万里？

下一篇： php关于对cookie与session的理解

推荐阅读