JQuery中的选择器

JQuery属于JavaScript中的一个库文件,相对于JavaScript,编程更快捷和简洁,最主要可以实现链式编程和隐式迭代等特点。下面我将整理一下JQuery中选择器的使用。

以以下代码为例:

 <div>d0</div>
    <a href=""></a>
    <ul>
        <div>d1</div>
        <li class="ww">0</li>
        <li>
            <h1 class="ww">1</h1>
        </li>
        <li class="ww">2</li>
        <li id="cc">3</li>
    </ul>
    <div>d2</div>

基础用法

$() 和CSS选择器相似,如想要获取<li class="ww"></li>这类元素,只需$('.ww')即可,同理如果想要获取<li id="cc"></li>,只需$('#cc')即可,如果没有class和id,如<div></div>,要想获取此类标签,只需$('div')即可。在JQuery中CSS的子代选择器也可以使用,如想要获取ul中的li里的h1标签如<h1 class="ww">1</h1>,便可以使用$('ul>li>h1')。

高级用法

在li列表中,若想要获取第一个或最后一个li,可以使用$('li:first')或$('li:last')

eq代表索引值,如想要获取<li class="ww">0</li>,可以使用$('li:eq(0)')

even代表拿到偶数项,odd代表拿到奇数项,即$('div:even')或$('div:odd')

parent可以直接拿到父级节点,parents中可以附加参数,来指明找寻所需的父级,如$('li').parent()或$('li').parents('body')

children方法只能找到子级节点,孙子节点不行,如$('ul').children('div')

find可以找寻后代,不过参数位置要有值,即$('ul').find('h1')

siblings可以找到所有的兄弟节点,参数可填,即$('ul').siblings()

nextAll找到所有后面的元素,preAll找到所有前面的元素,他们两个参数都可填,如$('ul').nextAll()或$('ul').prevAll()

hasClass可以检查被选元素是否包含指定的 class,即$('li').hasClass("ww")

上一篇:ICS汇编学习笔记——8086的指令系统


下一篇:物理隔离又怎样?工控网络的五大风险