Jquery範例大全

以下是一些使用jQuery的常見示例：

1. 選取元素：

```javascript

$(document).ready(function(){

$("p").css("color", "red"); //選取所有的段落，並將文字顏色改為紅色

});

```

2. 事件處理：

```javascript

$(document).ready(function(){

$("button").click(function(){

alert("按鈕被點擊了！"); //當按鈕被點擊時，彈出警告框

});

});

```

3. 動畫效果：

```javascript

$(document).ready(function(){

$("div").fadeIn(5000); //將所有的div元素漸入，時間為5秒

});

```

4. 表單驗證：

```javascript

$(document).ready(function(){

$("form").submit(function(){

if($("input[name='email']").val() == "") {

alert("請輸入電子郵件地址！"); //如果電子郵件框為空，彈出警告框提示

return false; //阻止表單提交

}

});

});

```

5. 動畫過渡效果：

```javascript

$(document).ready(function(){

$("div").slideUp(2000).slideDown(2000); //將div元素向上滑動，停留2秒，再向下滑動，停留2秒

});

```

6. 圖片輪播：

```javascript

$(document).ready(function(){

var images = $("img"); //選取所有的圖片元素

var currentImageIndex = 0; //當前圖片的索引值，初始為0

setInterval(function(){ //設定每隔一段時間執行一次函式，例如每隔3秒執行一次

currentImageIndex = (currentImageIndex + 1) % images.length; //更新當前圖片的索引值，使其循環到最後一個圖片再回到第一個圖片，實現輪播效果

images.eq(currentImageIndex).fadeIn(2000); //將當前圖片元素淡入，其他圖片元素淡出，實現輪播動畫效果

}, 3000); //每隔3秒執行一次函式，這裡設定為3秒，可以根據需要調整時間間隔

});

```

這些示例只是jQuery的冰山一角，它提供了許多強大的功能和工具，可以幫助你創建各種互動式網頁。

以上就是【Jquery範例大全】的相關內容，敬請閱讀。