jquery选择器的使用

2018-10-23  本文已影响2人  转身丶即天涯

选择DOM的方式

1.通过id选择
$('#id')

2.通过class选择
$('.class')
不推荐这种做法,class可能会有多个元素使用,不小心可能改到其他元素的class。
而且效率也比较低。

3.通过标签选择
比如选择所有div。$('div')

在比如选择<div id="m-div">中所有的<li id='li-id' class='li-cls'>:
可以这样('#m-div li'),也可以这样('#m-div #li-id'),还可以$('#m-div .li-cls')

那么这样就很灵活了,总结一下,jquery的选择器是逐级从左向右选择,可以自由组合,只要能准确定位到元素或者有一定属性的元素。

注意

jquery支持多种类型同时选择,在同时选择的时候需要注意,中间用逗号隔开。
比如,我想选择所有的<div>和<li>。
那么可以这样写$('div,li')

中间有空格代表的是逐级查找,中间用逗号表示同级查找。


按层选择

比如,我想取<div id='m-div'>下面的所有子<span>元素。

<div id="m-div">
        <span>span 1</span>
        <div>
                <span>span 2</span>
        </div>
</div>
<div></div>

('#m-div span')这样可以取到div下的所有span。('#m-div > span')这样就只能取到div下一级的span,里面那个span就不会被取到。
('#m-div + div')选取m-div的下一个div,换句话说就是:和m-div同级的下一个div。('#m-div ~ div')选取m-div之后的所有div元素。

有个哥们总结的更全面,传送门
吃点现成,哈哈。

上一篇 下一篇

猜你喜欢

热点阅读