jquery 选择元素学习

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()