Web前端基础——jQuery（一）

前几天回老家呆了几天，几乎没有怎么学习新的知识，这期间一直有断断续续的看《Java编程思想》，还刷了一些前沿消息，也算没闲着。今天开始学习jQuery啦，继续前进。

在网上查了，买了这本书。现在是一边搜视频，一边看这本书。

认识jQuery，我将从以下几方面进行讲解。

一、JavaScript和JavaScript库

随着Web 2.0的兴起，JavaScript受重视的程度提高，带动JavaScript程序库也蓬勃发展起来。

过程：Prototype—>Dojo—>jQuery—>Ext Js

JavaScript自身存在的3个弊端（摘录自 锋利的jQuery）：

1.复杂的文档对象模型（DOM)

2.不一致的浏览器实现和便捷开发

3.调试工具的缺乏

二、JavaScript库作用及对比

为了简化JavaScript的开发，JavaScript程序库诞生了，这就像Java封装了一些工具类的目的是差不多的。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的Web 2.0特性的富客户端页面，并且兼容各大浏览器。

1、Prototype

Prototype可以看作是把很多好的有用的JavaScript的方法组合在一起形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放自己的脚本里。但是由于Prototype成型年代较早，从整体上对面向对象的编程思想把握得不是很到位，导致其结构的松散。不过，现在也在慢慢改进。

2、Dojo

Dojo的强大之处在于它提供了很多其他JavaScript库所没有提供的功能。功能很强大，得到如IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档不齐全，最严重的是API不稳定，每次升级都有可能导致已有的程序失效。也在慢慢改进中。

3、YUI

YUI（Yahoo！UI，The Yahoo！User Interface Library），是由Yahoo公司开发的一套完备的扩展性良好的富于交互页面程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括几个核心的CSS文件。文档完善，代码规范。

4、Ext JS

Ext JS简称Ext，如今已经发展到可以用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于页面，本身计较臃肿。有时还并不是免费的。

5、MooTools

MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。Mootools的语法几乎和Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码只有8KB。可实现即使导入。另外，MooTools完全彻底的贯彻了面向对象的编程思想，语法简洁直观，文档完善。

6、jQuery

轻量级的库，拥有强大的选择器、出色的DOM操作。、可靠的事件处理、完善的兼容性和链式操作等功能。

jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。代码风格独特而优雅。

三、jQuery的优势

1、轻量级

2、强大的选择器

3、出色的DOM操作的封装

4、可靠的事件处理机制

5、完善的Ajax

6、不污染顶级变量

7、出色的浏览器兼容性

8、链式操作方式

9、隐式迭代

10、行为层与结构层的分离

11、丰富的插件支持

12、完善文档

13、开源

四、jQuery代码的编写

1.进入jQuery的官方网站http://jquery.com/，下载最新的jQuery库文档。

2.jQuery库类分为两种：生产版（最小化和压缩版）和开发版（未压缩版）。

名称	大小	说明
jquery.js（开发版）	约229 KB	完整无压缩版本，主要用于测试、学习和开发
jqusery.js（生产版）	约31 KB	经过工具压缩或经过服务器开启Gzip压缩 主要应用于产品和项目

3.jQuery不需要安装，把下载的jQuery.js放到网站上的一个公共的位置，想要用的jQuery的时候，只需要在相关的HTML文档中引入该库类文件的位置即可。

五、编写简单的jQuery代码

首先明确，在jQuery库中，$就是jQuery的一个简写形式。

比如：

$("#foo") 等价于jQuery("#foo")

$.ajax等价于jQuery.ajax

//页面加载的时候,执行一段代码
    //旧的写法
    $(document).ready(function (){
        alert("ok");
        });

    //新的写法
    $(function(){
        alert("页面加载了");
        });

    //也可以这样写的
    jQuery(function() {
        alert("加载了");
        });

上面的$(document)这个操作,是将一个dom对象,转成了一个jquery对象
思考：
它和 过去学的 onload 有什么区别？

// 过去的 onload
window.onload=function(){
     alert("页面加载了");
}

1) jquery的写法可以累计注册,不象load那样覆盖 这样可以保证写类库的时候不刷掉别人的

window.onload=function(){
      alert("onload一被调用了");
      }
window.onload=function(){
 alert("onload 二被调用了");
}
//这面的写法,只会执行到一个,如果是jquery,则两个都会秇行

2) onload是在所有Dom元素创建完毕,图片,Css等都加载后才能触发 而ready则只在dom 创建后就触发。jQuery 也可以实现 onload那种事件的调用时机。

$(window).load(function(){
   alert("类似onload方式的调用");
});

例子：

1.鼠标离开的时候,加个处理事件

<input type="text" name="userName" id="userName" /><label id="userName_msg"></label>
    $(function(){

    $("#userName").blur(function(){
    $("#userName_msg").html("请输入姓名,中文,3-9个字");
    $("#userName_msg").css('color',"red");
        });

    });

2.元素的显示和隐藏

<a href="#" id="hrefMenu">显示子菜单</a>
    <div id="divSubMenu">
        北京<br>
        上海<br>
        广州<br>
        深圳<br>
        宁波<br>
        哈尔滨<br>
        </div>

    $(function(){
        $("#hrefMenu").click(function(){
    //$("#divSubMenu").toggle("slow");  toggle 用于状态的切换
    //$("#divSubMenu").toggle(5000);
    });
    })