189 8069 5689

大话jQuery--选择器(2)

1.层级关系
查找子孙元素的操作比较常见,jQuery也为我们提供了一些方便的方法,我们看看吧:
1.)祖先 后代
空格隔开,这种和css中一样
<p>
  <span>测试span><a href="#">链接1a><span>|span><a href="#" class="link">链接2a>|<a href="#">链接3a>
p>
 
这样 p  a就表示的是p标签下的链接,而其他的标签a不包括在内,其实这是一种限定范围的方法。赤裸的a{}代表了全部的a,也就是* a{}
每加一个限制标签,一般范围更小,更精确,比如div p a{}
jQuery里面这样可以获取
$("p a").
 
2.)我们有时候查找后代时,只想要第一个层面上的,也就是儿子级别上的那个,孙子重孙子那些不关心。那么下面这个派上用场了:
父 >子
对,是大于符号,表示的是父子关系
<ul>
<li>测试1li>
<li>测试2li>
<li>
        <ol>
             <li>测试31li>
             <li>测试32li>
        ol>
li>
ul>
 
那么ul>li表示的是外层的li不包括ol里面的li,而ul li则包含。
3.pre+next
+号,表示标签next满足这样一种关系,next与pre相邻并紧随其后。
<p>
  <a href="#">链接1a><span>|span><a href="#" class="link">链接2a><span>|span><a href="#">链接3a>
p>
<p>
    <a href="#">测试a>
    <b>测试bb>
    <span>测试span>
    <a href="#"><span>哈哈span>a>
p>
 
上面代码有多少了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,第一个子元素,
<p>    
    <a href="#">链接1a><span>|span><a href="#" class="link">链接2a><span>|span><a href="#">链接3a>    
p>    
 
$("p :first-child")大家可能容易知道是第一个链接1
 
但是如果是嵌套呢:
<p>
    <a href="#">测试a>
    <b>测试bb>
    <span>测试span>
    <a href="#"><span>哈哈span>a>
p>
 
$("p :first-child")会得到2个,一个
<a href="#">测试a>
这个好理解,
这个不要忘记<span>哈哈span>,因为他对最后一个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")

分享题目:大话jQuery--选择器(2)
网址分享:http://cdxtjz.cn/article/pgcjod.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。