jQuery 的常用选择器，筛选器

最新推荐文章于 2022-08-10 10:08:43 发布

zeuskk

最新推荐文章于 2022-08-10 10:08:43 发布

阅读量505

点赞数 1

分类专栏：大前端文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/god953/article/details/120029170

版权

大前端专栏收录该内容

47 篇文章 1 订阅

订阅专栏

jQuery

jQuery 的简介

1. 插件：一个功能高度分装
1. 类库：工具库，提供操作工具，不提供具体功能 jQuery 是一个工具集合
1. 框架：项目每一个组件都会提供出来。我们只需要引入框架语法，即可实现功能
1. DOM 操作多 jQuery
1. 数据渲染不多 jQuery
1. 数据渲染不多 View React
优点：
- 1. 无所不能的选择器
- 1. 无所不在的链式编程
- 1. 无人能及的隐式资迭代
引入jquery以后
=> 会向全局暴露两个变量名
-> 1. jQuery
-> 2. $

jQuery 的构成

1. jquery 的选择器
- 选择器
  => 对元素的获取
  => 基本选择器
  => 特殊选择器
- 筛选器
  => 对已经获取到的元素集合进行二次筛选
- 选择器(基本选择器)
  - 语法： $(选择器)
  - 返回值：满足条件的所有元素(id)选择器除外
    => 放在一个数组里返回
    => 都是一个集合的形式
    => 我们管这个集合叫做jquery元素集合
  - 你的css如何捕获标签，这里就可以怎么填参数
- 选择器(特殊选择器)
  - 语法 : $(选择器)
    => 对你已经存在的选择器进行修饰
  - 1. :first 拿到所有div的第一个
  - 1. :last 最后一个
  - 1. :eq(数字) 按照索引排列的第几个从 0 开始
  - 1. :odd 按照索引排列的奇数个
  - 1. :even 按照索引排列的偶数个
jquery 的选择器详解
- 1. #id

    $('#id 名');

- 1. element

    $("元素名称");

- 1. .class

    $('.类名');

- 1. selector1, selector2, …

    // 有一个特点，就是按照页面结构从上到下的选择元素，跟$里面的元素顺序无关
    $('元素1, 元素2, ...');

- 1. ancestor descendant 后代选择器

    <div class="div">
        <div class='div1'></div>
        <div class='div1'></div>
    </div>
    $('后代选择器');
    $('div div1');
    // 选中div下的所有 类名为div1的元素

- 1. parent>child

    $('div>div1');

- 1. prev + next
    一个有效选择器并且紧接着第一个选择器

    <form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
    </form>
    <input name="none" />
    $("label + input")
    // [ <input name="name" />, <input name="newsletter" /> ]

- 1. prev~siblings
    匹配 prev 元素之后的所有 siblings 元素

    $("form ~ input")
    // [ <input name="none" /> ]

