《jQuery学习实例教材资料》由会员分享，可在线阅读，更多相关《jQuery学习实例教材资料（150页珍藏版）》请在金锄头文库上搜索。
1、（jQuery+EasyUI版） 2015年9月目 录第1章、jQuery及其开发环境11.1 J2EE开发环境简介11.2 安装Tomcat服务器11.3 安装MyEclipse61.4 导入和建立工程文件jQDemos101.5 添加和配置MyEclipse中的Tomcat6.x服务器141.6 部署jQDemos工程文件161.7 安装和生成emlab数据库191.8 SQL Server2008的网络配置20第2章、EasyUI基本表单控件23实例1. 创建EasyUI表单及常用控件。23实例2. EasyUI表单及其控件的jQuery语句设计。25实例3. 利用绝对坐标实现表单控件的
2、位置布局。28实例4. 利用append()方法在jQuery中动态定义和生成EasyUI控件。31实例5. 构造控件自定义函数，简化控件的使用。32实例6. 控件定义函数的综合应用。36实例7. 使用tabs标签页控件分页显示多个表单控件。38实例8. 静态组合框combobox控件及其事件和初值的设置。39实例9. 利用滑块（slider）控件实现图片的等比例缩放。40实例10. 工具栏、菜单和消息框控件的使用。43实例11. 窗口控件window的应用及其函数构造。46实例12. 利用布局（layout）控件实现页面布局。46实例13. 获取表单中可编辑控件的名称、类型及其值。48实例1
3、4. 表单的键盘控制与控件聚焦。49实例15. 利用文件框控件file实现文件的上传。51实例16. 服务器端文件下载的实现。54第3章、EasyUI数据库控件57实例17. 构造连接数据库Java类，实现数据查询操作。57实例18. 服务器端数据更新语句的执行。59实例19. 服务器端存储过程和用户定义函数的调用。61实例20. 动态combobox组合框控件的定义与初值设置。62实例21. 动态combobox组合框控件之间联动效果的实现。64实例22. 服务器端取数据库中数据赋值到表单。65实例23. 客户端和服务器端表单数据验证。67实例24. 服务器端数据库记录的增删改操作。69实例
4、25. 服务器端SQL脚本文件.sql的运行。74第4章、树与数据网格及其应用78实例26. 静态树Tree控件及其基本操作。78实例27. 基于JSON数据的静态树加载与操作。80实例28. 从数据库一次性加载数据到树节点。84实例29. 动态树节点的分层逐级加载。87实例30. 动态组合树ComboTree控件及其应用。91实例31. 静态JSON数据网格控件基础。93实例32. 动态数据库网格控件及其分页处理。95实例33. 数据库网格中数据的过滤与定位。98实例34. 可编辑数据网格及其数据增删改操作的实现。103实例35. 数据网格的表单关联扩展。107实例36. 树形网格（Tree
5、Grid）的综合应用。110第5章、图表统计及其应用119实例37. FusionCharts单序列图表及应用。119实例38. FusionCharts多序列图表及应用。122实例39. FusionCharts图表向下钻取。124实例40. 带多层表头和汇总行的数据网格及其Excel文件输出。130附录1、jQDemos自定义控件函数136附录2、JavaScript常用函数144 第1章、jQuery及其开发环境jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的JS库 ，兼容CSS3和各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0
6、+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery能更方便地处理HTML和为网站提供AJAX交互。jQuery另一个比较大的优势是其文档说明齐全，同时还有许多成熟的插件可供选择。jQuery的核心理念是write less、do more（写得更少，做得更多），最早在2006年1月由美国人John Resig发布。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档
7、对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是JavaScript和查询（Query），即辅助JavaScript开发的库。1.1 J2EE开发环境简介l 服务器：Tomcat6.0及以上。l 数据库：SQL Server2008。l 程序开发环境：MyEclipse6.5及以上。l 程序设计语言：客户端Javascript（JS）、服务器端JSP、JAVA。l jQuery插件库：EasyUI等。1.2 安装Tomca
8、t服务器1.2.1 Tomcat6.0及安装步骤将文件夹apache-tomcat-6.0.30复制到C盘根目录下，即可完成Tomcat6.0的安装过程，这时C: apache-tomcat-6.0.30文件夹下包括图1-1所示内容：图1-1 Tommcat6.0文件目录1.2.2 安装JDK打开C:Program FilesJava这个文件夹，如果存在jdk*和jre*两个子文件夹，表明Windows系统已经安装了JDK，如果不存在C:Program FilesJava及其子文件夹，则需要安装JDK。对没有安装JDK的操作系统，下面以jdk-7为例，阐述JDK安装过程。点击安装程序，开始安装
9、过程。选择JDK默认安装路径（如图1-2所示），不作更改。图1-2 JDK安装过程（选择默认安装路径）同样安装JRE时选择默认安装路径，即与JDK安装在同一个java文件夹下（如图1-3所示）。安装成功后关闭窗体。图1-3 JRE安装过程（选择默认安装路径）图1-4 JDK安装结束界面1.2.3 设置JDK环境变量以Win7为例（如果已经安装JDK，直接设置环境变量）：右击“我的电脑”，选择“属性”，选择“高级系统设置”，这时出现图1-5界面。图1-5 JDK环境变量配置（选择高级系统设置）点击上图中的“环境变量”按钮，在“系统变量”中新建JAVA_HOME 变量。变量值填写JDK的安装目录（
10、例如C:Program FilesJavajdk1.7.0_4。图1-6 JDK环境变量配置（新建JAVA_HOME变量）系统变量中找到 Path 变量，点击“编辑”（如图1-6所示）。在变量值这一栏中输入：%JAVA_HOME%bin;%JAVA_HOME%jrebin;注意：最后一个分号必须输入。图1-6 JDK环境变量配置（编辑PATH变量）在“系统变量”中新建 CLASSPATH 变量（如图1-7所示）。变量值填写如下：.;%JAVA_HOME%lib;%JAVA_HOME%libtools.jar注意：最前面有一个点。系统变量配置完毕，按“确定”按钮退出。图1-7 JDK环境变量配置
11、（新建CLASSPATH变量）检验是否配置成功。运行cmd （或在命令行中）输入 java -version （注意：java 和 -version 之间有空格）。若出现图1-8所示结果，显示JDK版本信息，则说明JDK安装和配置成功。图1-8 JDK环境变量配置成功重启计算机，JDK环境变量设置方可生效。1.2.4 Tomcat6.0的启动和停止打开C: apache-tomcat-6.0.30bin文件夹，点击其中的startup.bat文件，即可启动Tomcat6.0服务器，这时屏幕上出现图1-9所示信息，表明Tomcat服务器已经开启并将一直保持运行状态。图1-9 Tomcat6.0启
12、动运行界面也可以通过打开一个游览器（建议使用Google的Chrome游览器），在游览器地址栏输入下列地址：http:/127.0.0.1:8080。如果出现图1-10所示页面，则表明Tomcat安装成功并已启动。图1-10 Tomcat配置成功启动页面在startup.bat所在的同一文件夹中，点击其中的shutdown.bat文件，即可停止和关闭Tomcat服务器。注意：在安装MyEclipse之后，通常在MyEclipse开发环境中开启和关闭Tomcat服务器。这时需要按照上一步的操作方法，关闭Tomcat服务器，否则在MyEclipse无法开启服务器。1.2.5 设置Tomcat端口号
13、在启动Tomcat的过程中，有些系统可能会出现错误，其中一种可能是端口号8080与其他应用程序发生冲突，这时需要修改或重新设置端口号。重新设置端口号的方法如下：在C:apache-tomcat-6.0.30conf文件夹中，用记事本打开编辑server.xml配置文件；在该文件中搜索8080字符串（如图1-11所示），将下列行中的port=8080改成port=8088：图1-11 Server.xml配置文件查找8080端口 改为： 改为： 保存server.xml文件后退出，重新启动Tomcat，然后在游览器中输入下列地址：http:/127.0.0.1:80881.3 安装MyEclipse这里以MyEclipse6.5为例，描述安装过程。点击打开安装文件，开始安装过程（如图1-12所示）。图1-12 运行myEclipse6.5安装程序选择默认路径安装（如图1-13所示）。图1-13 选择默认路径安装myEclipse6.5点击“Install”正式开始安装（如图1-14所示）。图1-14 正式开始myEclipse6.5安装过程正在安装，请稍候（如图1
