大话jQuery--选择器

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