JQuery_基本語法和特效

基本語法：

$("HTML元素").action()

例項:
  $(this).hide(); 隱藏當前元素

  $("p").hide();   隱藏所有段落

  $("p.test").hide();   隱藏所有 class="test"的段落

  $("#test").hide();   隱藏所有id="test"的元素

文件就緒函式

$(document).ready(function(){

--------
});

這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼。

下面是兩種假如文件完全載入之前執行函式的話，操作失敗的情況：

?試圖隱藏一個不存在的元素。
?獲得未完全載入的影象的大小。

.divcss{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}

jQuery 元素選擇器

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

$("p") 選取 元素。

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

$("p#demo") 選取 id="demo" 的第一個 元素。

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");

更多例項

$(this) 當前 HTML 元素
$("p") 所有 元素
$("p.intro") 所有 class="intro" 的 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一個元素
$("ul li:first") 每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']") 所有帶有以 ".jpg" 結尾的 href 屬性的屬性
("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件函式

jQuery 事件處理函式是 jQuery 中的核心函式。
事件處理函式是當 HTML 中發生事件時自動被呼叫的函式。
由“事件”（event）“觸發”（triggered）是經常被用到的術語。

jQuery 名稱衝突

jQuery 使用 $ 符號作為 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函式（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名為 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。

jQuery 事件

下面是 jQuery 中事件函式的一些例子：

$(document).ready(function) 文件的就緒事件（當 HTML 文件就緒可用）
$(selector).click(function) 被選元素的點選事件
$(selector).dblclick(function) 被選元素的雙擊事件
$(selector).focus(function) 被選元素的獲得焦點事件
$(selector).mouseover(function) 被選元素的滑鼠懸停事件

jQuery 隱藏和顯示

通過 hide() 和 show() 兩個函式，jQuery 支援對 HTML 元素的隱藏和顯示：
hide() 和 show() 都可以設定兩個可選引數：speed 和 callback。
callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱
speed 引數可以設定這些值："slow", "fast", "normal" 或 milliseconds

jQuery 切換

jQuery toggle() 函式使用 show() 或 hide() 函式來切換 HTML 元素的可見狀態。
隱藏顯示的元素，顯示隱藏的元素。
speed 引數可以設定這些值："slow", "fast", "normal" 或 milliseconds

jQuery 滑動函式

- slideDown, slideUp, slideToggle

jQuery 擁有以下滑動函式：

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

peed 引數可以設定這些值："slow", "fast", "normal" 或毫秒。
callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。

jQuery Fade 函式

- fadeIn(), fadeOut(), fadeTo()

jQuery 擁有以下 fade 函式：

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

peed 引數可以設定這些值："slow", "fast", "normal" 或毫秒。
fadeTo() 函式中的 opacity 引數規定減弱到給定的不透明度。
allback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。

jQuery 自定義動畫

jQuery 函式建立自定義動畫的語法：

$(selector).animate({params},[duration],[easing],[callback])關鍵的引數是 params。
它定義了產生動畫的屬性。可以同時設定多個此類屬性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二個引數是 duration。它定義用來應用於動畫的時間。
它設定的值是："slow", "fast", "normal" 或毫秒。
HTML 元素預設是靜態定位，且無法移動。
如需使元素可以移動，請把 CSS 的 position 設定為 relative 或 absolute。

改變 HTML 內容

語法
$(selector).html(content)html()
函式改變所匹配的 HTML 元素的內容（innerHTML）。

新增 HTML 內容

語法
$(selector).append(content)append()
函式向所匹配的 HTML 元素內部追加內容。

語法
$(selector).after(content)after()
函式在所有匹配的元素之後插入 HTML 內容。

語法
$(selector).before(content)before()
函式在所有匹配的元素之前插入 HTML 內容。

jQuery CSS 操作

jQuery 擁有三種供 CSS 操作的重要函式：

?$(selector).css(name,value)
?$(selector).css({properties})
?$(selector).css(name)

CSS 操作例項

函式 css(name,value) 為所有匹配元素的給定 CSS 屬性設定值：

例項
$(selector).css(name,value)
$("p").css("background-color","yellow");

函式 css({properties}) 同時為所有匹配元素的一系列 CSS 屬性設定值：

例項
$(selector).css({properties})
$("p").css({"background-color":"yellow","font-size":"200%"});

函式 css(name) 返回指定的 CSS 屬性的值：

例項
$(selector).css(name)
$(this).css("background-color");

jQuery Size 操作

jQuery 擁有兩種供尺寸操作的重要函式：

?$(selector).height(value)
?$(selector).width(value)

Size 操作例項

函式 height(value) 設定所有匹配元素的高度：

例項
$(selector).height(value)
$("#id100").height("200px");

函式 width(value) 設定所有匹配元素的寬度：

例項
$(selector).width(value)
$("#id200").width("300px");

AJAX 和 jQuery

Query 的 load 函式是一種簡單的（但很強大的）AJAX 函式。它的語法如下：
$(selector).load(url,data,callback)
請使用選擇器來定義要改變的 HTML 元素，使用 url 引數來指定您的資料的 web 地址。
只有當您希望向伺服器傳送資料，才需要使用 data 引數。
只有當您需要在完畢之後觸發一個函式時，您才需要使用 callback 引數。

jQuery AJAX 請求

     請求                                   描述
$(selector).load(url,data,callback) 把遠端資料載入到被選的元素中
$.ajax(options) 把遠端資料載入到     XMLHttpRequest 物件中
$.get(url,data,callback,type)        使用 HTTP GET 來載入遠端資料
$.post(url,data,callback,type)       使用 HTTP POST 來載入遠端資料
$.getJSON(url,data,callback)         使用 HTTP GET 來載入遠端 JSON 資料
$.getScript(url,callback)            載入並執行遠端的 JavaScript 檔案

(selector) jQuery 元素選擇器語法

(url) 被載入的資料的 URL（地址）
(data) 傳送到伺服器的資料的鍵/值物件
(callback) 當資料被載入時，所執行的函式
(type) 被返回的資料的型別 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項

JQuery_基本語法和特效

相關文章