菜鸟写jquery入门教程(for web前端开发群4)(03)

我又来了，今天下午手头有点事，所以中断了学习，哪好吧。反正是零碎时间了。补上我的第三篇吧...
3.继续昨天的，进一步了解$()...
 相信有敲代码吧？如果没有手动敲哪些简单的代码。去敲一下吧。如果您觉得您只需要看就能学会，我就不知道说什么好了。呃，有个极端的说法，如果你不懂哪也没有关系，先把它抄两遍再说。回头再去看。原来哪些代码就不哪么陌生了。这是蠢办法，也是可行的办法。相信我好了。骗你又没糖吃。
昨天讲到了三种基本用法。在学教程的时候。建议您去下载一个JQUERY帮助文档。我这里有一份，如果有懒人不愿百度，需要就留言吧。我会传到群空间上去。
三种基本用法 $( '#id')  $('.class')  $('tagName')  是不是跟CSS的选择方法一样呢？
我不知道我的读者会有多么基础。好吧好吧。我败了。我举例
这是我们的HTML结构:
(刚刚尝试了一下代码编辑功能。太丑了。直接敲吧。)
<div id="xiaocainiao">
  <div></div>
</div>
<div class="dacainiao"></div>
---------------------------------------------
1.得到id为'xiaocainiao'的div 

  $('#xiaocainiao')

2 得到class为'dacainiao'的div

  $('.dacainiao')

3 得到所有div

  $('div')
4 混合获得模式(暂且这么叫吧) 如:我想得到页面里符合 id="xiaocainiao" 或者 class="dacainiao" 的元素
  $('#xiaocainiao ,.dacainiao')
注意，$()函数返回的是一个array 这个数组是由一个一个element组成的。
好了。基础就讲到这里了。居然还没切入今天的正题。 打开下载到的帮助文档吧！（一看就是做前端出身的，排版都排了好几次..）
开篇了！！！
好。上面讲了一些基础应用。但，无论如何，您在实际应用中当然不会只用这种傻呼呼的方式去给想取得的元素取ID或者CLASS
呃，有的元素隐藏得很深。怎么办？ 请看~~
<div id="nocainiao">
   <span><span></span></span>
   <span></span>
   <p></p>
    <p></p>
   <div><em></em></div>
</div>
<span></span>
<p></p>
好了。就写这么多。这个结构。 只给了一个div的id供我们使用。 哦。今天要讲的$()的层级应用。用例子说明吧。
1 $('a  b')   选择 a 里面所有 b （注意a与b之间的空格）
如:
  要选择 id="nocainiao" 这个div 下面的所有的span   $('#nocainiao  span')  //这样会选择到所有的span，包括span里的span
  要选择 id="nocainiao" 这个div 下面的所有的元素   $('#nocainiao  *')
2 $('a > b') 选择 a 里面的子元素b
注意，子元素  上面的例子  $('#nocainiao span') 会得到所有的span 包括span里面的span ，有时候，我们并不希望得到span里面的span. 哪么就需要用到这个 > 号了。
$('#nocainiao > span ') 这样就只选择id="nocainiao" 这个div 里的子元素span了。而不会选择孙子元素span
 好了。我们可以一级一级写下去。无论一个元素藏得多深。我们都可以找得到。
如:
<div id="1st">
   <ul>
      <li>
        <span class='danxiaogui'>
          
        </span>
        <span>
          
        </span>
      </li>
   </ul>
</div>
我们想得到里面哪个胆小鬼span ，虽然它藏得很深。 好吧。我们揪出它来. 用已讲的知识，我们这样行到它.
 1 $('#1st ul li span').eq(0)
 2 $('#1st ul li > .danxiaogui')
 3 $('#1st > ul > li > .danxiaogui')
....
很多方法了。。 不写了。 总之记住    空格隔开的是表示得到 A 里面所有的 B    > 隔开的表示得到A下一级的B。下下级，下下下级的不管。
3 $('a + b')   选择紧跟在 a 后面的 b 
 得到a的跟屁虫，就得到它后面紧跟着的哪位，其它跟远了不管。
例子在这里 :
 <div class="cainiao"></div>
<span>我是跟屁虫1</span>
<span>我是跟屁虫2 我跟得远，不会选中我的<span>
 <div class="cainiao"></div>
<span>我是跟屁虫3</span>
<span>我是跟屁虫4 我跟得远，不会选中我的<span>
$('.cainiao + span') 将会得到跟屁虫1 和跟屁虫 3 而另外两个不是紧挨着 $('.cainiao') 的。所以不管它们了。好的，它们自由了。
4 $('a~b')   选择 a 后面的所有的 b 
自由终归是短暂的。好，是时候抓它们回来了。所有的跟屁虫都会回来。 这个不讲了。好理解。抓到所有后面的元素。只要是a后面的全抓.

层级就到此为止了。灵活利用这些选择符，基本上就可以抓到DOM里所有的元素了。明天将会介绍一些别的..

代码比较烂，直接在写文章的编辑器里手写的。会出错，不要直接拷贝上去就运行。 其实我是故意这么做的，这样你才会自己动手敲哪些简单的代码。不是么? 不信?好了。信不信由你了.不要懒就好...