使用JS&jQuery改善用户体验

第一章  JavaScript基本语法

 

一、运算符

运算符就是完成操作的一系列符号，它有七类：

赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&,<<,>>,~,^)和字符串运算符(+)。

可能很多人不知道"==="是什么。

在这里，我为大家解释一下，在javascript中，“=="是等同运算符。

 

等同运算符的比较规则：

当两个运算数的类型不同时：将他们转换成相同的类型

1)一个数字与一个字符串，字符串转换成数字之后，进行比较。

2)true转换为1、false转换为0，进行比较。

3)一个对象、数组、函数 与 一个数字或字符串，对象、数组、函数转换为原始类型的值，然后进行比较。(先使用valueOf,如果不行就使用toString)

4)其他类型的组合不星等。

 

想两个运算数类型相同，或转换成相同类型后：

1)2个字符串：同一位置上的字符相等，2个字符串就相同。

2)2个数字：2个数字相同，就相同。如果一个是NaN,或两个都是NaN,则不相同。

3)2个都是true，或者2个都是false，则相同。

4)2个引用的是同一个对象、函数、数组，则他们相等，如果引用的不是同一个对象、函数、数组，则不相同，即使这2个对象、函数、数组可以转换成完全相等的原始值。

5)2个null，或者2个都是未定义的，那么他们相等。

“===”是全同运算符，全同运算符遵循等同运算符的比较规则，但是它不对运算数进行类型转换，当两个运算数的类型不同时，返回false;只有当两个运算数的类型相同的时候，才遵循等同运算符的比较规则进行比较。

例如：null==undefined 会返回真 , 但是null===undefined 就会返回假！

 

二、表达式

运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。

 

三、语句

Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是：

赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do while循环语句、break循环中止语句、continue循环中断语句、with语句、try...catch语句、

if语句（if..else，if...else if ...）、let语句。

 

四、函数

函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点：

1）函数由关键字function定义（也可由Function构造函数构造）。

2）使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的必须定义后才能被调用。

3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名。

4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过arguments对象（arguments对象是一个伪数组，属性callee引用被调用的函数）访问所有参数。

5）return语句用于返回表达式的值。

6）yield语句扔出一个表达式，并且中断函数执行直到下一次调用next。

 

五、一般的函数都是以下格式：

代码如下:

function myFunction(params){

//执行的语句

}

 

六、函数表达式：

代码如下:

var myFunction=function(params){

//执行的语句

}

 

代码如下:

var myFunction = function(){

//执行的语句

}

 

代码如下:

myFunction();//调用函数

匿名函数，它常作为参数在其他函数间传递

 

代码如下:

window.addEventListener('load',function(){

//执行的语句

},false);

 

七、对象

Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。

一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。

 

八、事件

用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户的动作所引发，如：用户按鼠标的按键，就产生click事件，若鼠标的指针在链接上移动，就产生mouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。

而对事件的处理，W3C的方法是用addEventListener()函数，它有三个参数：事件，引发的函数，是否使用事件捕捉。为了安全性，建议将第三个参数始终设置为false；

传统的方法就是定义元素的on...事件，它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。javascript中事件还分捕获和冒泡两个阶段，但是传统绑定只支持冒泡事件。

 

九、变量

如 var myVariable = "some value";

变量有它的类型，上例中myVariable的类型为string（字符串）

 

javascript支持的常用类型还有：

object：对象

array：数组

number：数字

boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的

null：一个空值，唯一的值是null

undefined：没有定义和赋值的变量

实际上javascript的变量是弱变量类型，你赋值给他的是字符串，他就是String .

是数字他就是整形。是true和false他就是boolean型（注意，不能加引号，不然会被当成字符串处理）。

 

十、补充

