1、,.NET架构,主讲教师 张智,计算机学院,.NET架构,第5章 jQuery语言,jQuery是一个快速的，简洁的JS库，使用户能更方便地处理HTML文档、事件、动画以及AJAX交互等。（write less，do more）,John Resig (US),官网：http:/ jQuery基本结构5.2 jQuery选择器,5.3 jQuery方法和事件,5.4 jQuery UI,5.5 jQuery Ajax,.NET架构5.1 jQuery基本结构,jQuery示例,$(document).ready(function()alert(“Hello jQuery!“);/ js或jQu
2、ery代码);,先引入 jQuery，实际路径根据情况改变,jQuery入口可简写为：$(function();,注：当页面加载时会自动执行jQuery代码,.NET架构,提醒,默认MVC项目：jquery.js库在布局页中已经加载，且位置是在最后布局页面_layout.cshtml加载子页面内容jquery.js库在布局页面最后加载加载子页面中名为”scripts“节的内容,.NET架构子页面(视图)任意位置定义名为“scripts“的节,section scripts ,$(document).ready(function () alert(“hello“););,子页面定义一个名为“sc
3、ripts”的节,将jQuery代码放在节中,.NET架构jQuery示例$(document).ready(function()$(“#demo“).click(function(),alert(“呵呵!“);,)$(“#demo“).mouseover(function(),), 点击我,jQuery选择器);,jQuery事件,$(this).css(“cursor“,“pointer“);$(this)是当前元素的jQuery表示方法,css()：jQuery方法 用于设置元素样式,.NET架构,对应的JS实现,function demo(),alert(“呵呵!“);,functio
4、n changecursor(x)x.style.cursor=“pointer“;,点击我,.NET架构,jQuery示例,表格隔行变色,2009001张三 2009002李四 2009003王五 2009004赵六,.NET架构,用JS实现-感受一下jquery的简洁,window.onload = function() /页面所有元素加载完毕var table = document.getElementById(“tb“);var trs = table.getElementsByTagName(“tr“);for(var i=0;i ,$(document).ready(functio
5、n()$(“#tb tr:even“).css(“background-color“,“yellow“);); ,jquery实现,JS实现【返回】,.NET架构,5.2 jQuery选择器, jQuery的行为规则都必须在获取元素后才能生效。 jQuery选择器完全继承了CSS风格。, jQuery选择器可以便捷和快速地找出特定的元素，然后为,它们添加相应的行为。,.NET架构,基本选择器,选择器继承了CSS风格,个例子的选择器没有空格,此处有空格,表示层次关系,.NET架构筛选选择器,补充 eq(index) 函数：如$(“input“).eq(1),index序号从0开始,.NET架构,
6、属性选择器,.NET架构,Input元素选择器,区别：$(“input“)返回所有input标签元素,);,选 择 器 示 例1,.NET架构$(document).ready(function(),$(“input“).click(function()alert(this.id);给所有元素); 添加click事件.stuno background-color:red; font-size: 12px #username background-color:blue; font-size: 16px 学号: 姓名: 年龄: ,window.location=$(this).val(); );,
7、);友情链接武科大华科,.NET架构选择器示例2$(document).ready(function()$(“.links“).change(function(),JS实现： onchange=“window.location=this.optionsthis.selectedIndex.value“,val()：jQuery函数 用于设置或获取元素value值,.NET架构,选择器示例3,表格隔行变色+当前行高亮：,2009001张三 2009002李四 2009003王五 2009004赵六,.NET架构,$(document).ready(function()$(“#tb tr:even
8、“).css(“background-color“,“yellow“);,var bg;,$(“tr“).mouseover(function()bg= $(this).css(“background-color“);$(this).css(“background-color“,“red“); )$(“tr“).mouseout(function()$(this).css(“background-color“,bg); ),); ,代码实现,jQuery选择器功能很强大！,所有偶数 元素,【返回】,.NET架构,5.3 jQuery方法和事件 （部分）,.NET架构,jQuery综合示例1,.
9、NET架构姓名： 密码： 性别： 男女 ,爱好： 足球篮球网球 专业：计算机软件工程网络工程特长：.NET编程J2EE编程C语言编程附件：简介： ,参 考 代 码,.NET架构$(“#btn1“).click(function () var str=“;str=“姓名：“+$(“#username“).val()+“n“;str+=“密码：“+$(“#psd“).val()+“n“;str+=“性别：“+$(“:radioname=sex:checked“).val()+“n“;,var selstr=“;$(“:checkboxname=like:checked“).each(functio
10、n()selstr+= $(this).val() +“ “; ); str+=“爱好：“+selstr+“n“; str+=“专业：“+$(“#speciality“).val()+“n“; selstr=“;$(“#master option:selected“).each(function(),selstr+= $(this).val()+“ “; );,str+=“特长：“+selstr+“n“;str+=“附件：“+$(“#myfile“).val()+“n“;str+=“简介：“+$(“#resume“).val()+“n“;alert(str); );,:selected筛选器
11、选取所有被选中的元素,:checked筛选器 所有选中的复选框或单选按钮,.NET架构,jQuery综合示例2 - 级联选项,代 码 参 考,.NET架构,$(document).ready(function()$(“#dept“).change(function() /change事件switch( $(“#dept“).val() ) /获取选中项值case “cs“:$(“#major“).empty();$(“#major“).append(“);$(“#major“).append(“计算机科学“);break;case “info“:$(“#major“).empty();$(“#
12、major“).append(“);$(“#major“).append(“自动化“);break;); /end change,代 码 参 考,.NET架构$(“#major“).change(function() alert(“你选择的学院是：“+,$(“#dept optionselected=true“).text()+“，选择的专业是：“+$(“#major optionselected=true“).text();); /end change);选择学院：计算机学院信息学院选择专业：,【返回】,.NET架构,5.4 jQuery UI, 是一套基于jQuery用户界面组件集合, 用
13、于构建具有良好用户体验的Web应用程序 基于jQuery的UI产品繁多，如：, jQuery UI：http:/ , jQuery EasyUI：http:/ jQuery ligerUI： http:/ ,.NET架构,jQuery UI控件示例,http:/ UI 控件,.NET架构,jQuery UI示例 - datepicker控件,$(document).ready(function () $(“#dp“).datepicker( ,dateFormat: “yy-mm-dd“,inline: true );,); ,日期: ,注意js加载顺序,jQueryUI编程语法详见 http
14、:/ 变成了日历框,准备工作：先将jquery-ui-1.11.1.custom 文件夹拖放到项目根目录下,.NET架构在MVC项目中使用：视图页面定义节,section scripts ,$(document).ready(function () $(“#dp“).datepicker(dateFormat: “yy-mm-dd“,inline: true);,);, 注：本例中的 jquery.js 可不用加载。,定义一个名为“scripts”的节,将jQuery代码放在节中,.NET架构,运行情况,【返回】,.NET架构,5.5 jQuery Ajax, jQuery使用 ajax()方
15、法通过 HTTP 请求加载远程数据。 Ajax允许浏览器与服务器通信而无需刷新整个页面（即,局部刷新）。,.NET架构,普通方法,$(document).ready(function () $(“#check“).click(function () var username = $(#username).val();window.location= “/TestAjax/CheckUsername?username=“ + username;););姓名: 检测,前端代码,.NET架构,普通方法（续）,public ActionResult CheckUsername(string usern
16、ame),if (username.Equals(“wustzz“),Response.Write(“alert(已注册)“);,else,Response.Write(“alert(检查通过)“);,return View(“Index“);,后台代码,type: “post“,/以post方式与后台沟通,url: “CheckUsername“,/调用action,dataType: “html“,/从action返回的值以html方式解释，或用“text“,data: “username=“ + username,/传送的数据,/如果调用成功 /显示action返回值,success:
17、function (msg) $(#result).html(msg); ,););); ,.NET架构jQuery Ajax方法（前端）前端代码姓名: 检测$(document).ready(function () $(“#check“).click(function () var username = $(“#username“).val();$.ajax(,Ajax代码,.NET架构,jQuery Ajax方法（后端）,public string CheckUsername(string username),if(username.Equals(“wustzz“),return “已注册
18、“;,else,return “检查通过“;,后台代码,【完】,“AppleScript“,“Asp“,“BASIC“ ;$( “#tags“ ).autocomplete(source: availableTags);); Autocomplete示例,.NET架构jQuery Ajax补充示例（Autocomplete控件如何获取数据）前端代码$(document).ready(function () var availableTags = /自动填充的提示数据（数组类型）“ActionScript“,关键：当前数据是写死的 如何从后台获取？Autocomplete示例,dataType:
19、 “text“,/字符串方式,success: function (msg) ,var tmp = msg.split(“,“);,/以逗号分割字符串为数组,for (var i = 0; i tmp.length; i+)availableTags.push(tmpi);/debugger;/alert(availableTags););,.NET架构jQuery Ajax补充示例（Autocomplete控件如何获取数据）前端Ajax代码var availableTags = new Array();$.ajax(type: “get“,url: “GetData“,/意思几个,list.
20、Add(“ActionScript“);list.Add(“AppleScript“);list.Add(“BASIC“);list.Add(“C“);string ss = “;foreach(string s in list),ss += s+“,“;, /这里假设使用逗号分隔字符串,if (ss.Length 0) ss=ss.Substring(0, ss.Length - 1); /去掉最后逗号return ss;,.NET架构jQuery Ajax补充示例（后端）后台代码 public string GetData()List list = new List(); /数据可以是动态
21、获取,【完】,.NET架构,课后自学：表单验证,用户名:,邮箱:,.NET架构body font-size:12px;form div margin:5px 0; /*上、下边距是5px 左、右边距是 0px*/.int label float:left; width:100px; text-align:right;.int input border:1px solid ;.sub padding-left:100px; /*设置元素左内边距*/,.sub input margin-right:10px; ,/*设置元素的右外边距*/,.formtips width: 200px;margin
22、:2px;padding:2px;.onErrorbackground:#FFE0E9 url(img/NO.gif) no-repeat; /*注意路径*/padding-left:25px;.onSuccessbackground:#E9FBEB url(img/OK.gif) no-repeat;padding-left:25px;.high color:red; ,.NET架构JQuery代码,$(document).ready(function(),$(“:input.required“).each(function() /必填加红星标识.var $required = $(“ *“
23、); /创建元素$(this).parent().append($required); /在div后面添加一个*,);,),Form中所有class=“required“的input标签,上一级标签是div,/其他代码(见后)定义一个jQuery变量,前面必须要有 $,.NET架构JQuery代码(续)$(:input).blur(function() /为所有的input添加失去焦点事件var $parent = $(this).parent();,$parent.find(“.formtips“).remove(); /删除以前的提示元素 if( $(this).is(#username)
24、 ) / is方法判断是否是用户名if( this.value=“ | this.value.length 6 ),else,var okMsg = 输入正确.;$parent.append(+okMsg+);,查找 方法,注意区别 this和$(this),var errorMsg = 请输入至少6位的用户名.;$parent.append(+errorMsg+);添加2个样式类,注意formtips作用,.NET架构,JQuery代码(续),if( $(this).is(#email) ) /是否邮件文本框,if( this.value=“ | ( this.value!=“,$paren
25、t.append(+errorMsg+);,else,var okMsg = 输入正确.;,$parent.append(+okMsg+);,); /end blur,.NET架构JQuery代码(续)$(:input).keyup(function() /本例input元素keyup事件功能代码与blur相同$(this).triggerHandler(“blur“); /触发blur事件);$(:input).focus(function() /本例input元素focus事件功能代码与blur相同,$(this).triggerHandler(“blur“);,/触发blur事件,);,触发被选元素的指定事件类型,.NET架构,JQuery代码(续),$(#send).click(function() /提交按钮,$(“:input.required“).trigger(blur);,var numError = $(form .onError).length; /class=“onError“个数,if(numError0) /还有错,return false;,alert(“注册成功,密码已发到你的邮箱,请查收.“);,);,$(#res).click(function() /重置按钮,$(“.formtips“).remove();,);,【完】,
