ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

选择器和筛选器

2021-11-11 13:01:07  阅读:116  来源: 互联网

标签:const 找到 元素 li 筛选 eq 选择器


选择器和筛选器

  • 选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

  • jQuery 有着相当强大的选择器
// 按照 id 获取页面中的元素
const ele = jQuery('#box') 
const ele = $('#box')
    • 上面两个都可以按照 id 来获取元素
// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')
    • 上面就是按照类名来选择元素,可以获取到一组元素
const lis = jQuery('li')
const lis = $('li')
    • 上面就是按照标签名来获取元素,可以获取到一组元素
const eles = jQuery('ul > li')
const eles = $('ul > li')
    • 上面就是按照选择器来获取元素,可以获取到一组元素

特殊选择器

  • 直接找到第一个
$('li:first') // 找到所有 li 中的第一个
  • 直接找到最后一个
$('li:last') // 找到所有 li 中的最后一个
  • 直接找到第几个
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
  • 找到所有奇数个
$('li:odd') // 找到所有 li 中索引为 奇数 的
  • 找到所有偶数
$('li:even') // 找到所有 li 中索引为 偶数 的

筛选器

  • jQuery 的筛选器就是在选择器选择到一组元素以后
  • 对元素进行筛选,也可以对准确的某一个元素进行判断和获取
  1. 找到所有元素中的第一个
    $('li').first()
  2. 找到所有元素中的最后一个
    $('li').last()
  3. 找到某一个元素的下一个兄弟元素
    $('li:eq(3)').next()
  4. 找到某一个元素的上一个兄弟元素
    $('li:eq(3)').prev()
  5. 找到某一个元素的后面的所有兄弟元素
    $('li:eq(3)').nextAll()
  6. 找到某一个元素的前面的所有兄弟元素
    $('li:eq(3)').prevAll()
  7. 找到某一个元素的父元素
    $('li:eq(3)').parent()
  8. 找到某一个元素的所有结构父级,一直到 html
    $('li:eq(3)').parents()
  9. 找到一组元素中的某一个
// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')
​
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')

标签:const,找到,元素,li,筛选,eq,选择器
来源: https://www.cnblogs.com/saying36/p/15539311.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有