[实践OK]Jquery层级选择器示例及jQuery中层次选择器的疑问？

jackxiang 2012-11-14 23:10

$('>div')这样写表示的是：获取 body 标签下所有第一级子元素中的 div 元素，如果没有 ">"，则表示的是获取页面中所有的 div 元素

prev + next和prev ~ siblings感觉都一样，好像找不出区别，朋友们帮忙用个例子帮忙解释下吧，谢谢了
呵呵，很简单的用英文都可以帮你解决。next是下一个的意思 siblings是兄弟姐妹的意思。前者是单数，后者是复数。也就是说使用+这个符号就说明选择元素之后的一个，是一个元素，而使用~，则是选择元素之后的所有同辈元素，是之后、所有。

通过Demo理解更容易:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')    
</script>  
<script type="text/javascript">
$(document).ready(function()
{
  //改变body内所有div背景色
  $("#button1").click(function()
  {
    $('body div').css("background","red");
  });
  //改变body元素内子div元素的背景色
  $("#button2").click(function()
  {
    $('body > div').css("background","blue");
  });
  //改变class为one的下一个div兄弟元素的背景色
  $("#button3").click(function()
  {
    $('.one + div').css("background","green");
  });
  //改变id为two的元素后面的所有div元素的背景色
  $("#button4").click(function()
  {
    $('#two ~ div').css("background","green");
  });
});
  </script>

<div class="one">
   one div<div>one's childre</div>
</div>

<div id="two">after class=one 's div<div>In div id=two's div</div></div>
<div>after id=two's div</div><br />
<div>after id=two's div</div>

元素里所有后代
父元素下的子元素
这到底区别在哪儿啊：-）
----------------------------
父元素下的子元素
<div class="a"><p class ="b"></p></div>
只能取出a下的B
后代元素就是a下的所有的包括孙子重孙子
也就是这个子也就是一个层级（儿子，不包孙子），而所有的后代：就是里面有儿子孙子，曾孙，那jonhsion说的这个<div>下的后代可以是<p >了是吧？
嗯，是!

参考： http://blog.sina.com.cn/s/blog_79333b2c0100xx95.html （该Url里面图来自：锋利的Jquery）

http://jqapi.com

jQuery-find和children方法:
1.children(“condition”) 获取的是一级子元素。

2.find("condition")获取包含的所有子元素。

$("#cn_list > .cn_page > .curr").children("h4").find("a").text()
$("#cn_list > .cn_page > .curr > h4").find("a").text()

最后编辑： jackxiang 编辑于2012-11-15 10:10

Nginx 499错误的原因及解决方法

LazyLoad技术？

评论列表

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践OK]Jquery层级选择器示例及jQuery中层次选择器的疑问？

分类

最新日志

链接

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践OK]Jquery层级选择器示例及jQuery中层次选择器的疑问？

分类

最新日志

链接

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.