[教程] JSLite 02 基本語法

學習 JSLite 以前須要你有下面幾個方面的基本知識

HTML
CSS
JavaScript

JSLite 既然是模仿jQuery 的API天然語法是如出一轍的。只是方法的多少差異，和API裏面的代碼實現不同。

JSLite 語法實例

js$(this).hide()

演示 JSLite hide() 函數，隱藏當前的 HTML 元素。

js$("#test").hide()

演示 JSLite hide() 函數，隱藏 id="test" 的元素。

js$("p").hide()

演示 JSLite hide() 函數，隱藏全部 <p> 元素。

js$(".test").hide()

演示 JSLite hide() 函數，隱藏全部 class="test" 的元素。

JSLite 的基本語法

JSLite 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。
基礎語法是：$(selector).action()
美圓符號定義 JSLite

選擇符 (selector) 用來選擇某個HTML元素，其語法和CSS的selector語法同樣。
action() 定義操做該HTML元素的方法。

示例

js$(this).hide() //- 隱藏當前元素
$("p").hide() //- 隱藏全部段落
$(".test").hide() //- 隱藏全部 class="test" 的全部元素
$("#test").hide() //- 隱藏全部 id="test" 的元素

提示：JSLite 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

Ready事件處理

JSLite 以下的代碼：

js(document).ready(function(){  
  // JSLite methods go here...   
});

js$(document).ready(function(){
 // JSLite methods go here...
});

這爲Document Ready事件處理器以防止JSLite在頁面沒有完成載入前就執行。從而能夠避免下面相似狀況發生：

試圖隱藏還沒有建立好的元素
試圖獲取還沒有載入的圖片的大小

這個方法也可使用下面簡化的方法：

js$(function(){  
  // JSLite methods go here...   
});

js$(function(){
 // JSLite methods go here...
});

你能夠選擇你喜歡的方式，但一般仍是採用$(document).ready(function(){}的方式以便於代碼的閱讀，可是不建議這樣使用。