第5章 jQuery & EasyUI

教学要求

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

5.1 初识jQuery

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

jQuery 1.0（2006年8月）1.x 支持IE6-8
jQuery 1.4.2（2010年2月20日）1.4.2一般功能够而且稳定,体积为71K
jQuery 1.7.1（2011年11月22日）常用1.4.2和1.7.1
jQuery 1.9.1（2012年11月14日）
jQuery 1.12.4（2016年5月20日）
jQuery 2.0（2013年4月18日）不再支持IE6-8
jQuery 2.2.4（2016年5月20日）
jQuery 3.0（2016年6月11日）不再支持IE6-8,运行在Strict Mode下
jQuery 3.3.1（2018年1月21日）

官网http://www.jquery.com/
官网下载http://code.jquery.com/

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

选择器[元素、Id、类、属性选择器]
	元素选择器$("元素标签") - 返回所有标签元素。
	id选择器$("#id名") - 返回id="id名"的元素。
	类选择器$(".类名") - 返回class="类名"的元素。
	属性选择器$([属性名]="属性值") - 返回[属性名]="属性值"的元素。

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

jQuery常用事件方法
	$(document).ready(function(){...}) ---- 文档就绪事件（当文档完成加载时）
	                $(function(){...}) ---- 文档就绪事件简写
	$(选择器).click(function(){...})    ---- 元素单击事件
	$(选择器).dblclick(function(){...}) ---- 元素双击事件
	$(选择器).focus(function(){...})    ---- 被选元素获得焦点事件
	$(选择器).mouseover(function(){...})---- 被选元素鼠标悬停事件

5.2 jQuery HTML操作

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

text() - 返回所选元素的文本内容。
html() - 返回所选元素的内容（包括 HTML 标记）。
val() - 返回表单字段的值。
attr("属性名") - 获取属性值。

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

设置内容和属性[text(...)、html(...)、val(...)、attr(...,...)]
	text("内容")----设置所选元素的文本内容
	html("内容")----设置所选元素的内容（包括 HTML 标记）
	val("内容") ----设置所选表单元素字段的值
	attr("属性名","属性值")----设置单个属性
	attr("属性名":"属性值", "属性名":"属性值" ,...)----设置多个属性

设置内容和属性的回调函数
	function(i,origText){ return newValue; }----text()、html()以及 val()的回调函数
	.attr("属性名", function(i,origValue){return newValue;});----attr()的回调函数

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

添加新的HTML内容
	append("内容")----在被选的每一个元素结尾插入内容
	prepend("内容")---在被选的每一个元素开头插入内容
	after("内容") ----在被选的每一个元素之后插入内容
	before("内容")----在被选的每一个元素之前插入内容
添加新的HTML元素
	append(元素1,元素2,...)----在被选的每一个元素结尾插入元素1,元素2,...
	prepend(元素1,元素2,...)---在被选的每一个元素开头插入元素1,元素2,...
	after(元素1,元素2,...) ----在被选的每一个元素之后插入元素1,元素2,...
	before(元素1,元素2,...)----在被选的每一个元素之前插入元素1,元素2,...

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

.remove() ---- 删除被选所有元素(及其子元素).
.empty()  –--- 清空被选所有元素内容(包含删除其子元素).

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

添加、移除、替换Css类
	.addClass("类名1 类名2 ...")     ----添加Css类  
	.removeClass("类名1 类名2 ...")  ----移除Css类
	.toggleClass)("类名1 类名2 ...") ----替换Css类

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

css()方法
	css("属性名")  ---- 返回选择器弟1个元素的CSS属性值。
	css("属性名","属性值")  ---- 设置单个CSS属性值。
	css({"属性名":"属性值","属性名":"属性值",...}) ---- 设置多个CSS属性

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

元素宽度与高度
	width() ---- 设置或返回元素的宽度（不包括内边距、边框或外边距）。
	height()---- 设置或返回元素的高度（不包括内边距、边框或外边距）。
	innerWidth()  ---- 返回元素的宽度（包括内边距）。
	innerHeight() ---- 返回元素的高度（包括内边距）。
	outerWidth()  ---- 返回元素的宽度（包括内边距和边框）。
	outerHeight() ---- 返回元素的高度（包括内边距和边框）。

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

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

 被选元素.parent() 返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
 被选元素.parents() 回被选元素的所有祖先元素，它一路向上直到文档的根元素(html)。
 被选元素.parents("给定元素") 回被选元素的给定元素的父辈元素。
 被选元素.parentsUntil("给定元素") 返回介于被选元素和给定元素(不含给定元素)之间的所有祖先元素。

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

被选元素.children() 返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。 儿子们
被选元素.children("指定元素") 返回被选元素的指定元素的直接子元素。该方法只会向下一级对DOM树进行遍历。 儿子们
被选元素.find("指定元素") 返回被选元素的指定元素的后代元素。儿孙们
被选元素.find("*") 返回被选元素的后代元素，一路向下直到最后一个后代。儿孙们

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

被选元素.siblings() 返回被选元素的所有同胞元素。除自己以外兄弟姐妹
被选元素.next() 返回被选元素的下一个同胞元素。紧挨自己的弟弟妹妹
被选元素.nextAll() 返回被选元素的所有跟随的同胞元素。自己的所有弟弟妹妹
被选元素.nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
被选元素.prev() 返回的是前面的同胞元素。紧挨自己的兄姐
被选元素.prevAll() 返回被选元素的所有前面的同胞元素。自己的所有兄姐
被选元素.prevUntil() 返回介于两个给定参数之间的所有前面的同胞元素

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

