网页设计实例教程陈旭东孙永芳崔为花张晓诺10章节.pptVIP

本章内容 10.1 JQuery介绍 10.2 JQuery访问页面对象 10.3 JQuery中事件的使用 10.4 JQuery应用实例 10.1 JQuery介绍 10.1.1 什么是JQuery 10.1.2 为什么选用JQuery 10.1.3 如何使用JQuery 10.1.1 什么是JQuery jQuery是一套Javascript脚本库。类似于我们学其他编程语言所调用的类库一样，将一些方法和对象封装在类库中，方便用户使用。脚本库能够帮助我们完成编码逻辑，实现业务功能。使用JQuery将极大的提高编写javascript代码的效率，让写出来的代码更加优雅、更加健壮。同时网络上丰富的jQuery插件也让我们的工作变的轻松多了--因为我们已经站在巨人的肩膀上了。 jQuery有如下特点： 1．提供了强大的功能函数 使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。 2．解决浏览器兼容性问题 3．实现丰富的UI jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验。 10.1.2 为什么选用JQuery 在网络上可以找到多种Javascript框架，种类千差万别，良莠不齐，即便是顶尖级的库也各有千秋。JQuery库的优点如下： 轻量级：与许多竞争者相比，它的体积要小得多，也就是说，使用JQuery的网站加载速度更快。 活跃度开发社区：开发人员有问题可以在论坛上求助，且可以很快得到回复。另外，还可以有哪些信誉好的足球投注网站社区文档资料，查看是否属于常见问题。 插件架构：如果要使用JQuery中没有提供的功能，很可能有人已编写好一个插件了。插件的另一个好处是，只有在需要的时候才将其添加到网站中，即不必再每个页面中都加载它。 速度：即使在由竞争者所发起的速度测试中，JQuery亦能生出（参见：/slickspeed/）。 初级开发人员容易掌握：JQuery的选择查询基于CSS，因此，非全职专业程序员也能轻松运用JQuery来为其网站添加功能，使其按期望的方式工作。 基于上述理由，JQuery已成为时下最流行的Javascript框架之一。 10.1.3 如何使用JQuery 首先到网络上下载JQuery类库，官方网站为：/，可以下载到必威体育精装版版本。然后将JQuery放置到站点之内，再在页面内引入即可使用了。可参考如下步骤： （1）Dreamweaver站点设置，站点名为stuweb，对应的磁盘目录可以任意； （2）新建目录scripts，将下载的JQuery放入该目录中。 （3）新建html文件，引入JQuery类库， 设置完成后，打开Dreamweaver文件面板，如图10-1所示： 图10-1 JQuery开发环境设置 10.2 JQuery访问页面对象 10.2.1 按ID属性值访问html元素 10.2.2 按name属性值访问html元素 10.2.3 按HTML标记名访问 10.2.1 按ID属性值访问html元素 使用JQuery访问HTML元素都使用$符号开始，区别在于参数的写法。按ID属性值访问HTML控件的基本语法如下： $(“#ID”) script type=text/javascript function checkinput() { var txt = $(#logname).val(); if (txt == ) { $(#errormsg).html(请输入用户名); return false; } } function clearmsg() { $(#errormsg).html(); } /script 10.2.1 按ID属性值访问html元素 【实例解说】 这是验证输入字段的程序，本例中以JQuery的方法实现。访问logname输入框内容的Javascript语句是var txt = $(#logname).val()；向errormsg层元素中输出提示信息的语句是$(#errormsg).html(请输入用户名)。 在JQuery中，一般都不用获取HTML控件的引用，而是直接对其中的某种属性进行操作。如果确实需要获得某个控件的对象引用，如上例，可将函数checkinput()改为如下写法： function checkinput() { var obj = $(#logname)[0]; if (ob