<!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">
</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 DOM</h3>
</div>
<!-- 每頁不同的內容從這裡開始 -->
<a href="jQuerySelectors.html">Selectors</a> | <a
href="jQueryFirst.html">First</a> | <a href="http://tw.yahoo.com">YAHOO</a>
| <a href="http://www.google.com.tw">Goggle</a>
<hr />
<input type="text" id="txtName" /><input type="button"
value="Click" id="buttonClick" /><span id="span1"></span> <br />
<select id="select1">
<option value="a">Item1</option>
<option value="b">Item2</option>
<option value="c">Item3</option>
<option value="d">Item4</option>
</select> <span id="span2"></span>
<hr />
<input type="button" value="check" id="buttonToggle" /><br />
<input type="checkbox" id="Toggle" />Toggle All<br />
checkbox中有一個屬性是checked，只要存在預設就會打勾，即使沒有屬性值也會勾
<input type="checkbox" value="a1" />A1
<input type="checkbox" value="a2" />A2
<input type="checkbox" value="a3" />A3
<input type="checkbox" value="a4" />A4
<input type="checkbox" value="a5" />A5
<input type="checkbox" value="a6" />A6
<hr />
<h1 id="myH">write less, do more</h1>
<!-- 每頁不同的內容到這裡結束 -->
</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() {
//設定txtName中的值
$('#txtName').val("guest");//val有參數，寫入,所以框框中會有預設值guest
$('#buttonClick').click(function() {
//將使用者輸入在txtName中的內容讀出顯示在span1中
//將使用者輸入在txtName中的內容讀出加上<h2>的標籤顯示在span1中
var v = $('#txtName').val();//val沒有參數，讀取
// $('#span1').text(v);//span1是框框旁邊的空間，將讀取到的資料v顯示在此
// $('#span1').text("<h2>"+v+"</h2>");//text標籤不會解讀html，顯示結果為：<h2>guest</h2>
$('#span1').html("<h2>" + v + "</h2>");//html才會解讀標籤
console.log($('#span1').html());//<h2>guest</h2>
console.log($('#span1').text());//guest
});
//----------------------------------------------------
$('#select1').change(function() {
//練習
//當使用者選取不同的select1項目時
//讀出此項目的索引值(index),文字(text),值(value)
//將這些資料顯示在span2的span中
//alert($(this).val());
// var v = $(this).val();
// var t = $("#select1>:selected").text();
// var i = $("#select1>:selected").index();
//--------------------------------------------
//因為上面有很多重覆的地方，所以建議改一下
var seled = $("#select1>:selected")
var v = $(this).val();
var t = seled.text();
var i = seled.index();
$('#span2').html(v + "," + t + "," + i);
});
//找到網頁上的連結標籤，加上target=_blank屬性
$('a[href ^="http"]').attr("target", '_blank')
//找到網頁上要連結到外部網站的連結標籤，加上target=_blank屬性
//attr() vs prop()
//console.log($(":checkbox:eq(0)").attr('checked'));
//console.log($(":checkbox:eq(1)").attr('checked'));
//console.log($(":checkbox:eq(2)").attr('checked'));
//console.log($(":checkbox:eq(3)").attr('checked'));
//console.log($(":checkbox:eq(4)").attr('checked'));
//console.log($(":checkbox:eq(5)").attr('checked'));
//console.log($(":checkbox:eq(0)").prop('checked'));
//console.log($(":checkbox:eq(1)").prop('checked'));
//console.log($(":checkbox:eq(2)").prop('checked'));
//console.log($(":checkbox:eq(3)").prop('checked'));
//console.log($(":checkbox:eq(4)").prop('checked'));
//console.log($(":checkbox:eq(5)").prop('checked'));
$('#buttonToggle').click(function() {
//切換所有checkbox的勾選狀態
//切換各自checkbox的勾選狀態
});
$('#Toggle').change(function() {
var b = $(this).prop('checked');
$(':checkbox').prop('checked', b);
});
//prepend() vs append() vs before() vs after()
//empty() vs remove()
});
</script>
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
