热门IT资讯网

大话jQuery--选择器(2)

发表于:2024-11-24 作者:热门IT资讯网编辑
编辑最后更新 2024年11月24日,1.层级关系 查找子孙元素的操作比较常见,jQuery也为我们提供了一些方便的方法,我们看看吧: 1.)祖先 后代 空格隔开,这种和css中一样 测试链接1|链接2|链接3 这样 p a就表示的是p标
1.层级关系 查找子孙元素的操作比较常见,jQuery也为我们提供了一些方便的方法,我们看看吧: 1.)祖先 后代 空格隔开,这种和css中一样


测试链接1|链接2|链接3

这样 p a就表示的是p标签下的链接,而其他的标签a不包括在内,其实这是一种限定范围的方法。赤裸的a{}代表了全部的a,也就是* a{} 每加一个限制标签,一般范围更小,更精确,比如div p a{} jQuery里面这样可以获取 $("p a"). 2.)我们有时候查找后代时,只想要第一个层面上的,也就是儿子级别上的那个,孙子重孙子那些不关心。那么下面这个派上用场了: 父 >子 对,是大于符号,表示的是父子关系

  • 测试1

  • 测试2



    1. 测试31

    2. 测试32



那么ul>li表示的是外层的li不包括ol里面的li,而ul li则包含。 3.pre+next +号,表示标签next满足这样一种关系,next与pre相邻并紧随其后。


链接1|链接2|链接3



测试
测试b
测试
哈哈

上面代码有多少了span呢,有4个,但是有多少个紧随a标签之后内,只有前2个竖线的满足,后面的第3个排在后面,另外一个是嵌套。 那么 $("a+span").css({border:"1px solid red"}); 只对前2个加边框。 当然了$("a+*")就是所有标签了,不只是限于span了。 实际中可以结合id,类构建更复杂的应用。 4.)prev~后面的兄弟 ~找出后面的所有兄弟。 $("p span")表示所有的排在p后面的,那些兄弟span元素。 2.找孩子(哈哈) 1.上面的parent>child方法是所有的孩子。 如果我想要长子元素,或者最后一个,或者随机找出某一个。 好在jquery提供了几个伪类方便我们 :first-child,第一个子元素,


链接1|链接2|链接3


$("p :first-child")大家可能容易知道是第一个链接1 但是如果是嵌套呢:


测试
测试b
测试
哈哈

$("p :first-child")会得到2个,一个 测试
这个好理解, 这个不要忘记哈哈,因为他对最后一个a来说也是长子,而且还是独生子呢。 所有,记住: :first-child是指的这些元素对于他们的父元素来说是长子的元素 :first-child和*:first-child同。 $("p *:first-child")也是可以的。 如果你只想找父子级别的,那么用 $("p>*:first-child") 还可以做限制筛选,比如$("p>a:first-child")表示的意思是,从p元素的链接孩子中看看有没有长子a元素。 2.:last-child同上 3.随机找:nth-child(n)这里n是从1开始的。 $("p :nth-child(3)")表示,在p的子孙元素里,找在他们家里排老三的。 $("p>:nth-child(3)")在孩子中找老三。 当然也可以限制还可以和id,类混用。 4.:only-child 找独生子。 注意上面的伪类和前面讲的区别 比如$("p>a:first")和$("p>a:first-child")
0