<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.simpleTable {
border: 1px solid green;
width: 300px;
border-collapse: collapse;
}
.simpleTable td, .simpleTable th {
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">jQuery Site</a>
</div>
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="jQueryFirst.html" class="list-group-item">jQueryFirst</a>
<a href="WritingStyle.html" class="list-group-item">jQueryWritingStyle</a>
<a href="jQuerySelectors.html" class="list-group-item">jQuerySelectors</a>
<a href="jQueryDOM.html" class="list-group-item">jQueryDOM</a>
<a href="jQueryCSS.html" class="list-group-item">jQueryCSS</a> <a
href="jQueryEach.html" class="list-group-item">jQueryEach</a>
<a href="resize.html" class="list-group-item" target="_blank">jQueryEvent</a>
<a href="jQueryEvent.html" class="list-group-item">jQueryEventBinding</a> <a
href="jQueryEffects.html" class="list-group-item">jQueryEffects</a>
<a href="jQueryAjax.html" class="list-group-item">jQueryAjax</a> <a
href="jQueryUI.html" class="list-group-item">jQueryUI</a>
<a href="jQueryPlugin_DataTables.html" class="list-group-item">jQueryPlugin</a>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div class="page-header">
<h3>jQuery Selectors</h3>
</div>
<!-- 每頁不同的內容從這裡開始 -->
<a href="a.doc">A(doc)</a> | <a href="a.pdf">A(pdf)</a> <br /> <a
href="b.doc">B(doc)</a> | <a href="b.pdf">B(pdf)</a> <br /> <input
type="text" value="請輸入" /><br /> <input type="text" value="請輸入" /><br />
<input type="text" value="請輸入" /><br /> <input type="button"
value="送出" />
<hr />
<table class="simpleTable">
<tr>
<td>A0</td>
<td>B1</td>
<td>C2</td>
</tr>
<tr>
<td>D3</td>
<td>E4</td>
<td>F5</td>
</tr>
<tr>
<td>G6</td>
<td>H7</td>
<td>I8</td>
</tr>
<tr>
<td>G6</td>
<td>H7</td>
<td>I8</td>
</tr>
<tr>
<td>G6</td>
<td>H7</td>
<td>I8</td>
</tr>
<tr>
<td>G6</td>
<td>H7</td>
<td>I8</td>
</tr>
<tr>
<td>G6</td>
<td>H7</td>
<td>I8</td>
</tr>
</table>
<!-- 每頁不同的內容到這裡結束 -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>jQuery</h2>
<p>jQuery的語法設計使得許多操作變得容易，如操作文件（document）、選擇文件物件模型（DOM）元素、建立動畫效果、處理事件、以及開發Ajax程式。jQuery也提供了給開發人員在其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。
</p>
<p>
<a class="btn btn-primary"
href="https://zh.wikipedia.org/wiki/JQuery" role="button">詳細資料
»</a>
</p>
</div>
<div class="col-md-4">
<h2>jQueryUI</h2>
<p>jQuery UI是一套JavaScript 函式庫，提供抽象化、可自訂主題的GUI控制項與動畫效果。基於jQuery
JavaScript函式庫，可用來建構互動式的網際網路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世[2]。最新的版本需要jQuery
2.1.1或更新的版本。</p>
<p>
<a class="btn btn-primary"
href="https://zh.wikipedia.org/wiki/JQuery_UI" role="button">詳細資料
»</a>
</p>
</div>
<div class="col-md-4">
<h2>jQueryMobile</h2>
<p>jQuery Mobile is a touch-optimized web framework (also known
as a mobile framework), more specifically a JavaScript library,
currently being developed by the jQuery project team. The
development focuses on creating a framework compatible with a wide
variety of smartphones and tablet computers</p>
<p>
<a class="btn btn-primary"
href="https://en.wikipedia.org/wiki/JQuery_Mobile" role="button">詳細資料
»</a>
</p>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© IIIEDU</p>
</footer>
</div>
<!-- /container -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
//==== Attribute Selectors ====
//在pdf及doc的超連結前面加上小圖
//css 參考用法如下
//text-decoration:none (移除超連結會有的底線，JQ自動會有，所以不用寫)
//background:url(images/pdf_icon.gif) no-repeat
//padding-left:20px (把字往左移，多出空間給圖片)
//=============================
//a是(超連結)元素、a[href]差不多，a[href = a.pdf]會找到這個：<a href="a.pdf">A(pdf)</a>
//$= ".xxx"代表找<a href="a.pdf">中字尾是.xxx的東西
//*= 'xxx'代表找<a href="a.pdf">中有xxx的
$('a[href $="pdf"]').css({
'text-decoration':'none',
'background':'url(images/pdf_icon.gif) no-repeat',
'padding-left':'20px'
})
$('a[href $=".doc"]').css({
'text-decoration':'none',
'background':'url(images/word_icon.gif) no-repeat',
'padding-left':'20px'
})
//==== Basic Filter Selectors ====這是JQ家的寫法，用索引值，所以從0開始
//根據索引值,找到要控制的元素(標籤)
//練習一
//將E4的背景色，設定成紫色 background-color:purple
//先指定特定table，然後往下找到所要的td
//eq是「等於」之意
$('.simpleTable>tbody>tr>td:eq(4)').css('background-color','purple')
//也可以寫成這樣：$('.simpleTable>>>td:eq(4)').css('background-color','purple')
//將A0-C2的背景色，設定成黃色 background-color:yellow
//lt代表小於，也就是小於3的td(不包含3)
$('.simpleTable>tbody>tr>td:lt(3)').css('background-color','yellow')
//將G6-I8的背景色，設定成橘色 background-color:orange
//gt代表大於，也就是大於5的td(不包含5)
$('.simpleTable>tbody>tr>td:gt(5)').css('background-color','orange')
//練習二
//先將上面的練習都注解掉
// 將偶數格A0,C2,E4,G6,I8的背景色，設定成黃色 background-color:yellow
$('.simpleTable>tbody>tr>td:even').css('background-color','yellow')//從0開始的偶數
//將數格B1,D3,F5,H7的背景色，設定成橘色 background-color:orange
$('.simpleTable>tbody>tr>td:odd').css('background-color','orange')
//=============================
//==== Child Filter Selectors ====這是CSS家的寫法，沒有索引值觀念，所以從1開始
//跟父元素有關，(2)代表第二筆的意思(不是索引，所以不是第三筆)
$('.simpleTable td:first-child').css('background-color','yellow')//.simpleTable底下每一個tr中的第一個td
$('.simpleTable td:last-child').css('background-color','orange')
$('.simpleTable td:nth-child(2)').css('background-color','pink')
$('.simpleTable tr:nth-child(even)').css('background-color','yellow')//even是偶數，是眼睛看到的偶數而非從0開始
$('.simpleTable tr:nth-child(odd)').css('background-color','orange')
$('.simpleTable tr:nth-child(3n)').css('background-color','pink')
//=============================
});
</script>
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
