jquery入門必備的基本認(rèn)識及實例(整理)
更新時間:2013年06月24日 10:14:17 作者:
本文整理了一些jquery入門必備的基本知識及相關(guān)實例,適合初學(xué)者學(xué)習(xí),另附一些jquery的常用事件,感興趣的各位可不要錯過了哈
1.Juqery是javascript的優(yōu)秀框架。它是輕量級的js庫,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果,并且方便地為網(wǎng)站提供AJAX交互。
jQuery還有一個比較大的優(yōu)勢是,它的文檔說明很全,而且各種應(yīng)用也說得很詳細(xì),同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離,也就是說,不用再在html里面插入一堆js來調(diào)用命令了,只需定義id即可。
當(dāng)用jQuery2.0的框架,通過上面這段話我想說的是如果有些代碼在eclipse運(yùn)行不出來,說明里面瀏覽器內(nèi)核太低,只要在高版本的瀏覽器下面就能顯示效果。
2.jQuery 庫包含以下特性:
· HTML 元素選取
· HTML 元素操作
· CSS 操作
· HTML 事件函數(shù)
· JavaScript 特效和動畫
· HTML DOM 遍歷和修改
· AJAX
· Utilities
3.Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不愿意在自己的計算機(jī)上存放 jQuery 庫,那么可以從 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>
基本語法:
jQuery 語法實例
$(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 選擇器來選取 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 元素的背景顏色更改為紅色:
實例
$("p").css("background-color","red");
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
jQuery還有一個比較大的優(yōu)勢是,它的文檔說明很全,而且各種應(yīng)用也說得很詳細(xì),同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離,也就是說,不用再在html里面插入一堆js來調(diào)用命令了,只需定義id即可。
當(dāng)用jQuery2.0的框架,通過上面這段話我想說的是如果有些代碼在eclipse運(yùn)行不出來,說明里面瀏覽器內(nèi)核太低,只要在高版本的瀏覽器下面就能顯示效果。
2.jQuery 庫包含以下特性:
· HTML 元素選取
· HTML 元素操作
· CSS 操作
· HTML 事件函數(shù)
· JavaScript 特效和動畫
· HTML DOM 遍歷和修改
· AJAX
· Utilities
3.Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不愿意在自己的計算機(jī)上存放 jQuery 庫,那么可以從 Google 或 Microsoft 加載 CDN jQuery 核心文件。
使用 Google 的 CDN
復(fù)制代碼 代碼如下:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
復(fù)制代碼 代碼如下:
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
基本語法:
jQuery 語法實例
$(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 選擇器來選取 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 元素的背景顏色更改為紅色:
實例
復(fù)制代碼 代碼如下:
$("p").css("background-color","red");
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函數(shù) | 綁定函數(shù)至 |
$(document).ready(function) | 將函數(shù)綁定到文檔的就緒事件(當(dāng)文檔完成加載時) |
$(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個小技巧總結(jié)
本篇文章主要是對jquery操作復(fù)選框(checkbox)的12個小技巧進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery和css3實現(xiàn)的炫酷時尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后,內(nèi)容頁面向內(nèi)移動顯示菜單項。當(dāng)單擊關(guān)閉菜單按鈕時,菜單項隱藏,內(nèi)容頁恢復(fù)原位2014-09-09jquery 將當(dāng)前時間轉(zhuǎn)換成yyyymmdd格式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 將當(dāng)前時間轉(zhuǎn)換成yyyymmdd格式的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考2016-06-06jQuery控制li上下循環(huán)滾動插件用法實例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動插件用法,結(jié)合實例形式分析了jQuery循環(huán)滾動插件的實現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽,但是要保持里面的內(nèi)容不被刪除,本文提供的這個jquery方法就可以簡單實現(xiàn)。2014-04-04