前端基礎 -JQuery之 基本選擇器
Jquery之選擇器
基本選擇器
- id： #
- class： .
- 標籤：*：a,b,c
基本選擇器案例：
效果圖：
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>01-基本選擇器.html</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/assist.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="選擇 id爲 one 的元素." id="btn1"/>
$("#btn1").click(function() {
$("#one").css("background-color", "red");
})
// <input type="button" value="選擇 class 爲 mini 的全部元素." id="btn2"/>
$("#btn2").click(function() {
$(".mini").css("background-color", "green");
})
// <input type="button" value="選擇 元素名是 div 的全部元素." id="btn3"/>
$("#btn3").click(function() {
$("div").css("background-color", "yellow");
})
// <input type="button" value="選擇 全部的元素." id="btn4"/>
$("#btn4").click(function() {
$("*").css("background-color", "blue");
})
// <input type="button" value="選擇 全部的span元素和id爲two的元素." id="btn5"/>
$("#btn5").click(function() {
$("span,#two").css("background-color", "sandybrown");
})
})
</script>
</head>
<body>
<button id="reset">手動重置頁面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />
<h3>基本選擇器.</h3>
<!-- 控制按鈕 -->
<input type="button" value="選擇 id爲 one 的元素." id="btn1" />
<input type="button" value="選擇 class 爲 mini 的全部元素." id="btn2" />
<input type="button" value="選擇 元素名是 div 的全部元素." id="btn3" />
<input type="button" value="選擇 全部的元素." id="btn4" />
<input type="button" value="選擇 全部的span元素和id爲two的元素." id="btn5" />
<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. jQuery基礎：jQuery選擇器
- 2. 前端基礎 -JQuery之 層次選擇器
- 3. 前端基礎-jQuery的內容之選擇器
- 4. 26前端基礎 -JQuery之 層次選擇器
- 5. 30前端基礎 -JQuery之 屬性過濾選擇器
- 6. 【2020Python修煉記】前端開發之 jQuery基礎+選擇器
- 7. jQuery基礎選擇器
- 8. jquery選擇器基礎
- 9. jQuery基礎及選擇器
- 10. JQuery基礎——選擇器
- 更多相關文章...
- • Rust 基礎語法 - RUST 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（一）基本語法
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
