介绍 jQuery 常见的选择器,以及以下 api 的用法,给出范例

问题:
介绍 jQuery 常见的选择器,以及以下 api 的用法,给出范例

  • .eq
  • .next / .prev
  • .nextAll / .prevAll
  • .siblings
  • .parent / .parents
  • .children / .find
  • .filter
  • .has
  • .is
    示例代码:
<body>
<ul class="ul">
  <li>1</li>
  <li>2</li>
  <li class="li3">
    <span>3</span></li>
  <p>p1</p>
  <li>4</li>
  <p>p2</p>
</ul>
  <p>我被选中了</p>
</body>
  1. .eq(index)
    对于一个特定结果集,我们想获取到指定index的jQuery对象,可以使用eq方法

    image

  2. .next()
    next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。

    image

    image

    2.1. .prev()
    prev正好相反,获取元素之前的同辈元素
    image

    image

    如果同辈之前没有元素则返回空
    image

  3. .nextAll()
    nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素,选择性筛选的选择器

    image

    image

    3.1. .prevAll()
    prevAllnextAll相反,获取元素前面的同辈元素
    image

    image

  4. .siblings()
    获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

    image

  5. .parent()
    取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器

    image

    5.1. .parents()
    获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数
    image

  6. .children()
    获得匹配元素集合中每个元素的子元素,选择器选择性筛选

    image

    image

    6.1. .find()
    查找符合选择器的后代元素
    image

  7. .filter()
    筛选当前结果集中符合条件的对象,参数可以是一个选择器或者一个函数

    image

    image

  8. has()
    筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

    image

  9. .is()
    判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true

    image

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jquery核心 jQuery():这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。...
    悟名先生阅读 621评论 0 2
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 514评论 0 4
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 599评论 0 1
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,370评论 0 8
  • jQuery选择器 jQuery选择器完全继承了CSS的风格。学会使用选择器是学习jQuery的基础,jQuery...
    AuthorJim阅读 515评论 0 1