[教程] 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(){}的方式以便于代码的阅读，但是不建议这样使用。