jquery入門(mén)必備的基本認(rèn)識(shí)及實(shí)例(整理)
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是,它的文檔說(shuō)明很全,而且各種應(yīng)用也說(shuō)得很詳細(xì),同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離,也就是說(shuō),不用再在html里面插入一堆js來(lái)調(diào)用命令了,只需定義id即可。
當(dāng)用jQuery2.0的框架,通過(guò)上面這段話我想說(shuō)的是如果有些代碼在eclipse運(yùn)行不出來(lái),說(shuō)明里面瀏覽器內(nèi)核太低,只要在高版本的瀏覽器下面就能顯示效果。
2.jQuery 庫(kù)包含以下特性:
· HTML 元素選取
· HTML 元素操作
· CSS 操作
· HTML 事件函數(shù)
· JavaScript 特效和動(dòng)畫(huà)
· HTML DOM 遍歷和修改
· AJAX
· Utilities
3.Google 和 Microsoft 對(duì) jQuery 的支持都很好。
如果您不愿意在自己的計(jì)算機(jī)上存放 jQuery 庫(kù),那么可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件。
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
基本語(yǔ)法:
jQuery 語(yǔ)法實(shí)例
$(this).hide()
演示 jQuery hide() 函數(shù),隱藏當(dāng)前的 HTML 元素。
$("#test").hide() / /讀取id
演示 jQuery hide() 函數(shù),隱藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函數(shù),隱藏所有 <p> 元素。 //這樣可以直接讀取標(biāo)簽
$(".test").hide()
演示 jQuery hide() 函數(shù),隱藏所有 class="test" 的元素。 //讀取class的元素節(jié)點(diǎn)
Jquery的選擇器有很多種:jQuery 元素選擇器
jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色:
實(shí)例
$("p").css("background-color","red");
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
| Event 函數(shù) | 綁定函數(shù)至 |
| $(document).ready(function) | 將函數(shù)綁定到文檔的就緒事件(當(dāng)文檔完成加載時(shí)) |
| $(selector).click(function) | 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件 |
| $(selector).dblclick(function) | 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件 |
| $(selector).mouseover(function) | 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件 |
- jquery validate.js表單驗(yàn)證的基本用法入門(mén)
- jQuery LigerUI 使用教程入門(mén)篇
- JQuery入門(mén)—編寫(xiě)一個(gè)簡(jiǎn)單的JQuery應(yīng)用案例
- jquery Mobile入門(mén)—多頁(yè)面切換示例學(xué)習(xí)
- jquery Mobile入門(mén)—外部鏈接切換示例代碼
- JQuery入門(mén)——事件切換之toggle()方法應(yīng)用介紹
- JQuery入門(mén)——事件切換之hover()方法應(yīng)用介紹
- JQuery入門(mén)——用bind方法綁定事件處理函數(shù)應(yīng)用介紹
- jQuery的幾個(gè)我們必須了解的特點(diǎn)
相關(guān)文章
jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼,涉及jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
這篇文章主要介紹了兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果,需要的朋友可以參考下2014-10-10
基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)
這篇文章主要介紹了基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)的方法和示例,有需要的小伙伴可以參考下2015-06-06
jQuery常用數(shù)據(jù)處理方法小結(jié)
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實(shí)例總結(jié)了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
jquery動(dòng)態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
這里我只是隨便做了下,上面是照片列表和兩個(gè)按鈕,單擊小圖片下面顯示大圖片,當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁(yè),上一頁(yè)的圖片。2011-08-08
jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法,需要的朋友可以參考下2014-06-06

