jQuery和基本jQuery動畫簡介 作者：守護者
我本打算講一個完全不同的主題，但是由於我的上一個教程是關於SASS / SCSS的，所以決定，我最好繼續進行此領域的工作，並在jQuery上進行簡短的撰寫。眾所周知，jQuery是Java的頂級庫之一。Java不僅是一種有用的語言，而且與那裡的其他程式語言相比，它也要容易得多。簡而言之，jQuery使它更加優雅和方便。現在讓我們舉一個簡單的例子：
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html: charset=utf-8' /> <title>jQuery</title> <script type='text/javascript' src='jquery.js'></script> </head> <body> <input type='button' value='Don\'t touch' id='btn' /> </body> </html> 上面的HTML僅包含一個輸入欄位。假設一旦按鈕被按下，我們希望發生一些事情。請注意，我們需要在客戶端完成此操作。仍然適用（但不推薦）的舊方法是使用內聯Javascript事件監聽器，如下所示：
<input type='button' value='Don\'t touch' id='btn' onClick='alert(0);' /> 這種方法的問題在於，我們需要專門在HTML中指定偵聽特定事件的事件以及事件發生後的處理方式。在程式設計中，這是真正的壞習慣，而在HTML中，這是更糟糕的做法。因此，更好的選擇是讓其他使用者監聽頁面上的任何事件（例如，一個BigBrother監視所有事件）。在這種情況下，根本不需要更改HTML，從正面來看，我們可以在實時執行中新增或刪除此類內容（聽或不聽）。因此，讓我們看看如何使用jQuery實現這一目標。
$('#btn').click(function(){ alert(0); }); 美元符號稱為選擇器（我將在後面說明）。我們選擇幾乎是“ btn”的ID，然後使用lambda（匿名）函式對其執行點選操作。對於那些不知道匿名函式是誰的人來說，這是一個之前從未宣告過的函式，這是我們第一次使用它而不為其命名。基本上，這可能有效或無效。這取決於是否已載入DOM。如果由於某種原因首先載入了按鈕，則可以使用。但是由於指令碼是在輸入欄位上方定義的，因此它不能真正選擇它，因為它根本不存在，因此該動作將不會發生。在某些情況下，事情會以相反的方式發生，但是它們很少存在。
為了解決這個問題，我們可以很容易地在HTML下面編寫指令碼，但是，這不是一個好主意，因此不應付諸實踐。您也可以將onLoad事件用於body標籤，但是具有相同的邏輯。在那種情況下，jQuery有一個名為ready（）的特殊功能。我們透過以下方式使用它：
$(document).ready(function(){ $('#btn').click(function(){ alert(0); }); }); 這意味著一旦文件被載入，此函式範圍內的程式碼將僅在那時執行。要檢視是否已選擇ID，可以檢查控制檯，但在此之前，請執行以下操作：
var a = $('#btn'); console.log(a); 如果選擇正確，您將獲得[div＃content]。選擇一個元素的目的是操縱它。一旦獲得它，我們就有權使用大量的內建功能。因此，假設我們要修改整個HTML頁面。我們可以這樣做：
a.html('random text'); 那麼document.getElementById（）和使用jQuery選擇id之間有什麼區別？主要區別在於使用純Javascript（如果要選擇），比如說所有具有“名稱”類的元素，則必須編寫迴圈，檢查等。使用jQuery時，我們可以一行完成。
$('.name'); 其他一些示例選擇器如下：
$('*') 全部選擇。整個檔案的內容。
$('code, #id_example, .class_example') 組合選擇器。如果我們要獲取所有具有id的元素-id_example和所有具有名稱class_example的類，則可以用逗號分隔它們。
讓我們採用以下HTML程式碼段，以更好地視覺化正在發生的事情。當我們要選擇列表元素時，我們將編寫以下內容：
$('li:last') 從一組有序/無序列表中分別選擇最後一個元素。
$('li:not(li:first)') 從一組有序/無序列表中選擇所有列表元素，第一個除外。
$('li:even') 從位置為偶數的一組有序/無序列表中選擇所有列表元素。
$('li:odd') 從位置為奇數的一組有序/無序列表中選擇所有列表元素。
$('li:eq(1)') 從位置等於一個的一組有序/無序列表中選擇所有列表元素。
$('li:gt(2)') 從位置大於兩個的有序/無序列表組中選擇所有列表元素。
$('li:lt(2)') 從位置小於兩個的有序/無序列表組中選擇所有列表元素。
$(':header') 選擇所有標題標籤。這些措施包括<h1>，<h2>，<h3>，<h4>，<h5>和<h6>。
$('li:has(a)') 從一組有標籤的有序/無序列表中選擇所有列表元素。
$('p:parent') 選擇段落的父元素。
現在，要完成本教程，我們需要將它們付諸實踐。我們的想法是使用jQuery製作有效的動畫，因此我們首先假設這是我們的HTML文件，其中包含位於幾個divs中的兩個影象。
<script type='text/javascript' src='js/jquery.js'></script><script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
第一個檔案是jQuery庫本身，第二個檔案是我已決定使用的過渡效果外掛。您可以從此處下載。而且，不要忘記我們的樣式表，它們實際上將對齊元素並賦予它們更好的外觀。
body { background-color: #000; } .b, .c { width: 70px; heigh: 70px; border: none; opacity: 0.4; margin-top: 50px; padding-left: 40px; } #menu { margin: 100px auto auto auto; width: 500px; height: 200px; } #abs { width: 200px; height: 100px; position: absolute; left: 50px; top: 200px; } 我們要對影象進行的處理是應用一種效果，該效果將使它們上下反彈，上下左右移動等等。為了實現這一點，我們應該依賴animate（）函式，該函式幾乎是jQuery動畫效果的核心。有一些自定義函式，例如fadeOut（），fadeIn（）等，但僅限於其引數和功能。首先，正如我在本教程前面所指出的那樣，我們需要使用ready（）函式檢查文件的可用性。
$(document).ready(function(){}); 其中一個事件將在懸停狀態下發生，而另一事件將在單擊狀態下發生。為了使籃球球彈起，我們假設以下內容：我們將首先選擇該類並將其附加到變數中，以便更輕鬆地使用它。
var button = $('.b'); 現在我們需要對其進行動畫處理（請記住，'b'類擁有我們的籃球形象）。
button.hover(function(){ $(this).stop().animate({ opacity: 1, marginTop: '0px' }, 800); 由於我們已經指定了20畫素的頁面空白，因此現在將其取回，以使影象上升。opacity屬性也是如此。懸停按鈕時要應用的功能指定了兩個屬性，並允許在800毫秒的時間表內進行此操作。這是一秒的80％（換句話說，1000毫秒將是一整秒）。
所述止動件（）函式防止多個懸停迫使影象輸入號碼的動畫（）迭代。簡而言之，如果我們省略了stop（）函式，那麼一旦將滑鼠懸停多次，影象就會不斷地上下移動（這很煩人）。到目前為止，我們僅對第一個效果應用了動畫，這意味著一旦滑鼠不再位於影象上方，我們仍然需要將球放下。
function(){ $(this).stop().animate({ opacity: 0.6, marginTop: '50px' }, 800, "easeOutBounce"); }); }); 通常，如我們在上面的示例中所做的那樣，我們使用stop（）函式繞過任何不必要的重複，並將margin-top屬性更改為50個畫素，這會將球移至文件中的原始位置。現在，“ easeOutBounce”作為引數與動畫的發生時間一起發揮作用。緩動外掛附帶了許多過渡效果，但我選擇了此效果，以便在返回初始狀態時實現反彈效果。
像上面這樣結合以上所有內容：
$(document).ready(function(){ var button = $('.b'); button.hover(function(){ $(this).stop().animate({ opacity: 1, marginTop: '0px' }, 800); }, function(){ $(this).stop().animate({ opacity: 0.6, marginTop: '50px' }, 800, "easeOutBounce"); }); }); 正如我們希望的那樣，最終為籃球球帶來了不錯的效果。因此，現在對於足球影象，我們想像將其踢起一樣向上和向左移動。因此，讓我們準備好ready（）函式：
$(document).ready(function(){ $('#abs').click(move); }); 並對影象進行動畫處理，如下所示：
function move(){ $('#abs').animate({ left:'+=50px', top:'-=30px' }, 300); } 函式move（）正在為div元素選擇abs ID，並將animate（）函式以及一些規範應用於該元素。在+ =意味著影象將與50個畫素的左右移動，每次也將保持其流傳至今的距離。top屬性也是如此。由於底部屬性對此不起作用，因此我們對頂部屬性使用負值。