當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery快速入门

發(fā)布時(shí)間：2025/3/21 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery快速入门小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jquery快速入門

jQuery的作用：1.取得頁面中的元素；2.修改頁面的外觀；3.改變頁面的內(nèi)容；4.響應(yīng)用戶的頁面操作；5.為頁面添加動(dòng)態(tài)效果；6.無須刷新頁面即可從服務(wù)器獲取數(shù)據(jù)；7.簡化常見的js任務(wù)。

$是jquery專用的特殊符號(hào)，可以說所有jquery函數(shù)的調(diào)用都是從$開始的$()在jquery里面表示一個(gè)選擇器，括號(hào)里面填寫一定的表達(dá)式就可以選中你想要的元素，jquery的選擇器除了能很好地遵循css的表達(dá)式外，還額外提供了一些更個(gè)性化的選擇方式，比如$("div li:nth-child(2)")選中的是div中的第2個(gè)li元素。關(guān)于選擇器的更多用法可以百度一下jquery的api$(document)是一個(gè)選擇器，選中的是整個(gè)html所有元素的集合。$(function(){..})等于document.ready事件，即在頁面所有元素準(zhǔn)備完畢之后，載入頁面之前執(zhí)行本方法$()在jquery里面表示一個(gè)選擇器，括號(hào)里面填寫一定的表達(dá)式就可以選中你想要的元素，jquery的選擇器除了能很好地遵循css的表達(dá)式外，還額外提供了一些更個(gè)性化的選擇方式，比如$("div li:nth-child(2)")選中的是div中的第2個(gè)li元素。關(guān)于選擇器的更多用法可以百度一下jquery的api$(document)是一個(gè)選擇器，選中的是整個(gè)html所有元素的集合。$(function(){..})等于document.ready事件，即在頁面所有元素準(zhǔn)備完畢之后，載入頁面之前執(zhí)行本方法 ---------------------------------------------------------------------------------------------------------------------------------- ?

<html>

<head>

$(document).ready(function(){

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

$(this).hide();

});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

</body>

</html>

以上案例解釋：當(dāng)按鈕的點(diǎn)擊事件被觸發(fā)時(shí)調(diào)用相關(guān)函數(shù)。

$(document).ready(function)

這是為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼。

當(dāng) DOM（文檔對(duì)象模型）已經(jīng)加載，并且頁面（包括圖像）已經(jīng)完全呈現(xiàn)時(shí)，會(huì)發(fā)生 ready 事件。

由于該事件在文檔就緒后發(fā)生，因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法。正如上面的例子中那樣。

ready() 函數(shù)規(guī)定當(dāng) ready 事件發(fā)生時(shí)執(zhí)行的代碼。

ready() 函數(shù)僅能用于當(dāng)前文檔，因此無需選擇器。

----------------------------------------------------------------------------------------------------------------------------------------------

從此處開始，進(jìn)入jquery代碼快。

$("p").click(function(){}

jQuery 語法是為 HTML 元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。

基礎(chǔ)語法是：$(selector).action()

美元符號(hào)定義 jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作

----------------------------------------------------------------------------------------------------------------------------------

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 屬性選擇器

jQuery 使用 XPath 表達(dá)式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色：

實(shí)例

$("p").css("background-color","red");

ajax() 方法通過 HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。

該方法是 jQuery 底層 AJAX 實(shí)現(xiàn)。簡單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性。

最簡單的情況下，$.ajax() 可以不帶任何參數(shù)直接使用。

注意：所有的選項(xiàng)都可以通過 $.ajaxSetup() 函數(shù)來全局設(shè)置。

總結(jié)

以上是生活随笔為你收集整理的jQuery快速入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。