jQuery是一款廣泛使用的JavaScript庫,它使得JavaScript編寫變得更加容易。其中最為常用的一個函數就是$。
在jQuery中,$是最為重要的函數,它有以下幾個作用:
// 選取元素 $(element) // 執行函數 $(function() { // Code here }); // 遍歷數組(這個是很早以前的用法了) $.each(array, function(index, value) {}); // 創建元素 $(''); // 添加事件監聽器 $(element).on('event', function() {}); // AJAX請求 $.ajax({ url: 'path/to/ajax', type: 'POST', data: { key: 'value' } });
在上述代碼中,$的作用主要有五個:
1. 選取元素
$函數最為基礎的作用就是選取HTML元素。以$(element)為例,element可以是元素名、類名、ID、DOM元素或者一個包含多個DOM元素的數組。例如:
$(document) // 選取整個文檔對象 $('#id') // 選取ID為id的元素 $('.class') // 選取類名為class的元素 $('div') // 選取所有的div元素 $('') // 創建一個新的div元素
2. 執行函數
$(function() { // Code here })語法用于在頁面完全加載后執行一個函數。它與window.onload()的作用相似,但$(function(){})可以同時執行多個函數。
3. 遍歷數組
在jQuery早期的版本中,$.each(array, function(index, value){})語法主要用于遍歷一個數組,其中index表示當前遍歷的元素的下標,value表示當前遍歷的元素的值。例子:
$.each(['a', 'b', 'c'], function(index, value){ console.log(index, value); }); // 輸出: // 0 "a" // 1 "b" // 2 "c"
4. 創建元素
使用$('
')語法可以很方便的創建一個新的DOM元素,例如:$('', { 'id': 'foo', // 設置ID 'class': 'bar', // 設置類名 'title': 'baz', // 設置標題 'text': 'hello' // 設置文本內容 });
5. 添加事件監聽器
在jQuery中,使用.on()函數可以添加一個事件監聽器。例如:
$(element).on('event', function(){ // Code here }); // 例如: $('button').on('click', function(){ alert('Hello jQuery!'); });
6. AJAX請求
$函數可以使用$.ajax()函數來進行AJAX請求,具體的參數可以參考jQuery官方文檔。