首页 前端知识 jquery 常用选择器介绍及用法

jquery 常用选择器介绍及用法

2024-06-10 23:06:32 前端知识 前端哥 200 483 我要收藏

一,基本介绍

jQuery 选择器用于查找 DOM 元素,基于元素的 id、类、类型、属性、属性值等选择。以下是常用的 jQuery 选择器及其用法:

  1. 基本选择器

    • $("#id"):选择ID为id的元素。
    • $(".class"):选择类为class的所有元素。
    • $("element"):选择所有element元素。
    • $("*"):选择文档中的所有元素。
    • $("#id, .class, element"):组合选择器,选择多个不同的元素。
  2. 层级选择器

    • $("ancestor descendant"):选择ancestor元素的所有descendant后代元素。
    • $("parent > child"):选择parent元素的直接child子元素。
    • $("prev + next"):选择紧接在prev元素后面的next元素。
    • $("prev ~ siblings"):选择prev元素后面的所有siblings兄弟元素。
  3. 属性选择器

    • $("element[attr]"):选择所有带有属性attrelement元素。
    • $("element[attr='value']"):选择属性attr值为valueelement元素。
    • $("element[attr*='value']"):选择属性attr值包含valueelement元素。
    • $("element[attr^='value']"):选择属性attr值以value开头的element元素。
    • $("element[attr$='value']"):选择属性attr值以value结尾的element元素。
  4. 表单选择器

    • :input:选择所有<input><textarea><select><button>元素。
    • :text:选择所有单行文本框。
    • :password:选择所有密码框。
    • :radio:选择所有单选按钮。
    • :checkbox:选择所有复选框。
    • :submit:选择所有提交按钮。
    • :reset:选择所有重置按钮。
    • :button:选择所有按钮。
    • :file:选择所有文件域。
  5. 过滤选择器

    • :first:选择第一个匹配的元素。
    • :last:选择最后一个匹配的元素。
    • :not(selector):选择与selector不匹配的所有元素。
    • :even:选择索引为偶数的元素,从0开始计数。
    • :odd:选择索引为奇数的元素,从0开始计数。
    • :eq(index):选择索引等于index的元素。
    • :gt(index):选择索引大于index的元素。
    • :lt(index):选择索引小于index的元素。
    • :header:选择所有标题元素,如<h1><h2>等。
    • :animated:选择所有正在执行动画的元素。
  6. 内容选择器

    • :contains(text):选择包含指定文本text的元素。
    • :empty:选择没有任何子元素(包括文本节点)的元素。
    • :has(selector):选择含有选择器匹配元素的元素。
    • :parent:选择有子元素(包括文本节点)的元素。
  7. 可见性选择器

    • :hidden:选择所有隐藏的元素。
    • :visible:选择所有可见的元素。

这些选择器可以单独使用,也可以组合使用,以实现更复杂的选择逻辑。例如,$("#myForm :input[type='text']:disabled")会选择ID为myForm的表单内所有禁用的文本输入框。

二,实例

以下是一些具体的例子,展示了如何使用不同的 jQuery 选择器:

  1. 基本选择器

    • 选择ID为myDiv的元素:
      $("#myDiv");
      
    • 选择类为myClass的所有元素:
      $(".myClass");
      
    • 选择所有<p>元素:
      $("p");
      
    • 选择所有元素:
      $("*");
      
    • 选择ID为myDiv的元素和类为myClass的所有元素:
      $("#myDiv, .myClass");
      
  2. 层级选择器

    • 选择<div>内的所有<p>元素:
      $("div p");
      
    • 选择<div>的直接子<p>元素:
      $("div > p");
      
    • 选择紧接在<div>后面的<p>元素:
      $("div + p");
      
    • 选择<div>后面的所有<p>兄弟元素:
      $("div ~ p");
      
  3. 属性选择器

    • 选择所有带有data-src属性的<img>元素:
      $("img[data-src]");
      
    • 选择属性data-src值为example.jpg<img>元素:
      $("img[data-src='example.jpg']");
      
    • 选择属性data-src值包含example<img>元素:
      $("img[data-src*='example']");
      
    • 选择属性data-src值以example开头的<img>元素:
      $("img[data-src^='example']");
      
    • 选择属性data-src值以.jpg结尾的<img>元素:
      $("img[data-src$='.jpg']");
      
  4. 表单选择器

    • 选择所有文本输入框:
      $(":text");
      
    • 选择所有密码框:
      $(":password");
      
    • 选择所有单选按钮:
      $(":radio");
      
    • 选择所有复选框:
      $(":checkbox");
      
    • 选择所有提交按钮:
      $(":submit");
      
  5. 过滤选择器

    • 选择第一个<p>元素:
      $("p:first");
      
    • 选择最后一个<p>元素:
      $("p:last");
      
    • 选择索引为偶数的<tr>元素:
      $("tr:even");
      
    • 选择索引为奇数的<tr>元素:
      $("tr:odd");
      
    • 选择索引等于3的<tr>元素:
      $("tr:eq(3)");
      
    • 选择索引大于3的<tr>元素:
      $("tr:gt(3)");
      
    • 选择索引小于3的<tr>元素:
      $("tr:lt(3)");
      
  6. 内容选择器

    • 选择包含文本“Hello”的<p>元素:
      $("p:contains('Hello')");
      
    • 选择没有任何子元素的<div>元素:
      $("div:empty");
      
    • 选择含有<span>元素的<div>元素:
      $("div:has(span)");
      
    • 选择有子元素的<div>元素:
      $("div:parent");
      
  7. 可见性选择器

    • 选择所有隐藏的<input>元素:
      $(":hidden");
      
    • 选择所有可见的<input>元素:
      $(":visible");
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11822.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!