Jquery实战学习--层次选择器
来源：互联网 发布：淘宝怎么找人工小蜜 编辑：程序博客网 时间：2024/05/27 00:49
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>层次选择器</title><script type="text/javascript" src="jquery-1.7.js"></script></head><body><span style="color:red">1，$("ancestor descendant"),这个方法是选取ancestor元素里的所有descendant元素，返回的是集合元素。</span><div><a>demo1</a><a>demo2</a></div><script type="text/javascript">alert($("div a").html());</script><span style="color:red">2，("ancestor>descendant")这个方法是选取parent元素下的子元素，和1，$("ancestor descendant")不同。</span><p><a>demo3</a></p><script type="text/javascript">alert($("p>a").html());</script><span style="color:red">3，$("prev+next")这个方法选取的是在prev元素后的next元素。</span><div class="idiv"><a class="idiv">demo4</a><a class="idiv">demo5</a></div><script type="text/javascript">alert($(".idiv + a").html());//这句话的意思就是获取class为.idiv元素后的下一个a元素</script><span style="color:red">4，$("prev~next")这个方法选取的是在prev元素后所有的next元素。</span><div class="mydiv"></div></body></html>
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>层次选择器</title><script type="text/javascript" src="jquery-1.7.js"></script></head><body><div>hahaha<div>wangyong</div></div><div>enenen</div></body><!-- 改变body中所有的div的背景颜色--><script type="text/javascript">$("body div").css("background","red");</script><!--改变div下的div元素的背景颜色--><script type="text/javascript">$("div>div").css("background","green");</script></html>
