本篇教程介绍了jQuery教程 如何制作网页交互特效，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

1、        JavaScript（弱类型语言）：是一种描述性语言，也是一种基于对象（Object）和事件驱动(Event Driven)的,并具有安全性能的脚本语言。




特点：1、主要用来在HTML页面中添加交互行为。
         2、是一种脚本语言，语法和Java类似。
         3、一般用于编写客户端的脚本。
         4、是一种解释性语言，边执行边解释。




2、        JavaScript的组成：




组成：1、ECMAScript标准：规定了脚本语言的标准，主要描述：语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象，是一个描述，规定了语言脚本的所有属性、方法和对象的标准，在使用web客户端脚本语言编码时一定要遵守此标准；
         2、浏览器对象模型（Browser Object Model）（BOM）：提供独立于内容与浏览器进行交互的对象；
         3、文档对象模型（Document Object Model）（DOM）：访问和操纵HTML文档；




组成：
 




3、        JavaScript的基本结构：




语法：
       <script type="text/javascript">
                 JavaScript 语句;
       </script >
注：type是<scrip>标签的属性，用于指定文本使用的语言类别为text/javascript
    有的网页中默认type="text/javascript"，这种写法是正确的，因为HTML5中可以省略type属性HTML5默为"text/javascript"；




JavaScript：写入 HTML 输出: document.write("内容");
  注：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可；
       建议放在</body>的前面；




4、        JavaScript的执行原理：




 
分析：★浏览器客户端向服务器发送请求：一个用户浏览器的地址输入要访问的页面（页面中包含JavaScript程序）；
      ★数据处理：服务端将某个包含JavaScript的页面进行处理；
      ★发送响应：服务端将包含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上到下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户；




使用客户端脚本的好处：
     ●包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信；
     ●JavaScript程序由浏览器客户端执行，而不是由服务器执行，因此能减轻服务器的压力；




网页中引用JavaScript的方式：
          ●内部JavaScript 文件：直接使用<script>标签将JavaScript代码加入HTML文档中；
          ●使用外部JavaScript 文件；
                     eg：<script src="export.js"  type="text/javascript"></script>
          ●直接在HTML标签中；
                     eg：<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
          注：alert("输出语句")，提示对话框:prompt( ”提示语句”, 给的默认值)：单引号 双引号都可以
三种方式的应用场合：
      ●内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面；
      ●外部js文件则适用于代码较多，重复应用于多个页面；
      ●直接在HTML标签中写JavaScript则适用于极少代码，仅用于当前标签，会增加代码，很少使用；




5、        JavaScript核心语法：




变量(变量名区分大小写)：
◆var －  用于声明变量的关键字；
      ◆变量可以不经声明而直接使用，
             但这种方法很容易出错，也很难查找排错，不推荐使用
      ●先声明变量再赋值
            eg： var   width;
                    width = 5;
      ●同时声明和赋值变量：
            eg：var catName= "皮皮";
                   var x, y, z = 10;
      ●不声明直接赋值：
            eg：width=5;
数据类型：

●undefined（未定义类型）：

            eg：var width；变量width没有初始值，将被赋予值undefined

●null（空类型）：表示一个空值，与undefined值相等
●number（数值类型）：

             eg：var iNum=23;   //整数
                    var iNum=23.0;   //浮点数

●boolean（布尔类型）：true和false；


●String（字符串类型）：一组被引号（单引号或双引号）括起来的文本；

              eg；var string1="This is a string";
 




typeof运算符：typeof检测变量的返回值：
语法：typeof（变量或值）
 typeof运算符返回值如下
    undefined：变量被声明后，但未被赋值
    String：用单引号或双引号来声明的字符串
    boolean：true或false
    number：整数或浮点数
    object：javascript中的对象、数组和null
 
运算符号：
     ===表示恒等（严格比较，数据类型不匹配就返回false）；
     ！==表示不恒等；
 
 




String对象:

●字符串对象.length

            Eg:var str="this is JavaScript";
                  var strLength=str.length;    //长度是18
方法的调用：
        ●字符串对象.方法名();
 




方法名称


说      明




charAt(index)


返回在指定位置的字符




indexOf(str，index)


查找某个指定的字符串在字符串中首次出现的位置，找到返回索引值，否则返回-1




substring(index1，index2)


返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符




split(str)


将字符串分割为字符串数组




toLowerCase（）


将字符串转换为大写




toUpperCase()


将字符串转换为小写








数组：

●创建数组语法：

               eg： var  数组名称 = new Array(size);//Array：数组的关键字；size：表示数组中可存放的元素总数

●为数组赋值：声明数组时可以为数组元素直接赋值；

             //赋值方式1：
                  eg：var fruit= new Array("apple", "orange", " peach","banana");
            //赋值方式2：
                    eg：var fruit=new Array(1);
                             fruit[0]=”apple”;
            //赋值方式3：
                    eg：var fruit= ["apple", "orange", " peach","banana"];
         ●访问数组元素：
                     数组名[下标]
  ●数组的常用属性和方法：




类别


描述




属性