with关键字用法 --简化代码用：

 开域语句,表示在with语句中的任何表达式的所属对象或者是类都由with后紧跟的变量所代表  

 功能：为一段程序建立默认对象。简化代码<br>   

 <br>格式：  

 <br>with (<对象>){  

 <br>　　<语句组>  

 <br>｝  

   

 <Script>  

 with (document) {  

     write ("<br><Li>限时抢购物品：");  

     write ("<Li>ViewSonic 17" 显示器。");  

     write ("<Li>EPSON 打印机。");  

 }  

 document.write ("<br>---------------");  

 document.write ("<Li>限时抢购物品：");  

 document.write ("<Li>ViewSonic 17" 显示器。");  

 document.write ("<Li>EPSON 打印机。");  

 </Script>  

 

逻辑运算优先级

 

 

 

 

第二章  JavaScript函数和事件

 

一、JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname() { 这里是要执行的代码 }

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

 

二、调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2) { 这里是要执行的代码 }

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

实例

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button> <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script>

亲自试一试

上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。

函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：

实例

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button> <button onclick="myFunction('Bob','Builder')">点击这里</button>

亲自试一试

根据您点击的不同的按钮，上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

 

三、带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction() { var x=5; return x; }

上面的函数会返回值 5。

注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数：

实例

计算两个数字的乘积，并返回结果：

function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 将是：

12

亲自试一试

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

function myFunction(a,b) { if (a>b) {   return;   } x=a+b }

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

 

四、局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

 

五、全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

 

六、JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

 

七、向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

 

八、补充

监听事件

浏览器会根据某些操作触发对应事件，如果我们需要针对某种事件进行处理，则需要监听这个事件。监听事件的方法主要有以下几种：

HTML 内联属性（避免使用）

HTML 元素里面直接填写事件有关属性，属性值为 JavaScript 代码，即可在触发该事件的时候，执行属性值的内容。

例如：

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

onclick 属性表示触发 click，属性值的内容（JavaScript 代码）会在单击该 HTML 节点时执行。

显而易见，使用这种方法，JavaScript 代码与 HTML 代码耦合在了一起，不便于维护和开发。所以除非在必须使用的情况（例如统计链接点击数据）下，尽量避免使用这种方法。

 

DOM 属性绑定

也可以直接设置 DOM 属性来指定某个事件对应的处理函数，这个方法比较简单：

element.onclick = function(event){    alert('你点击了这个按钮'); };

上面代码就是监听 element 节点的 click 事件。它比较简单易懂，而且有较好的兼容性。但是也有缺陷，因为直接赋值给对应属性，如果你在后面代码中再次为 element 绑定一个回调函数，会覆盖掉之前回调函数的内容。

虽然也可以用一些方法实现多个绑定，但还是推荐下面的标准事件监听函数。

 

使用事件监听函数

标准的事件监听函数如下：

element.addEventListener(<event-name>, <callback>, <use-capture>);

表示在 element 这个对象上面添加一个事件监听器，当监听到有 <event-name> 事件发生的时候，调用 <callback> 这个回调函数。至于 <use-capture> 这个参数，表示该事件监听是在“捕获”阶段中监听（设置为 true）还是在“冒泡”阶段中监听（设置为 false）。关于捕获和冒泡，我们会在下面讲解。

用标准事件监听函数改写上面的例子：

var btn = document.getElementsByTagName('button'); btn[0].addEventListener('click', function() {    alert('你点击了这个按钮'); }, false);

 

移除事件监听

当我们为某个元素绑定了一个事件，每次触发这个事件的时候，都会执行事件绑定的回调函数。如果我们想解除绑定，需要使用 removeEventListener 方法：

element.removeEventListener(<event-name>, <callback>, <use-capture>);

需要注意的是，绑定事件时的回调函数不能是匿名函数，必须是一个声明的函数，因为解除事件绑定时需要传递这个回调函数的引用，才可以断开绑定。例如：

var fun = function() {    // function logic }; element.addEventListener('click', fun, false); element.removeEventListener('click', fun, false);