概述
jQuery - 概述
什么是 jQuery？
jQuery 是一種快速簡潔的 JavaScript 庫，由 John Resig 在 2006 年創(chuàng)建，它的理念很好——用更少的代碼，實現(xiàn)更多的功能。
jQuery 簡化了 HTML 文檔遍歷、事件處理、動畫以及 Ajax 交互，用于快速 web 開發(fā)。
jQuery 是一個 JavaScript 工具包，旨在通過編寫更少的代碼來簡化各種任務(wù)。這是 jQuery 支持的重要的核心特性列表 ——
-
DOM 操作 —— jQuery 通過使用被稱為 Sizzle 的跨瀏覽器的開源選擇器引擎，使得選擇 DOM 元素，遍歷它們以及修改它們的內(nèi)容變得容易。
-
事件處理 —— jQuery 提供一種優(yōu)雅的方式來捕獲各種事件，如用戶點擊一個鏈接，不需要使用事件處理程序來編寫雜亂的 HTML 代碼。
-
AJAX 支持 —— jQuery 能夠為你使用 AJAX 技術(shù)開發(fā)響應(yīng)的和功能豐富的網(wǎng)站提供很多幫助。
-
動畫 —— jQuery 有很多內(nèi)置的動畫效果，你可以在你的網(wǎng)站中使用它們。
-
輕量級 —— jQuery 是非常輕量級的庫 —— 大約 19 kb 大小(壓縮格式)。
-
跨瀏覽器支持 —— jQuery 跨瀏覽器支持，可以在 IE 6.0 +，F(xiàn)F 2.0 +，Safari 3.0 +，Chrome，Opera 9.0 + 瀏覽器上很好的工作。
- 最新的技術(shù) —— jQuery 支持 CSS3 選擇器和基本的 XPath 語法。
如何使用 jQuery ？
有兩種方式來使用 jQuery。
-
本地安裝 —— 你可以在本地計算機上下載 jQuery 庫，并把它包括在你的 HTML 代碼中。
- 基于 CDN 版本 —— 你可以直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)將 jQuery 庫包括進你的 HTML 代碼中。
本地安裝
-
進入 https://jquery.com/download/ 網(wǎng)頁來下載最新的可用的版本。
- 現(xiàn)在下載 jquery-2.1.3.min.js 文件到你的網(wǎng)站目錄中，如 /jquery。
示例
現(xiàn)在你可以把 jQuery 庫包括進你的 HTML 文件中，如下所示 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
基于 CDN 版本
你可以直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)將 jQuery 庫包括進你的 HTML 代碼中。谷歌和微軟為最新的版本提供了內(nèi)容發(fā)布。
在本教程中，我們使用的是 Google CDN 版本庫。
示例
現(xiàn)在讓我們使用來自 Google CDN 的 jQuery 庫重新編寫上述例子。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>這會產(chǎn)生如下所示的結(jié)果 ——
如何調(diào)用一個 jQuery 庫函數(shù)？
正如我們所做的任何事一樣，在使用 jQuery 讀取或操作文檔對象模型(DOM)，我們需要確保當(dāng) DOM 準(zhǔn)備好后要盡快的開始添加事件等。
如果你想使一個事件在你的頁面上工作，你應(yīng)該在 $(document).ready() 函數(shù)內(nèi)部調(diào)用它。在 DOM 下載完成后以及頁面內(nèi)容下載前，該函數(shù)內(nèi)部的所有事物都將要下載。
要想實現(xiàn)這一功能，我們?yōu)槲臋n注冊了一個已經(jīng)準(zhǔn)備好的事件，如下所示 ——
$(document).ready(function() {
// do stuff when DOM is ready
});要想調(diào)用上述任何 jQuery 庫函數(shù)，使用 HTML 腳本標(biāo)簽，如下所示 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id="mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
如何使用自定義腳本？
最好在自定義的 JavaScript 文件：custom.js 中編寫我們的自定義代碼，如下所示 ——
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});現(xiàn)在我們可以把 custom.js 文件包括到 HTML 文件中，如下所示 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/custom.js"></script>
</head>
<body>
<div id="mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果 ——
使用多個庫 ——
你可以同時使用多個庫而且每個庫之間不會發(fā)生沖突。例如你可以同時使用 jQuery 和 MooTool javascript 庫。
更多細節(jié)，你可以查看 jQuery noConflict 方法。
接下來的內(nèi)容
即使你對上述示例不是很理解的話，也不要太擔(dān)心。在隨后的章節(jié)中，你會很快掌握它們。
下一節(jié)將講解一些傳統(tǒng)的 JavaScript 的基本概念。
更多建議：