设置或返回数组中元素的数目




方法


把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔




对数组排序




向数组末尾添加一个或更多 元素，并返回新的长度




更多方法可查阅JavaScrpt Array对象参考手册：//www.w3school.com.cn/js/jsref_obj_array.asp




 




逻辑控制语句：




 if条件语句
     if(条件)
{
        //JavaScript代码;
}
else
{
        //JavaScript代码;
}
 
switch多分支语句
switch (表达式){    
case 常量1 : 
       //JavaScript语句1;
     break;
   case 常量2 : 
      //JavaScript语句2;
     break;
      ...
   default : 
       //JavaScript语句3;    
}
 
 for循环语句
  for(初始化;  条件;  增量)
 {
          JavaScript代码; }
 
do-while循环语句
do 
 {
          JavaScript代码;
} while(条件)
 
while循环语句
while(条件)
 {
          JavaScript代码;
}
 
 
for-in循环
    语法：
        for(变量 in 对象){
             //JavaSacript语句；
          }
Eg：
var fruit=[ "apple", "orange", "peach","banana"];
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}
结果：
 
 
中断循环：
◆break：
    立刻退出整个循环；
◆continue：
   退出当前循环，
    进入下一次循环；
 

注释：
   单行注释以 // 开始，以行末结束
   多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释；


常用的输入/输出：
  警告：alert()
         alert("提示信息");
     注意：console.log()；建议使用此方法打印；
 提示：prompt()：弹出一个提示你对话框，
         等待用户输入一行数据；
eg：三种方式：
   prompt("提示信息",
  "输入框的默认信息");
   prompt("请输入你喜欢的颜色","红色");
   prompt("请输入你喜欢的颜色","");
   prompt("请输入你喜欢的颜色");
       注：（第二个参数省略会显示undefined）
 
语法约定：
 1、代码区分大小写：
     ★JavaScript的关键字，永远都是小写；eg：for、if；
     ★内置对象；eg：Date、Math都是以大写字母开头；
     ★对象名通常都小写；
 2、变量、对象和函数的名称：
     ★名称可以包括大小写字母、数字、下划线、美元符号；
     ★但是必须以字母、下划线、美元符号（$）开头；
3、 分号：
      ★JavaScript运行开发这自行决定是否以分号结束一行代码；
      ★如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾；
 

JavaScript关键字和保留字：
●不能把关键字、保留字、true、false和null用作标识符。
●js中的关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。
以下就是ECMAScription的全部关键字（带*号上标的是第5版新增的关键字）：
                break、else、new、var、 case、  finally 、 return、 void 、
  catch  、for  
                switch 、 while 、 continue、 
  function  、this 、 with 、default
  、 if 
                throw 、 delete 、 in 、 
  try 、do 、 instranceof、  typeof、debugger*
●ECMA还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途，但它们有可能将来被用作关键字。
下面是ECMA第3版定义的全部保留字：
                 abstract 、 enum   、int 、 short 、 boolean  、export  、interface、  static  
                 byte 
  、extends 、 long 、
  super 、 char 、 final  、native  、synchronized 
                 class 
  、float 、 package  、throws 、 const  、goto  、private 、transient  
                debugger 、 implements  、protected 、 volatile 、 double  、import  、public
●第5版把在非严格模式下运行时的保留字缩减为下列这些：
                 class、enum、extends、super、const、export、import
●在严格模式下，第5版还对以下保留字施加了限制：
                    implements、package、public、interface、private、static、let、protected、yield
注：let和yield是第5版新增的保留字；其他保留字都是第3版定义的





6、       
程序调试：




Chrome开发工具的八个模块：
Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。
Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。
Audits 标签页：用于优化前端页面，加速网页加载速度等。
Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。






  






 


Chrome开发人员工具五个图标代表的含义：
⑴、停止断点调试
⑵、单步调试，不进入函数体内部
⑶、单步调试，进入函数体内部
⑷、跳出当前函数
⑸、禁用所有的断点，不做任何调试






  






 


alert()方法：可以通过此方法将不确定的数据信息以信息框的方式展示，以此来判断出现错误的位置；


7、       
函数： 




  函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
  使用更简单：不用定义属于某个类，直接使用
  函数分类：系统函数和自定义函数






  






 


系统函数：
  parseInt ("字符串")：将字符串转换为整型数字
       如: parseInt
  ("86")将字符串“86“转换为整型值86
  parseFloat("字符串")：将字符串转换为浮点型数字
       如:
  parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
   isNaN()： 用于检查其参数是否是非数字






  






 


自定义函数：
1、定义函数：
  语法：
     function 函数名(参数1,参数2,参数3,…){  
       // function 是定义函数关键字必须存在；参数可有可无：有参函数和无参函数；
   
         //JavaScript语句
   
          [return 返回值]         //可有可无；return用来规定函数返回的值；
}                            //{}定义了函数的开始和结束；
2、调用函数：函数调用一般和表单元素的事件一起使用；
调用格式：事件名＝ "函数名( )" ;






  






 













8、       
变量的作用域：全局变量和局部变量；
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！