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