第5章 jQuery & EasyUI


教学要求

(1) 熟练掌握:JDK、Eclipse jee的下载安装和使用
(2) 熟练掌握:Jsp的语法
(3) 理解Jsp的内置对象和用途

延伸阅读


5.1 初识jQuery


jQuery历史 1.x 2.x 3.x

【例1.1】选择器[元素、Id、类、属性选择器] (WebContent\ch05_du\jq_du_11_000.html)

【例1.2】jQuery常用事件方法(WebContent\ch05_du\jq_du_12_000.html)

5.2 jQuery HTML操作


【例2.1】获得元素的内容和属性值[text()、html()、val()、attr("属性名")] (WebContent\ch05_du\jq_du_21_000.html)

【例2.2】设置元素的内容和属性[text()、html()、val()、attr()] (WebContent\ch05_du\jq_du_22_000.html)

【例2.3】添加元素内容或元素[append(),prepend()、after()、before()] (WebContent\ch05_du\jq_du_23_000.html)

【例2.4】删除元素(remove)、清空元素内容(empty) (WebContent\ch05_du\jq_du_24_000.html)

【例2.5】CSS类[addClass(),removeClass()、toggleClass()] (WebContent\ch05_du\jq_du_25_000.html)

【例2.6】css("属性名");css("属性名","属性值");css({"属性名":"属性值","属性名":"属性值",...}); (WebContent\ch05_du\jq_du_26_000.html)

【例2.7】元素宽度与高度[width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()] (WebContent\ch05_du\jq_du_27_000.html)

5.3 jQuery遍历DOM树(向上、向下、水平、过滤)


【例3.1】 向上遍历DOM树 (WebContent\ch05_du\jq_du_31_000.html)

【例3.2】 向下遍历DOM树(WebContent\ch05_du\jq_du_32_000.html)

【例3.3】 水平遍历DOM树(WebContent\ch05_du\jq_du_33_000.html)

【例3.4】 (WebContent\ch05_du\jq_du_34_000.html)

5.4 jQuery AJAX


【例4.1】 AJAX load()(WebContent\ch05_du\jq_du_41_000.html)

【例4.2】 AJAX $.ajax()(WebContent\ch05_du\jq_du_42_000.html)

【例4.3】 AJAX $.get()(WebContent\ch05_du\jq_du_43_000.html)

/ch05_du/ajaxGet.jsp

【例4.4】 AJAX $.post()(WebContent\ch05_du\jq_du_44_000.html)

/ch05_du/ajaxPost.jsp

5.5 jQuery EasyUI


jQuery Easy UI历史
一些著名的web客户端框架
Framework7
Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。
Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。
Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。
如果你想开发 iOS 或者 Android 混合应用(Phonegap)或者你想开发 iOS 和 Google Material 风格的WEB APP,那么Framework7将会是你的首选。
SUI Mobile
超SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
SUI Mobile非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K,却提供了20+个常用的组件。
对于只有HTML&CSS的组件,你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件,并且提供了 Zepto/jQuery 风格的API,你将会非常熟悉这种方式。
Ionic
Ionic(ionicframework)一款接近原生的Html5移动App开发框架
通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。
Mobile Angular UI
Mobile Angular UI 是一个类似 jQuery Mobile 的库. 如果你用过 Angular JS and Bootstrap 会很容易上手 !
MiniUI
MiniUI专业WebUI控件库、快速开发,减少50%代码量
丰富组件库,高性能、低内存
支持Java、.NET、PHP和IE6+、FireFox、Chrome

【例5.1】 登录界面(WebContent\ch05_du\51_login_000.html)

【例5.2】 教务微信平台主控界面(WebContent\ch05_du\52_index_000.html)

【例5.3】班级列表界面(WebContent\ch05_du\53_classList_000.html)

【例5.4】学生列表界面(WebContent\ch05_du\54_studentList_000.html)

【例5.5】班级管理界面(WebContent\ch05_du\55_classMana_000.html)

【例5.6】学生管理界面(WebContent\ch05_du\56_studentMana_000.html)

5.6 习题


1.填空题(概念、知识点----------讲义中醒目的关键字)

(1)

(2)

(3)

(4)

(5)

(6)

(7)

3.编程题

(1) 仿照【例题2】jsp+javabean+servlet+jdbc的【图书管理系统】应用




返回目录