标签：jquery 元素 li 学习 ul 筛选 选择器

jquery 选择元素学习

本文记录下使用jquery选择元素的多种方式。

• jquery 选择元素学习
  • 一、基本选择器
  • 二、筛选选择器
  • 三、筛选方法(同级筛选)
  • 四、筛选方法(父子筛选)

一、基本选择器

使用$('css选择器')来选择,如

$('#id名称')
$('.class名称')
$('元素名')

括号中的内容可以写css的各种选择器，如父子选择器等。

二、筛选选择器

当第一级使用的css选择器返回的结果有多个时(返回的结果是一个数组)，可以使用筛选选择器进行筛选

例如针对下边的dom结构

<ul>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
    <li>多个里面筛选几个</li>
</ul>

使用$('ul li') 选择到的是所有的li,然后可以使用筛选选择器筛选

$('ul li:first')//得到的是第一个元素,即索引为0的元素
$('ul li:odd')//得到的是索引为偶数的元素,如0，2,4...
$('ul li:even')//得到的是索引是奇数的元素,如1,3,5...
$('ul li:eq(2)')//得到索引是2的元素

三、筛选方法(同级筛选)

jquery提供了对兄弟元素进行筛选的方法，还是上边那个案例

$('ul li').eq(0)//选择数组索引是0的元素

还有一个 siblings() 方法可以筛选出除了自己以为的所有兄弟元素

$('ul li').eq(0).siblings()//筛选出除了索引=0外其余的元素

还有一个 hasClass('class名称')方法，可以判断是否含有某个类，返回true、false

四、筛选方法(父子筛选)

<div class="yeye">
  <div class="father">
    <div class="son">儿子</div>
  </div>
</div>

针对上边的dom结构

选择子元素有两个方法,children([选择器])和find('选择器'),children方法中的选择器参数是可选的。

$('.yeye').children()//返回的是yeye这个元素的直接子元素,不包含孙子元素
$('.yeye').find('div')//返回的是yeye这个元素的全部子元素，包含孙子元素

还有一个parent方法返回的是元素的直接父元素，亲爸爸

$('.son').parent()

标签：jquery,元素,li,学习,ul,筛选,选择器
来源： https://www.cnblogs.com/chengxuxiaoyuan/p/13945192.html

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