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