first() 返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。(索引号从0开始)
filter() 返回匹配标准的所有元素
not() 返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反

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)

ajax() 方法通过HTTP请求加载远程数据,返回其创建的XMLHttpRequest对象。
$.ajax({
  type: 'POST'|'GET',  //默认为"GET"
  url: 'url请求地址',
  [async: true,]   //请求类型：true默认，异步请求；false同步请求
  data: '发送到服务器的字符串数据',
  success: 成功之后处理函数,
  dataType: '返回数据类型',  // "text"--纯文本|"json"--JSON数据|"html"--HTML文本|"xml"XML数据|"script"--JS代码文本
  [error:出错之后处理函数,]
  [username:'访问认证请求的用户名',]
  [password:'访问认证请求的密码',]
});
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

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

HTTP请求：GET与POST
    GET - 从指定的资源请求数据
    POST - 向指定的资源提交要处理的数据
jQuery $.get()方法
    $.get()方法通过HTTP GET请求从服务器上请求数据。
    $.get(URL,callback);
        必需的URL参数规定您希望请求的 URL。
        可选的callback参数是请求成功后所执行的函数名。
get回调函数callback
    $.get(URL,function(data,status){...});
        data回调参数存有被请求页面的返回内容
        status参数存有请求的返回状态。

/ch05_du/ajaxGet.jsp

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

jQuery $.post()方法
    $.post()方法通过HTTP POST请求从服务器上请求数据。
    $.post(URL,data,callback);
        必需的URL参数规定您希望请求的 URL。
        可选的data参数规定连同请求发送的数据。
        可选的callback参数是请求成功后所执行的函数名。
post回调函数callback
    $.post(URL,data,function(r_data,status){...});
        r_data回调参数被请求页面的返回内容
        status参数存有请求的返回状态。

/ch05_du/ajaxPost.jsp

5.5 jQuery EasyUI

jQuery Easy UI历史

jQuery Easy UI 1.1（2010年5月19日）-- jQuery-1.4.2
jQuery Easy UI 1.2（2010年8月18日）-- jquery-1.4.2.
jQuery Easy UI 1.3（2012年7月26日）-- jquery-1.7.2
jQuery Easy UI 1.4（2014年8月1日）-- jQuery v1.11.1
jQuery Easy UI 1.4.5（2016年3月18日）-- jQuery v1.11.3
jQuery Easy UI 1.5（2016年7月31日）-- jQuery v1.11.3

一些著名的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)

装载jquery和EasyUI的css、js：
	<link rel="stylesheet" href="js/themes/default/easyui.css">
	<link rel="stylesheet" href="js/themes/icon.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.easyui.min.js"></script>
	<script src="js/easyui-lang-zh_CN.js"></script>

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

主控界面：
		// 实例化树菜单
		$("#tree").tree({
			data:treeData,
			lines:true,
			onClick:function(node){
				if(node.attributes)
				   openTab(node.text,node.attributes.url);
			}
		});
		
		// 新增Tab
		function openTab(text,url){
			if($("#tabs").tabs('exists',text)){
				$("#tabs").tabs('select',text);
			}else{
				var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
				$("#tabs").tabs('add',{
					title:text,
					closable:true,
					content:content
				});
			}
		}

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

<table url="clazz.json"和<th field="名称" width="100">班级名称</th>
	<table id="dg" title="班级信息浏览" class="easyui-datagrid" fitColumns="true"
	 pagination="true" rownumbers="true" url="clazz.json" fit="true" toolbar="#tb">
		<thead>
			<tr>
				<th field="id" width="50">班级编号</th>
				<th field="名称" width="100">班级名称</th>
				...
			</tr>

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

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

html5界面：
	<div id="addCDialog" style="padding: 10px;">  
   		<form id="fm" method="post">
	<input id="addC_学院ID" type="hidden" name="学院ID">
	<input id="addC_学院" class="easyui-textbox" label="学院:" labelPosition="left" style="width:90%" readonly>
	<input id="addC_班级" class="easyui-textbox" name="名称" label="班级:" labelPosition="left" style="width:90%"
				  data-options="required:true, validType:'repeat_class_collId', missingMessage:'不能为空'" >
	<input id="addC_注册码" class="easyui-textbox" label="注册码:" labelPosition="left" style="width:90%" name="注册码" required>
	<a id="addC_保存" href="#" class="easyui-linkbutton" iconCls="icon-ok">保存班级设置</a>

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

jQuery 保存代码：
	$("#addC_保存").click(function() {
		var validate = $("#addCForm").form("validate");
		if(!validate){
			$.messager.alert("消息提醒","请检查你输入的数据!","warning");
			return;
		}
		$.ajax({
			type : "post",
			url : "clazz?method=add&t=" + new Date().getTime(),
			data : $("#addCForm").serialize(),
			dataType : "text",
			success : function(msg) {
				if (msg == "success") {
					$("#addCDialog").dialog("close");
					$("#addCC_班级").combobox("reload");
					$.messager.alert("消息提醒", "添加保存成功!", "info");
				} else {
					$.messager.alert("消息提醒", msg, "warning");
					return;
				}
			}
		});
	});

5.6 习题

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

(1)

(2)

(3)

(4)

(5)

(6)

(7)

3.编程题

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

返回目录