- 1. :first 获取第一个元素
- 1. :not 去除所有与给定选择器匹配的元素
- 1. :even 获取偶数项从0开始计数
- 1. :odd 获取奇数项从0开始计数
- 1. :eq(index) 获取下标为index的元素
- 1. :gt(index) 获取所有大于给定索引值的元素
- 1. :lang(language) 获取指定语言的所有元素

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: #ccc; }
    h3 { margin: .25em 0; }
    div { line-height: 1.5em}
    .usa { background-color: #f00; color: #fff; }
    .usa .usa { background-color: #fff; color: #000; }
    .usa .usa .usa { background-color: #00f; color: #fff; }
    
    .spain { background-color: #f00; color: #ff0; }
    .spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }
    .spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
    <h3>USA</h3>
    <div lang="en-us">red
    <div>white
        <div>and blue</div>
    </div>
    </div>
    <h3>España</h3>
    <div lang="es-es">rojo
    <div>amarillo
        <div>y rojo</div>
    </div>
    </div>
    
    <script>
    $( "div:lang(en-us)" ).addClass( "usa" );
    $( "div:lang(es-es)" ).addClass( "spain" );
    </script>
 
</body>
</html>

- 1. :last 获取匹配的最后个元素

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    $('li:last')
    //[ <li>list item 5</li> ]

- 1. :lt(index) 匹配所有小于给定索引值的元素

    <table>
    <tr><td>Header 1</td></tr>
    <tr><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
    </table>
    $('tr:lt(2)');
    // [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

- 1. :header 匹配h1, h2, h3 之类的标题元素
- 1. :animated 匹配所有正在执行动画效果的元素
- 1. :focus 匹配当前获得焦点的元素
- 1. :root 匹配该文档的根元素永远是 html 元素
- 1. :target 选择由文档URI的格式化识别码表示的目标元素,
    如果文档的URI包含一个格式化的标识符，或hash（哈希），然后:target选择器将匹配ID和标识符相匹配的元素。例如，给定的URI http://example.com/#foo， $( “p:target” )，将选择
    元素。
- 1. :contains(text) 匹配包含给定文本的元素
- 1. :empty 匹配所有不包含子元素或者文本的空元素
- 1. :has(selector) 匹配含有选择器所匹配的元素的元素

    <div><p>Hello</p></div>
    <div>Hello again!</div>
    $("div:has(p)").addClass("test");
    // [ <div class="test"><p>Hello</p></div> ]

- 1. :parent 匹配含有子元素或者文本的元素
- 1. :hidden 匹配所有不可见元素，或者type为hidden的元素
- 1. :visible 匹配所有可见元素
- 1. [attribute] 匹配包含给定的元素

    <div>
        <p>Hello！</p>
    </div>
    <div id="test2"></div>
    $('div[i]')
    // [ <div id="test2"></div> ]

- 1. [attribute=value] 匹配给定的属性是某个特定值的元素
- 1. [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于
    :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
- 1. [^attribute=value] 匹配给定的属性是以某些值开始的元素比如name=‘news…’ $(‘dom^=news’)
- 1. [attribute$=value] 匹配给定的属性是以某些值结尾的元素
- 1. [attribute*=value] 匹配给定的属性是包含某些值的元素
- 1. [selector1][selector1][selector1]
    复合属性选择器，同时满足

    // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
    <input id="man-news" name="man-news" />
    <input name="milkman" />
    <input id="letterman" name="new-letterman" />
    <input name="newmilk" />
    $("input[id][name$='man']")
    // [ <input id="letterman" name="new-letterman" /> ]

jquery 的筛选器
- 对jquery的元素集合进行二次筛选
- 只有jQuery的元素才可以使用，原生DOM对象不能使用
  - 1. first()
      => 拿到元素集合里的第一个
  - 1. last()
      => 拿到元素集合里的最后一个
  - 1. eq(索引)
      => 拿到元素集合里面指定索引那一个
  - 1. next()
      => 当前元素的下一个
  - 1. nextAll()
      => 语法：1. 元素集合.nextAll()
      获取到当前元素的所有兄弟
      => 语法：2. 元素集合.nextAll(选择器)
      获取到当前元素后面所有元素中指定选择器的那一个
  - 1. nextUntil()
      => 语法：元素集合.nextUntil()
      获取到当前元素后面所有的兄弟元素
      => 语法：元素集合.nextUntil(选择器)
      获取到当前元素后面所有的兄弟元素，直到选择器为止前后都不包含
  - 1. prev()
      => 语法：当前元素的上一个元素
  - 1. prevAll, preprevAll(选择器)
      => 语法 1：元素集合.prevAll()
      获取到当前元素上面的所有兄弟元素
      => 语法 2：元素集合.prevAll(选择器)
      获取到当前元素上面的所有兄弟元素的那一个
  - 1. prevUntil()
      => 语法：
      1. 元素集合.pervuntil()
        获取到当前元素元素上面的所有兄的元素
      2. 元素集合.prevUntile 获取到当前元素上面所有的兄弟元素直到选择器元素为止(不包含选择器)
  - 1. parent()
      => 语法：
      获取当前元素的父元素
  - 1. parents()
      => 语法：
      1. 元素集合.parents()
        获取当前元素的所有父元素
      2. 元素集合.parents(选择器)
        拿到结构父级里面所有父元素中符合选择器的那一个元素
  - 1. children() 有多少获取多少
      => 语法：
      1. 元素集合.children()
        拿到该元素的所有子元素
      2. 元素集合.children(选择器)
        拿到该元素的所有子元素中符合选择器的那一个元素
  - 1. sinblings()
      => 拿到该元素的所有兄弟元素，自己除外
  - 1. find(选择器)
      找到该元素中所有后代元素里面符合选择器条件的元素
  - 1. index()
      获取到的就是该元素在父元素里面的索引位置

zeuskk

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的常用选择器，筛选器

jQueryjQuery 的简介插件：一个功能高度分装类库：工具库，提供操作工具，不提供具体功能 jQuery 是一个工具集合框架：项目每一个组件都会提供出来。我们只需要引入框架语法，即可实现功能DOM 操作多 jQuery数据渲染不多 jQuery数据渲染不多 View React优点：无所不能的选择器无所不在的链式编程无人能及的隐式资迭代引入jq
复制链接

扫一扫