DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery入門必備的基本認識及實例(整理)
jquery入門必備的基本認識及實例(整理)
編輯:JQuery特效代碼     
1.Juqery是javascript的優秀框架。它是輕量級的js庫,它兼容CSS3,還兼容各種浏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支持IE6/7/8浏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX交互。

jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需定義id即可。

當用jQuery2.0的框架,通過上面這段話我想說的是如果有些代碼在eclipse運行不出來,說明裡面浏覽器內核太低,只要在高版本的浏覽器下面就能顯示效果。

2.jQuery 庫包含以下特性:
· HTML 元素選取
· HTML 元素操作
· CSS 操作
· HTML 事件函數
· JavaScript 特效和動畫
· HTML DOM 遍歷和修改
· AJAX
· Utilities
3.Google 和 Microsoft 對 jQuery 的支持都很好。
如果您不願意在自己的計算機上存放 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() 函數,隱藏當前的 HTML 元素。
$("#test").hide() / /讀取id
演示 jQuery hide() 函數,隱藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函數,隱藏所有 <p> 元素。 //這樣可以直接讀取標簽
$(".test").hide()
演示 jQuery hide() 函數,隱藏所有 class="test" 的元素。 //讀取class的元素節點

Jquery的選擇器有很多種:jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色:
實例
. 代碼如下:
$("p").css("background-color","red");


jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函數 綁定函數至 $(document).ready(function) 將函數綁定到文檔的就緒事件(當文檔完成加載時) $(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件 $(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件 $(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件 $(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved