這幾天在流灠有關於 Blogger 的網站, 總是有人談到 jQuery ，雖然本身在工作上是使用 ExtJS 2.1作為企業內的開發，但底層仍是 jQuery ， 那到底什麼是 jQuery 呢? 它有什麼媚力呢? 若你有到 jQuery 的網站看的話, 就可以知道, 它開宗明義就有說明:
jQuery The Write Less, Do More !! jQuery is a new type of JavaScript library.
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
意思就是說:
jQuery 是一套 JavaScript 的 Library
jQuery 主要是用在 HTML 上 DOM 文件的操作，它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」，在快速選取元素上可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。
以下是一個完整的HTML實例，您可以Copy/Paste去跑看看，讓您更能瞭解 jQuery 的威力，至於所需要的 jQuery 可以到 jQuery 去下載，目前最新版為 1.2.6 ：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 1.2.6 Demo</title>
<script type="text/javascript" src='jQuery-1.2.6.js'> => 載入 jQuery 的 Java Script Library
</script>
<style type="text/css">
.changeStyle {
background-color: blue;
color: #FFFFFF;
}
.content1 {
background-color: red;
}
</style>
<script type="text/javascript">
/**
* jQuery 基本函數練習
*/
// 函數說明: $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素,
// 後面接著的 .addClass("changeStyle") 就是將所有的 div 都加上 changeStyle 的 Style 的 class
function fDiv(){
$("div").addClass("changeStyle");
}
// 函數說明: 選取 id 為 first 的元素都加上 changeStyle 的 Style 的 class
function fDivFirst(){
$("div#first").addClass("changeStyle");
}
// 函數說明: 選取 body 的元素都加上 changeStyle 的 Style 的 class
function fBody(){
$("body").addClass("changeStyle");
}
// 函數說明: 選取 h2 的元素都加上 changeStyle 的 Style 的 class
function fHeader(){
$("h2").addClass("changeStyle");
}
// 函數說明: 選取 class 為 content1 的 <div> 所包住的所有下層的 <p>
function fContent1P(){
$("div.content1 p").addClass("changeStyle");
}
// 函數說明: 選取 body 的元素, 並移除 changeStyle 的 Style 的 class
function fRemoveBodyClass(){
$("body").removeClass("changeStyle");
}
// 函數說明: 選取所有 div 的元素, 並移除 changeStyle 的 Style 的 class
function fRemoveDivClass(){
$("div").removeClass("changeStyle");
}
</script>
</head>
<body>
<!-- 以下 <button ...> </button...> 作為事件觸發時, 所要作的事項 -->
<button onclick="fDiv()"> 選取所有 div 的 selector </button>
<button onclick="fDivFirst()"> 選取 div id 為 first </button>
<button onclick="fHeader()"> 選取 h2 的 Header </button>
<button onclick="fContent1P()"> 選取content1 的 Paragraph </button>
<button onclick="fBody()"> Change Body Background Color </button>
<button onclick="fRemoveBodyClass()"> Remove Body Class </button>
<button onclick="fRemoveDivClass()"> Remove Div Class </button> <br>
<!-- 以下為 HTML 的本體 -->
<h2>Header H2</h2> <br>
<div id="first">
Hello World !! Polin Wei 這是第一個 div id = first
<div class="content1">
<p>
jQuery 是一個 Java Script Liberary
</p>
</div>
</div>
<h3>Header H3</h3>
<br>
<div id="second">
Why jQuery? 這是第二個 div id = second
</div>
<div id="content2">
<p>
jQuery 主要是用在 HTML 上 DOM 文件的操作，它可以快速且簡單的「選取元素(Element)」並且在這 DOM 的元素上「做一些事情」，在快速選取元素上可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示...等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。
</p>
</div>
</body>
</html>
沒有留言:
張貼留言