1. 程式人生 > >javaEE (五)javaweb_jQuery (3) jQ層級選擇器

javaEE (五)javaweb_jQuery (3) jQ層級選擇器

Date : 2018/11/18

層級選擇器,無圖,結衣鎮樓:
在這裡插入圖片描述

原始碼:

<!-- 
1、body div  body元素的所有下級,兒子、孫子、重孫子。。。
2、body > div   body元素所有的兒子
3、#two+div     two元素的同桌(向下數第一個同級元素)
4、#one~div     one元素的兄弟(不包括自己)
 -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>層級選擇器</title>
<link rel="stylesheet" href="../../css/style.css" /> <script src="../../js/jquery-1.11.0.js"></script> <script> $(function(){ $("#btn1").click(function(){ $("body div").css("background-color","gold"); }); $("#btn2").click(function(){ $("body > div"
).css("background-color","gold"); }); $("#btn3").click(function(){ $("#two+div").css("background-color","gold"); }); $("#btn4").click(function(){ $("#one ~div").css("background-color","gold"); }); }); </script> </head> <body>
<input type="button" id="btn1" value="選擇body中的所有的div元素"/> <input type="button" id="btn2" value="選擇body中的第一級的孩子"/> <input type="button" id="btn3" value="選擇id為two的元素的下一個元素"/> <input type="button" id="btn4" value="選擇id為one的所有的兄弟元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>