jQuery是一種基於JavaScript庫的快速、小型而且特別豐富的JavaScript庫。它極大地簡化了HTML文檔遍歷和操作、事件處理、動畫效果和AJAX交互等功能。jQuery中的各種動畫函數可以讓我們輕鬆地為網頁添加各種各樣的動畫效果,同時讓網頁更加生動和有趣。本文將通過一些簡單的代碼示例,來介紹如何使用jQuery編寫簡單的動畫效果。
一、選擇器選取
在jQuery中,可以使用CSS選擇器來選取HTML元素,然後對這些元素進行操作。以下是一些常用的CSS選擇器:
– 類選擇器:通過類名來選取HTML元素
$(".className")
– ID選擇器:通過ID來選取HTML元素
$("#idName")
下面以class選擇器為例,來實現一個點擊按鈕讓文字變色的效果:
jQuery動畫 .change {
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 20px;
}
.btn {
display: block;
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #ccc;
border: none;
outline: none;
cursor: pointer;
}
$(document).ready(function(){
$(".btn").click(function(){
$(".change").css("color","#f00");
});
});
點擊按鈕,文字變紅
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/254058.html