jQuery选择器

    xiaoxiao2024-12-04  62

    jQuery几乎支持主流的css1~css3选择器的写法

    <div class="container"> <ul id="box"> <li class="one">1</li> <li class="two">2</li> <li><a>3</a></li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <a>8</a> </ul> </div>

    一、基本选择器

    全选选择器 $('*')标签选择器 $('li')类选择器 $(".container")id选择器 $("#box")交集选择器 $("p .one")并集选择器 $(".one,.two")

    二、层级选择器

    子代 $("#box > a") //选中内容为8的a标签

    后代 $("#box a") //选中内容为8和内容为3的a标签

    一般兄弟选择器 $(".one ~ li") // 选中内容为2,3,4,5,6的li

    // 一般兄弟选择器$(‘prev ~ siblings’)选择’prev’元素之后的所有同级的’siblings’元素,并返回集合元素

    相邻兄弟选择器 $(".one + li") // 选中内容为2的li

    // 相邻兄弟选择器$(‘prev + next’)选择所有紧跟在’prev’元素后的’next’元素,并返回集合元素

    三、过滤选择器(部分)

    :odd 奇数 $('li:odd') // 返回内容为2,4,6的li:even 偶数 $('li:even') // 返回内容为1,3,5,7的li:eq 指定下标 $(‘li:eq(0)’) // 返回内容为1的li:first 第一个子元素 $(‘li:first’) // 返回内容为1的li:last 最后一个子元素 $(‘li:last’) // 返回内容为7的li:gt 大于第几个下标的子元素 $('li:gt(5)') // 返回内容为7的li:lt 小于第几个下标的子元素 $('li:lt(1)') // 返回内容为1的li

    四、筛选选择器 (方法)

    children()子元素 $('#box').children('a') // 返回内容为8的afind() 后代 $('#box').find('a') // 返回内容为3,8的aparent() 父元素 $('.one').parent() // 返回ulsiblings()兄弟元素(不包括自己) $('.one').siblings('li') // 返回内容为2,3,4,5,6,7的linext() 下一个兄弟 $(’.two’).next() //返回内容为3的liprev() 上一个兄弟 $(’.two’).prev() //返回内容为1的liprevAll() 前面所有的兄弟prevUntil() 前面直到某一个兄弟nextAll() 后面所有的兄弟nextUntil() 后面直到某一个兄弟eq() 指定下标 $(‘li’).eq(0) //返回内容为1的li

    注:

    jQuery获取元素下标:$(’.two’).index() // 1
    web前端交流QQ群:327814892
    最新回复(0)