JavaScript 中级笔记 第三章

2017年02月06日 25 阅读

3，作用域 所有的面向对象的语言都有某种形式的作用域，JavaScript也不例外。在JavaScript里，作用域是由函数划分的，而不是由块（while，if之类的）来划分的。 我们先来看一个简单的作用域的例子。 var foo = "a"; //设置全局变量foo if（true）{ var foo = "b";//在if块中，把foo的值改为b，注意：此时还在全局作用域中 } alert（foo）; [Ctrl+A 全选 注:如需引入外部J...

JavaScript 中级笔记 第四章 闭包

2017年02月06日 27 阅读

5，闭包 闭包意味着内层的函数可以引用存在于包围它的函数内的变量，即使外层函数的执行已经终止。 让我们先来看一个闭包的例子。 function add（num）{ return function（toAdd）{ return num+toAdd; //代码① } } var addFive = add（5）; //此时addFive为function（toAdd）{return num+toAdd;} var count = addFive（3）; /...

JavaScript 中级笔记 第五章 面向对象的基础

2017年02月06日 26 阅读

一，面向对象的基础 对象是JavaScript的基础。从最基本的层次上说，对象是一系列属性的集合。 1,对象的创建 //创建一个新的Object对象，存放在obj变量中 var obj1 = new Object（）; //设置属性 obj1.value = 5; obj1.click = function（）{ alert（"Hello"）; } //另一种方式定义一个对象，以键值（key/value）的方式定义属性 var obj2 = { val...

IE与Firefox在JavaScript上的7个不同写法小结

2017年02月06日 29 阅读

在这篇文章中，作者介绍了7个在IE和Firefox中不同的JavaScript句法。 1. CSS "float" 值 访问一个给定CSS 值的最基本句法是： object.style.property ，使用驼峰写法来替换有连接符的值，例如，访问某个ID为"header"的<div>的background-color 值，我们使用如下句法： document.getElementById（"header"）.style.backgroundC...

MooTools 1.2介绍

2017年02月06日 26 阅读

MooTools 1.2 JavaScript库介绍 MooTools 1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩展。例如，CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事件……），MooTools让这一切变得非常容易。 另外，MooTools还有各种各样的非常好的扩展，可以让你不只是改变...

Mootools 1.2教程（2） DOM选择器

2017年02月06日 29 阅读

如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程（1）——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。 今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。 基本的方法 $（）; $函数是MooTools中基本的选择器。你可以...

Mootools 1.2教程（3） 数组使用简介

2017年02月06日 24 阅读

今天，我们在来看看如何使用数组来管理DOM元素。基本方法 .each（）; 在处理数组时，.each（）;方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素，如果有需要还可以对其中的元素进行任何逻辑处理。例如，我们可以假设你需要为页面中的每个div对象调用alert方法： 参考代码： 复制代码 代码如下: $$（"div"）.each（function（） { alert（"a div"）; }）; 如果使用下面的HTML代码，上面的Jav...

Mootools 1.2教程 函数

2017年02月06日 26 阅读

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲，请先查看上一篇教程《Mootools 1.2教程（3）——数组使用简介》。今天我们先不讲MooTools，而是讲一讲JavaScript中的函数（function）的基本知识。 但是，为了符合MooTools这个主题，你需要知道在哪里该使用MooTools的函数。此前，我们已经在我们的所有示例代码中，把代码都放在domready方法中。当我们需要把它放在domready的外面时，我们使用了函...

Mootools 1.2教程 事件处理

2017年02月06日 28 阅读

今天我们开始第五讲，在上一讲（《Mootools 1.2教程（4）——函数》）中，我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似，事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素，你需要去决定什么行为来触发什么效果。先把效果留着以后在讲，我们首先看一看中间步骤和一些常见的事件。 左键单击事件 左键单击事件是web开发中最常见的事件。超链接识别点击事件，然后把你带到另外一个URL地址。MooTo...

通过Mootools 1.2来操纵HTML DOM元素

2017年02月06日 27 阅读

我们已经学习过如何来选取DOM元素，怎么创建数组，怎么创建函数，怎么把事件添加到元素，今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常容易。 基本方法 .get（）; 这个工具可以让你获取元素的属性（property）。元素的属性是组成一个HTML元素的各种不同部分，例如src、value、name等等。使用.get（）;方法非常简单：...

Mootools 1.2教程 设置和获取样式表属性

2017年02月06日 29 阅读

欢迎开始这一系列的教程的第七讲。今天，我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式，这将给你在UI上带来很大的控制权。处理样式非常简单，不过今天我们要做一些调整。例如，我们要介绍键值对（key-value pair）对象。我们也会讲到在domready之外来传递变量，就像我们在关于函数的那一讲中学到的一样。从这里开始，我们会开始慢慢提高难度，介绍一些必要的编程概念。如果你是JavaScript新手或者第一次开始学MooToo...

Mootools 1.2教程 输入过滤第一部分（数字）

2017年02月06日 28 阅读

注意：JavaScript中的输入过滤只是为了保证（客户端）代码顺利执行，并不能替代服务器端的字符串过滤来保护你的应用程序不被注入攻击。 在第四讲的最后的一个例子中，我们从文本输入框获取RGB值，然后使用它们来改变页面背景色，今天我们首先来看看那个例子的部分代码，并以此展开我们这一讲。 rgbToHex（） 从技术上讲，rgbToHex（）方法实际上是属于Array集合的。由于它是一个来处理数字的数组方法，我们今天来学习一下这个方法。从功能上来讲，rgbT...

Mootools 1.2教程 输入过滤第二部分（字符串）

2017年02月06日 26 阅读

我们会在以后另外用一讲来将一下正则表达式的基本知识和在MooTools下的使用。 在开始之前，我想先花一点时间来看一下字符串函数是怎么调用的。在我的例子中，我是在字符串变量上面直接调用这个方法的，就像下面的这样： 参考代码： 复制代码 代码如下: var my_text_variable = "Heres some text"; // 结果 字符串变量 方法名 var result_of_function = my_text_variable.someSt...

Mootools 1.2教程 Fx.Tween的使用

2017年02月06日 27 阅读

和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极“炫”的效果——可以很平滑地发生形变动画，从而改善你的用户体验。 Tween的快捷方法 我们通常都从“基本知识”入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用起来都极其简单以至于我忍不住要从这里开始。 .tween（）; 一个渐变（tween）是一个在两个样式属性值之间的平滑的变化。举个例子，...

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

2017年02月06日 28 阅读

我们将学习如何使用Fx.Morph（它从本质上可以让你同时渐变多个样式表属性），然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项，最后我们将看看如何使用Fx事件，譬如“onComplete”和“onStart”。通过这些选项和事件，我们可以获得更好的控制权来控制形变动画。 Fx.Morph 创建一个新的Fx.Morph 初始化一个新的形变和创建一个新的渐变很类似，除了你要指定多个样式属性以外。 参考代码： 复制代码 代码如下: //...

MooTools 1.2中的Drag.Move来实现拖放

2017年02月06日 26 阅读

它的使用和我们见过的其他的插件类似：首先你使用“new”关键字来创建一个Drag.Move对象并赋值给一个变量，然后你再定义你的选项和事件。这就是全部要做的事情，不过你一定要注意一下下面的例子中描述的IE的CSS怪异现象。 基本用法 Drag.Move 创建你自己的拖动对象非常的容易。稍微看一下下面的例子就行了。注意一下我们是怎么把我们的Drag.Move对象的选项和事件从我们的Drag选项和事件中分离出来的。Drag.Move类扩展了Drag类，因此它可...

Mootools 1.2教程 正则表达式

2017年02月06日 26 阅读

如果你还不熟悉怎么使用正则表达式（regular expression（regex）），我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接，尤其是文章结尾“更多学习”部分的链接。我们今天只是讲一讲正则表达式最基本的用法，正则表达式能做的远远超过我们今天所讲的内容。 基本用法 test（）方法 它的简单在于，一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为RegExp对象提供了它自己的test（）方法，MooTools...

Mootools 1.2教程 定时器和哈希简介

2017年02月06日 27 阅读

定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面，hash则是键值对（key/value）的集合。如果你对hash还不熟悉现在也不要着急——我们今天就会做一个快速简要的介绍，并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样，一旦你看到它的正确用法，它使用起来就非常的简单，并且不可思议的有用。 .periodical（）函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical（）;，...

Mootools 1.2教程 滚动条（Slider）

2017年02月06日 27 阅读

尽管滚动条（Slider）遵循这个熟悉的模式，但是任然还有一点特殊的地方。 基本用法 创建一个新的滚动条（Slider）对象 我们首先从HTML和CSS开始。基本的想法是创建一个滚动条的div，因此是一个长的长方形（长度取决于我们用滚动条做什么），还有一个子元素作为滑块。 参考代码：复制代码 代码如下: <div id="slider"><div id="knob"></div></div> 我们的CSS也...

Mootools 1.2教程 排序类和方法简介

2017年02月06日 27 阅读

Sortables类还提供了包括一个名叫“serialize”的优秀方法，通过这个方法你额可以把这些元素的id作为数组输出——对于服务器端的开发非常有用。接下来，我们看看如何创建一个新的排序项集合，还有一定要看一下最后的演示实例。 基本知识 创建一个新的Sortable对象 首先，我们要把我们要排序的元素赋值给变量。对于Sortables来说，如果你想要多个列表之间的元素能够在相互之间拖拽，你需要把这些元素全部都放在一个数组中，就像这样： 参考代码： 复制...