《JQuery 能干点啥~》第7讲 层级选择器_2

在开讲之前，我要说下我这套教程的讲课思路~ 以免大家茫然~
在第一节的时候，我就说过 我的这套教程会讲的比较慢，如果大家急于求成 的话不建议看这套教程
之所以慢的原因为，我的讲课顺序和一般的 相关书籍的不太一样~，这就是我开始说的 讲课思路
对于 JQ 这个 面向对象的语言来说，起核心的内容，我觉得 莫过于 JQ 对象了
学习什么方法，什么效果，都基于 第一步 你要准确的得到 你想要的东西，所以 我到现在为止，基本上都在磨磨唧唧的将CSS选择器, 以后 还有 xpath 选择器，还有，其他一些选择器
在这以后，我再降一些 比较常用的方法~
这里要说一下，我如果 时间充裕的话，我会尽可能多的给大家讲讲 JQ 提供的方法，如果，时间不充裕，我就捡重点的，常用的，易混淆的来~ 剩下的就靠大家自己翻手册了

在这之后 我会把 ajax 单拿出来，用一段时间讲讲的~ 如果 还是时间充裕的话，我也会把 JQ 的效果方面的东西也拿出来讲讲
废话 不说了
--------------------------------------开讲--------------------------------------
今天有两个内容 一个是第一个出现的匹配元素 第二个是同辈元素(也叫兄弟元素)
现在 说下 第一个出现的匹配元素 的语法$("prev+next ")  

其中 prev 为 任意选择器，next 其实也为 任意选择器，不过，如果写prev  选择器后 没有的元素，那肯定没有结果， 第一个出现的匹配元素 也就没有意思了，所以，我建议 大家还是写 prev   的后 存在的元素选择器~！
解释下 什么是 第一个出现的匹配元素：刚才已经说过了 ，第二个选择器其实是选择prev  后的元素。那么 第一个出现的匹配元素 就比较好理解了，他匹配的是离prev  起始标签最近的，且满足第二个选择器的元素了！
举两个例子

?

双击复制代码

<div>

        <input type="text" value="第一个元素"/>

        <span>input 后第一个元素</span>

  </div>

第二个例子

?

双击复制代码

<div>

        <span>第一个元素</span>

        <input type="text" value="span后第二个元素"/>

  </div>

两个例子结束了，是不是有点 感觉了~ 
现在写个例子，复杂一点的

?

双击复制代码

  <div>

         

        <input type="text" value="第1个元素，第一个 input元素"/>

        <span>第2个元素，但为第一个 span元素</span>

        <div>第3个元素,span后第一个元素 </div>

        <span>第4个元素</span>

        <input type="text" value="第5个元素，span后第一个元素"/>

  </div>

下面是 JQ 的代码

?

双击复制代码

$("span+input")

这样获得的 就是 [<input type="text" value="第5个元素，span后第一个元素"/>  ] 对象了
怎么样，这回明白了吗~~~ 不明白的童鞋，留言！ 讲下一个

同辈元素  这个 从他的 别名 兄弟元素 名字上 就比较好理解了，说的通俗点，就是 同一个父元素，同一个爹~~
还是说语法  $(" prev~siblings ")   
prev 还是所有选择器， siblings 为兄弟元素选择器
以本文 的前两个 HTML 的代码为例，div中的 input 与 span 就互为兄弟元素 
在来段 HTML 代码，让大家 更深刻的理解下

?

双击复制代码

<div class="font" style="border:2px solid green">一级子 div

                <input type="text" id="f_input" value="第一个input">

                <span id="f_span">第一次出现 span</span>

                <span >第二次出现 span</span>         

        </div>

        <input type="text" id="s_input" value="第2个input">

其中 div 与最后一个 input 互为 兄弟元素   div 内部的 所有元素也 互为兄弟元素  
怎么 对兄弟元素  有点理解了吧
现在 写一个  看看效果

?

双击复制代码

$("div~input");

//还有种写法，这个以后会讲，现在先看看

$("div").siblings("input")

结果为[<input type="text" id="s_input" value="第2个input"> ]
好了 今天的内容也讲完了!

 

 

本人的原文出自 http://bbs.coderli.com/forum.php?mod=viewthread&tid=409&fromuid=7

有需要样例代码的 童鞋 可以去下载