jquery入門必備的基本認(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)畫
· 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)懸停事件 |
相關(guān)文章
jquery操作復(fù)選框(checkbox)的12個(gè)小技巧總結(jié)
本篇文章主要是對(duì)jquery操作復(fù)選框(checkbox)的12個(gè)小技巧進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后,內(nèi)容頁(yè)面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí),菜單項(xiàng)隱藏,內(nèi)容頁(yè)恢復(fù)原位2014-09-09
jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考2016-06-06
jquery實(shí)現(xiàn)全屏滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全屏滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動(dòng)插件用法,結(jié)合實(shí)例形式分析了jQuery循環(huán)滾動(dòng)插件的實(shí)現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對(duì)jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時(shí)我們希望刪除這段html代碼里面的一對(duì)<p>標(biāo)簽,但是要保持里面的內(nèi)容不被刪除,本文提供的這個(gè)jquery方法就可以簡(jiǎn)單實(shí)現(xiàn)。2014-04-04

