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> 元素。

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


更多實例

 $(this) 當前 HTML 元素
 $("p") 所有 <p> 元素
 $("p.intro") 所有 class="intro" 的 <p> 元素
 $(".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 請求的所有鍵/值對選項

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章