资讯专栏INFORMATION COLUMN

[教程] JSLite 02 基本语法

Imfan / 2888人阅读

摘要:学习之前需要你有下面几个方面的基本知识既然是模仿的自然语法是一模一样的。语法实例演示函数,隐藏当前的元素。的基本语法语法是为元素的选取编制的,可以对元素执行某些操作。在本教程接下来的章节,您将学习到更多有关选择器的语法。

学习 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() 函数,隐藏所有

元素。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91450.html

相关文章

  • [教程] JSLite 01 介绍

    摘要:极大地简化了编程。与有着类似的,通用库只有,手机上每一都是钱。可以通过下面的标记把添加到网页中请注意,标签应该位于页面的部分。 简介 JSLite 是一个 JavaScript 库。 JSLite 极大地简化了 JavaScript 编程。 JSLite 只针对先进浏览器支持(HTML5,CSS3)移动端浏览器编写。 JSLite 使用js新方法实现j...

    elva 评论0 收藏0
  • 仿效jQuery如何高效的写JSLite

    摘要:讨论和性能的文章并不罕见。快速渲染和响应意味着更好的用户体验。附加事件处理程序的首选方法。糟糕建议高效使用子查询缓存的父元素正如前面所提到的,遍历是一项昂贵的操作。糟糕建议高效避免通用选择符将通用选择符放到后代选择符中,性能非常糟糕。 讨论jQuery和javascript性能的文章并不罕见。然而,我计划根据他人对jQuery总结的一些速度方面的技巧和一些建议,来教你提升你的JSLit...

    PascalXie 评论0 收藏0
  • JSLite 与jQuery有着类似的api,模仿jQuery的语法规范,并不是100%的覆盖【官方

    摘要:与有着绝大部分类似的,通用库只有,手机上每一都是钱。目前及的最新版已经支持。在这个函数中,原来的对象是无效的。与方法相同,接受一个标准格式的字符串,并返回解析后的对象。这有点像,但是是相反的方式。 [JSLite.io] showImg(https://img.shields.io/github/issues/JSLite/JSLite.svg); showImg(https://im...

    Kyxy 评论0 收藏0
  • Grunt教程-前端自动化

    摘要:为何选择压缩编译单元测试代码检查等我们需要自动化,不必重复劳动,减小工作量。用于保存项目元数据。图像压缩模块。监视文件变动,做出相应动作。 为何选择Grunt? 压缩、编译、单元测试、代码检查等 我们需要自动化,不必重复劳动,减小工作量。为何选择Grunt呢?好像是没有更好的选择了。 准备工作 安装node.js Grunt基于Node.js,安装之前要先安装No...

    pingink 评论0 收藏0
  • 回味JS基础:call apply 与 bind

    摘要:使用方法调用匿名函数在下例中的循环体内,我们创建了一个匿名函数,然后通过调用该函数的方法,将每个数组元素作为指定的值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个方法,这个方法可以打印出各元素在数组中的正确索引号。 原文:回味JS基础:call apply 与 bind 在JavaScript中,call、apply和bind是Function对象自带的三个方法...

    plokmju88 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<