jQuery层级元素选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery层级元素选择器相关的知识，希望对你有一定的参考价值。
第一个：
１：空格表示所有
２：＞ 第一层
３：＋／～ 同级
＋：之后的第一个元素
～：之后所有同级
d
代码示例：
<!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=utf-8" /> <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form input").css("color", "red"); //给form元素的后代input元素设置字体颜色 $("div>div").css("background", "#FCF"); //给maindiv下的子元素div1和div2设置背景颜色 $("div~input").css("border", "2px solid blue"); //给div元素后面的所有input元素设置边框 $("div+input").css("border", "2px solid red"); //给紧跟在div元素后的input元素设置边框 }); </script> <title>层级选择器</title> </head> <body> <form id="form1"> <label>form元素的后代input元素为:input1, input2, input3</label> <input type="text" id="input1" value="文本框1" /> <div id="maindiv"> <div id="div1">maindiv的子元素:id为div1</div> <div id="div2">maindiv的子元素:id为div2</div> </div> <input type="text" id="input2" value="文本框2" /> <input type="text" id="input3" value="文本框3" /><br /> <label>maindiv的所有子元素为:div1, div2</label> </form> </body> </html>
以上是关于jQuery层级元素选择器的主要内容，如果未能解决你的问题，请参考以下文章