第1章了解jQuery.docVIP

第1章 了解jQuery 本章是全书的开篇，主要讲解jQuery的基本入门知识及jQuery的相关特点。随着互联网的迅速发展，在前台页面的用户体验需求越来越高。虽然JavaScript这种动态语言极大的灵活性导致了项目中每个人的代码风格截然不同，但是其在功能和浏览器的兼容性上并不能实现高标准、严要求。正是在这种情形下出现了jQuery，它能够帮助我们实现各种酷炫的页面效果而不用担心浏览器的兼容性。 1.1 认识jQuery 本节主要介绍jQuery的起源和jQuery到底是什么。 1.1.1 jQuery的起源 jQuery的起源要从JavaScript说起。JavaScript是网景公司在它自己的LiveScript基础上产生的。JavaScript的出现是前台脚本语言发展的一个里程碑。它是一种基于对象的事件驱动的解释性语言。它的实时性、跨平台、开发使用简单并且相对安全的特点决定了它在Web前台设计中的重要地位。 但是，随着浏览器种类的推陈出新，JavaScript的兼容性受到了挑战。对前台设计效果的要求越来越高，于是，JavaScript语言本身的设计能力变得捉襟见肘。2006年，美国人John Resigpath的支持更强大，一个$符就可以遍历文档中的各级元素。下面用一个示例来具体比较一下。 具体需求是这样的：在页面上有一个无序列表，我们需要将所有列表项中的文本内容提取出来并显示。效果如图1.1所示。 首先，我们来看一下JavaScript的实现。 1 html 2 head 3 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 4 title无标题文档/title 5 /head 6 body 7 ul 8 liList Item 1/li 9 liList Item 2/li 10 liList Item 3/li 11 liList Item 4/li 12 liList Item 5/li 13 /ul 14 script type=text/javascript 15 var listitems=document.getElementsByTagName(li); //获取所有列表项组成的数组 16 var str=; //定义保存文本内容的变量 17 for(i=0;ilistitems.length;i++) //循环数组元素 18 str+=listitems[i].firstChild.nodeValue;//提取列表项的文本内容 19 alert(str); //显示所有文本内容 20 /script 21/body 22/html 图1.1 JavaScript与jQuery的代码比较 通过上面的代码可以了解JavaScript实现这个功能的基本步骤：获取所有元素对象，通过遍历这些元素对象得到文本内容，然后显示。下面看一下jQuery的实现。 1 html 2 head 3 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 4 title无标题文档/title 5 script type=text/javascript src=jslib/jquery-1.6.js/script 6 script type=text/javascript 7 $(function(){alert($(li).text());}); //获取所有列表项的文本并输出 8 /script 9 /head 10body 11 ul 12 liList Item 1/li 13 liList Item 2/li 14 liList Item 3/li 15 liList Item 4/li 16 liList Item 5/li 17 /ul 18/body 19/html 两段代码相比较，可以发现使用jQuery处理简洁很多，代码量明显减少。jQuery实现中的第7行代码就是jQuery实现功能部分。 1.1.2 什么是jQuery jQuery是什么？在jQuery官方网站上是这样解释的：jQuery是一个快速简洁的JavaScript库，它可以简化HTML文档的元素遍历、事件处理、动画及Ajax交互，快速开发Web应用。它的设计是为了改变JavaScript程序的编写风格。jQuery特点如下。 （1）轻量型，jQuery是一个轻量型框架