[教程] JSLite 01 介绍

728 查看

简介

  1. JSLite 是一个 JavaScript 库。
  2. JSLite 极大地简化了 JavaScript 编程。
  3. JSLite 只针对先进浏览器支持(HTML5,CSS3)移动端浏览器编写。
  4. JSLite 使用js新方法实现jQuery API,因此体积更小、效率更高。
  5. JSLite 与jQuery有着类似的api,通用库只有5-10k,手机上每一kb都是钱。
  6. JSLite 的 API 完全仿照 jQuery ,所以很容易学习,而且还添加了一些新的API。
  7. JSLite 希望尽可能的使用原生简单标准的函数方法实现,推进前端开发标准对于攻城师来说,人人有责。

官方网站

官方网站http://JSLite.io

JSLite 特性

未来有更多特性,需要您的加入^_^!

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
节点效果(展示隐藏)
HTML DOM 遍历和修改
AJAX

页面添加 JSLite 库

JSLite 库位于一个 JavaScript 文件中,其中包含了所有的 JSLite 函数。
可以通过下面的标记把 JSLite 添加到网页中:

html<head>
<script type="text/javascript" src="JSLite.js"></script>
</head>

请注意,<script> 标签应该位于页面的 <head> 部分。

基础 JSLite 实例

下面的例子演示了 JSLite 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。

html<html>
<head>
<script type="text/javascript" src="JSLite.js"></script>


<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });
</script>


</head>

<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

下载 JSLite

可从从 JSLite.io 跳转到github上下载,最新打包好的。

安装 JSLite

如需使用 JSLite,您需要下载 JSLite 库(会在下面为您讲解),然后把它包含在希望使用的网页中。
JSLite 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

html<head>
<script src="JSLite.js"></script>
</head>

您将学到什么

在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 JSLite 应用 JavaScript 效果。
JSLite 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。
基本上,您将学习到如何选取 HTML 元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

您需要具备的基础知识

在您开始学习 JSLite 之前,您应该对以下知识有基本的了解:

HTML
CSS
JavaScript

JSLite 参考手册