jQuery选择器之层次选择器
1、 $(s1 s2) 派生
$('div span').css('color','blue');
2、 $(s1 > s2) 直接子元素
$('div span').css('color','blue');
3、 $(s1 + s2) 兄弟 紧紧挨着的第一个s2节点
$('div + span').css('fontSize','30px');
4、 $(s1 ~ s2) 兄弟 后续全部兄弟关系的s2节点
$('div ~ span').css('color','yellow');
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="./jquery-1.4.4.js"></script> <script type="text/javascript"> function f1(){ //① $(s1 s2) 派生 $('div span').css('color','blue'); //刘备 阿斗 张飞 //② $(s1 > s2) 直接子元素 $('div > span').css('background-color','lightblue') //刘备 张飞 //③ $(s1 + s2) 兄弟 紧紧挨着的第一个s2节点 $('div + span').css('fontSize','30px'); //吕布 //④ $(s1 ~ s2) 兄弟 后续全部兄弟关系的s2节点 $('div ~ span').css('color','yellow'); //吕布 曹操 孙权 } </script> <style type="text/css"> </style> </head> <body> <h2>jquery基本选择器(思想来之css样式选择器)</h2> <span>董卓</span> <div> <span>刘备</span> <p> <span>阿斗</span> </p> <span>张飞</span> </div> <span>吕布</span> <p>貂蝉</p> <span>曹操</span> <span>孙权</span> <div></div> <span>黄盖</span> <p><input type="button" value="触发" onclick="f1()" /></p> </body> </html>