前端基礎 -JQuery之 層次選擇器
JQuery層次選擇器
層次選擇器：
- a b 選擇器a選擇的區域裏面全部爲選擇器b的後代元素
- a>b 選擇器a選擇的區域裏面全部爲選擇器b的子代元素
- a+b 選擇器a選擇器的區域後面第一個爲選擇器b的弟弟元素
- a~b 選擇器a選擇器的區域後面全部的爲選擇器b的弟弟元素
層次選擇器案例：
效果圖：javascript
代碼：css
<!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" />
<title>02-層次選擇器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="選擇 body內的全部div元素." id="btn1"/>
$("#btn1").click(function() {
$("body div").css("background-color", "red");
})
// <input type="button" value="在body內,選擇子元素是div的。" id="btn2"/>
$("#btn2").click(function() {
$("body>div").css("background-color", "red");
})
// <input type="button" value="選擇 id爲one 的下一個div元素." id="btn3"/>
$("#btn3").click(function() {
$("#one+div").css("background-color", "red");
})
// <input type="button" value="選擇 id爲two的元素後面的全部div兄弟元素." id="btn4"/>
$("#btn4").click(function() {
$("#two~div").css("background-color", "red");
})
})
</script>
</head>
<body>
<h3>層次選擇器.</h3>
<button id="reset">手動重置頁面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />
<input type="button" value="選擇 body內的全部div元素." id="btn1" />
<input type="button" value="在body內,選擇子元素是div的。" id="btn2" />
<input type="button" value="選擇 id爲one 的下一個div元素." id="btn3" />
<input type="button" value="選擇 id爲two的元素後面的全部div兄弟元素." id="btn4" />
<br />
<br />
<!-- 測試的元素 -->
<div class="one" id="one">
id爲one,class爲one的div
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div.
<div class="mini" title="other">class爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini" title="tesst">class爲mini,title爲tesst</div>
</div>
<div style="display:none;" class="none">style的display爲"none"的div</div>
<div class="hide">class爲"hide"的div</div>
<div>
包含input的type爲"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在執行動畫的span元素.</span>
</body>
</html>
相關文章
- 1. 26前端基礎 -JQuery之 層次選擇器
- 2. jQuery選擇器——基礎選擇器、層次選擇器
- 3. jQuery 層次選擇器 jQuery 層次選擇器
- 4. jQuery 層次選擇器
- 5. 4.jQuery——層次選擇器
- 6. jquery的層次選擇器
- 7. jQuery選擇器之層級選擇器
- 8. 前端基礎 -JQuery之 基本選擇器
- 9. jQuery基礎：jQuery選擇器
- 10. 前端基礎-jQuery的內容之選擇器
- 更多相關文章...
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • Rust 基礎語法 - RUST 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
