PPT 内容
- 1. Javascript、jquery、dwr初探 为了使网页能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（文件目标模块）和 Cascading Style Sheets（CSS）等。JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。在程序运行过程中被逐行解释。它与HTML标识结合在一起，方便用户的使用操作。随着互联网的普及。大量web页面的使用使得脚步语言越来越重要。Javascript逐渐成为当前最流行和使用最广的脚步语言。因此时下出现的很多基于Javascript的框架也就不足为奇了。像prototype、 Jquery、dwr、extJS等。为的还是方便用户。 Jquery是继prototype之后又一个优秀的Javascrīpt框架。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby. 他有三大优点：一、封装的恰到好处。二、像写css一样写javascript。三、天生就是为web设计师设计的。 对于做网站的朋友来讲，页面和服务器的交互是相当频繁的。传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。因此ajax就成为当时的程序员必不可少的技术。然后ajax既复杂又麻烦。而今天有了dwr。让你会觉得原来页面和服务器的交互也能如此简单。 下面我们就一起来学习一下这些不算新的技术。。。
- 2. JavaScript用法：基本上可以通过两种方式来使用它。1、直接在中间进行书写。2、通过导入专门的js包来进行使用。如： 常用基础知识 同java一样js也有自己的函数和属性。都通过“.”来调用。区别就在于有无()； javascript函数一共可分为五类： 1·常规函数 主要包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。 (3)escape函数：将字符转换成Unicode码。 (4)eval函数：计算表达式的结果。 (5)isNaN函数：测试是(true)否(false)不是一个数字。 (6)parseFloat函数：将字符串转换成符点数字形式。 (7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。 (8)prompt函数：显示一个输入对话框，提示等待用户输入。 (9)unescape函数：解码由escape函数编码的字符。
- 3. 2·数组函数 javascript数组函数包括以下4个函数： (1)join函数：转换并连接数组中的所有元素为一个字符串。例: function JoinDemo() { var a, b; a = new Array(0,1,2,3,4); b = a.join("-");//分隔符 return(b);//返回的b=="0-1-2-3-4" } (2)length函数：返回数组的长度。例： function LengthDemo() { var a, l; a = new Array(0,1,2,3,4); l = a.length; return(l);//l==5 } (3)reverse函数：将数组元素顺序颠倒。例： function ReverseDemo() { var a, l; a = new Array(0,1,2,3,4); l = a.reverse(); return(l); } (4)sort函数：将数组元素重新排序。例： function SortDemo() { var a, l; a = new Array("X" ,"y" ,"d", "Z", "v","m","r"); l = a.sort(); return(l); }
- 4. 3·日期函数 javascript日期函数包括以下20个函数： (1)getDate函数：返回日期的"日"部分，值为1～31。例： function DateDemo() { var d, s = "Today's date is: "; d = new Date(); s += (d.getMonth() + 1) + "/"; s += d.getDate() + "/"; s += d.getYear(); return(s); } (2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。 (3)getHouse函数：返回日期的"小时"部分，值为0～23。 (4)getMinutes函数：返回日期的"分钟"部分，值为0～59。 (5)getMonth函数：返回日期的"月"部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。 (6)getSeconds函数：返回日期的"秒"部分，值为0～59。
- 5. (7)getTime函数：返回系统时间。 function GetTimeTest() { var d, s, t; var MinMilli = 1000 * 60; var HrMilli = MinMilli * 60; var DyMilli = HrMilli * 24; d = new Date(); t = d.getTime(); s = "It's been " s += Math.round(t / DyMilli) + " days since 1/1/70"; return(s); } (8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。 function TZDemo() { var d, tz, s = "The current local time is "; d = new Date(); tz = d.getTimezoneOffset(); if (tz < 0) s += tz / 60 + " hours before GMT"; else if (tz == 0) s += "GMT"; else s += tz / 60 + " hours after GMT"; return(s); }
- 6. (9)getYear函数：返回日期的"年"部分。返回值以1900年为基数，例如1999年为99。前面有例子。 (10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。 function GetTimeTest(testdate) { var d, s, t; var MinMilli = 1000 * 60; var HrMilli = MinMilli * 60; var DyMilli = HrMilli * 24; d = new Date(); t = Date.parse(testdate); s = "There are " s += Math.round(Math.abs(t / DyMilli)) + " days " s += "between " + testdate + " and 1/1/70"; return(s); } (11)setDate函数：设定日期的"日"部分，值为0～31。 (12)setHours函数：设定日期的"小时"部分，值为0～23。 (13)setMinutes函数：设定日期的"分钟"部分，值为0～59。 (14)setMonth函数：设定日期的"月"部分，值为0～11。其中0表示1月---11表示12月。 (15)setSeconds函数：设定日期的"秒"部分，值为0～59。 (16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。 (17)setYear函数：设定日期的"年"部分。 (18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。 (19)setLocaleString函数：转换日期成为字符串，为当地时间。 (20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。
- 7. 4·数学函数 javascript数学函数其实就是Math对象，它包括属性和函数(或称方法)两部分。其中，属性主要有下列内容。 Math.e:e(自然对数)、Math.LN2（2的自然对数)、Math.LN10(10的自然对数)、Math.LOG2E(e的对数，底数为2)、Math.LOG10E(e的对数，底数为10)、Math.PI(π)、Math.SQRT1_2(1/2的平方根值)、Math.SQRT2(2的平方根值)。 函数有以下18个： (1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。 (2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。 (3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。 (4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。 (5)atan2函数：返回一个坐标的极坐标角度值。 (6)ceil函数：返回一个数字的最小整数值(大于或等于)。 (7)cos函数：返回一个数字的余弦值，结果为-1～1。 (8)exp函数：返回e(自然对数)的乘方值。 (9)floor函数：返回一个数字的最大整数值(小于或等于)。 (10)log函数：自然对数函数，返回一个数字的自然对数(e)值。 (11)max函数：返回两个数的最大值。 (12)min函数：返回两个数的最小值。 (13)pow函数：返回一个数字的乘方值。 (14)random函数：返回一个0～1的随机数值。 (15)round函数：返回一个数字的四舍五入值，类型是整数。 (16)sin函数：返回一个数字的正弦值，结果为-1～1。 (17)sqrt函数：返回一个数字的平方根值。 (18)tan函数：返回一个数字的正切值。
- 8. 5·字符串函数 javascript字符串函数完成对字符串的字体大小、颜色、长度和查找等操作，共包括以下20个函数： (1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定的链接点的名称，另一个函数link设定的URL地址。 (2)big函数：将字体加到一号，与...标签结果相同。 (3)blink函数：使字符串闪烁，与...标签结果相同。 (4)bold函数：使字体加粗，与...标签结果相同。 (5)charAt函数：返回字符串中指定的某个字符。 (6)fixed函数：将字体设定为固定宽度字体，与...标签结果相同。 (7)fontcolor函数：设定字体颜色，与标签结果相同。 (8)fontsize函数：设定字体大小，与标签结果相同。 (9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。 (10)italics函数：使字体成为斜体字，与...标签结果相同。 (11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。 (12)length函数：返回字符串的长度。(不用带括号) (13)link函数：产生一个超级链接，相当于设定的URL地址。 (14)small函数：将字体减小一号，与...标签结果相同。 (15)strike函数：在文本的中间加一条横线，与...标签结果相同。 (16)sub函数：显示字符串为下标字(subscript)。 (17)substring函数：返回字符串中指定的几个字符。 (18)sup函数：显示字符串为上标字(superscript)。 (19)toLowerCase函数：将字符串转换为小写。 (20)toUpperCase函数：将字符串转换为大写。
- 9. 主要应用在以下3个地方。 1.JS验证 主要是针对表单内的文本框内的输入验证。包括：长度、数字、字母、Email、电话号码等。 var reg =“^-?\\d+$"; reg=new RegExp(reg); var reg =/^[0-9]+[0-9]*]*$/; reg.test(value); 2.JS键鼠响应 onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。 onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
- 11. 其他相关事件： onblur（使用在表单元素中，当元素失去焦点的时候执行） onchange（使用在表单元素中，当某些东西改变是执行） onclick（鼠标点击一个元素时执行） ondblclick（鼠标双击一个元素时执行） onfocus（使用在表单元素中，当元素获得焦点时执行） onkeydown （按下某个按键时执行） onkeypress（按下和释放某个按键时执行） onkeyup（释放某个按键时执行） onload（在body标签中使用，载入页面的时候执行） onmousedown（按下鼠标按键时执行） onmousemove（鼠标光标在元素上移动时执行） onmouseout（鼠标光标移开元素时执行） onmouseover（鼠标光标移到元素上时执行） onmouseup（当释放鼠标按键时执行） onreset（用在表单元素中，当表单重置时执行） onselect（用在表单元素中，当元素被选择时执行） onsubmit（用在表单元素中，当表单提交时执行） onunload（用在body标签中，当关闭页面时执行）
- 12. 3.JS对页面的控制 Js可以控制页面上一切带id的元素的显示样式，也可以追加和删除这些元素。 对于显示样式即css的控制应注意以下几点： (1),如果css属性没有下划线,比如margin,border那么在js中直接写object.style.margin (2),如果css属性中有下划线,比如font-color,那么将下划线去掉,并且下划线后首字母大写,object.style.fontColor (3),但对于css里的float属性,js要特殊处理成 stylefloat(ie) ,cssfloat(FF) 对于追加和删除元素用到的就是appendChild 、insertBefore 、replaceChild 、removeNode 等方法。如下。 //添加元素 var newNode = document.createElement(“p”);//创建P标签 //var newText = document.createTextNode(“后面添加的元素”); //newNode.appendChild(newText);//与下面效果一样 newNode.innerHTML = “后面添加的元素”; var oldNode = $(“p3”); oldNode.appendChild(newNode); //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素 //删除元素 var node = $("p2");//p标签 var nodeBtn = $("remove");//按钮 //node.parentNode.removeChild(node); //下面效果相同 document.body.removeChild(node);//在body中删除id为P2的元素 //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮 document.body.removeChild(nodeBtn); //document.body.removeNode();执行这条语句将清空body里面的任何元素
- 13. ※ 项目案例和总结。
在项目中最常用的无非就是 页面的验证、数据的保存、样式的控制、以及键盘和鼠标事件的响应。页面的验证大多采用正则表达式。而数据的保存则大多采用js数组。对于在页面上可以做大量数据修改而又不确定用户具体改了多少个数据的情况、对于页面数据修改过后相互有关联的等情况都应该用到数组来在直接在页面保存数据。即在页面初始便产生一个可以容纳页面所有数据的空数组。只保存修改过的数据。在千叶的月报修正中有如下代码。（monthReportModify.js）
function load(Type){
for(var index=0;index
- 14. 对于样式控制一般主要是操作table。如对每个格子或者行的动态背景、字体、内容、以及html控件的追加等。我们可以通过textValue=tableID.rows[rowIndex].cells[colIndex].innerText;来获取任意表格格子的值，也可以通过innerHTML方法来取得格子内的所有html代码。同时可以通过document.createElement(“*”);来创建任意html控件元素。（*可以是p、div、input等。）。然后通过appendChild方法添加该节点或者直接用innerHTML替换该节点。如下代码就是实现在指定格子上添加一个显示输入框的div，并且把以前显示的格子里的值显示到输入框。 var textValue=monthUpdateTable.rows[rowIndex].cells[colIndex].innerText; monthUpdateTable.rows[rowIndex].cells[colIndex].innerText=''; var divInput=document.createElement("div"); divInput.innerHTML=" "; monthUpdateTable.rows[rowIndex].cells[colIndex].appendChild(divInput); 对于格子字体颜色和背景的设置可以通过以下方法。 tableID.rows[rowIndex].cells[colIndex].style.color='#FF0000'; tableID.rows[rowIndex].cells[colIndex].style.backgroundColor='#FAFAD2'; 更多功能请参照monthReportModify.js。 对于键盘响应首先要在js代码内添加document.onkeydown=moveInput;后面为js函数名。通过var nKeycode=event.keyCode;获得用户的当前按键。然后分别根据按键进行处理即可。如下：
- 15. switch(nKeycode){ case 37: if(rowIndex%2==0 && colIndex>1 && getPointIndex()==0){ removeInput(); colIndex=colIndex-1; showToInput(); } else if(colIndex>2 && getPointIndex()==0){ removeInput(); colIndex=colIndex-1; showToInput(); } break; case 39: case 13: case 9: moveInputToNextCell(); break; case 40: if((rowIndex
- 16. 对于页面数据修改后的相互联动主要是指用户在修改一个值后会影响到其他数据，并且改修改值必须保存下来以备用户在当前页面的后期再操作。例如千叶项目中的图查询中的初期参数的设置。用户在选择下拉框后可以设置其对应的其他参数值。这就需要在页面保存用户每次所设的值。由于代码太多。详细的请参照graph.js。 对于页面提交。有些情况要求子页面是在新窗口打开。为了避免用户重复点击提交按钮。往往需要在用户第一次点击后吧按钮变灰。在新窗口完全打开后在恢复正常状态。那么如何判断新窗口已经完全打开了呢？我们的js也可以实现。呵呵。请看如下代码: function printWindow(){ if(window.frames["printPage"].document.readyState=="complete"){ //alert("已经加载完毕"); document.frames("printPage").window.focus(); PageSetup_Null(); document.all.printPage.ExecWB(7,1); submitButtonID.disabled=false; SearchID.disabled=false; submitButtonID.value = "実 行"; } else{ setTimeout(“printWindow()”, 100);//未完成时100ms递归调用一次本方法。 } } 更多详细的请参照graph.js。
- 17. js结束语Js在我们项目中的常用功能大概就这么多。由于时间仓促。错误在所难免。以上只能算是说了一下js最基础最常用的内容。对于更多的功能就留在接下来的项目中我们相互学习共同提高。好了。接下来我们就看看在此基础上发展而来的jquery和dwr吧。他们给我们项目开发中带来了更多简洁实用的帮助。如果有了前面的这些知识。相信我们很快就能上手了。。。 推荐几个js常用网站 http://www.abaonet.com/makeWeb/js/ http://www.w3schools.com/jsref/default.asp http://www.52515.net/ http://www.cssrain.cn/
- 18. jquery 于2006年一月十四号面市的Jquery，目前的最新版是1.3.2 ，看看他的各个版本的 发布时间 ，不难发现他的飞速发展，每个月都在更新版本；而且不断有人开发出新的 jQuery插件 。 库： 基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 使用环境 在我们目前的项目中的日历控件就采用了该最新包。它的使用也相当简单。只需要导入一个jquery.js就可以使用了。下面先来看看它的一些基本用法和函数功能，然后在结合我们项目总的日历控件和一些项目中可以使用地方进行熟悉。
- 19. 基础知识 1、精准简单的选择对象(dom)： 以下为引用的内容： $(‘#element’);// 相当于document.getElementById(“element”) $(‘.element’);//Class $(‘p’);//html标签 $(“form > input”);//子对象 $(“div,span,p.myClass”);//同时选择多种对象 $(“tr:odd”).css(“background-color”, “#bbbbff”);//表格的隔行背景 $(“:input”);//表单对象 $(“input[name=‘newsletter’]”);//特定的表单对象 2、对象函数的应用简单和不限制： element.function(par)； $(”p.surprise”).addClass(”ohmy”). 3、对已选择对象的操作（包括样式）： 以下为引用的内容： $("#element").addClass("selected");//给对象添加样式 $('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式 $("p").text("Some new text.");//改变对象文本 $("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本 $("p").add("span");//给对象增加标签 $("p").find("span");//查找对象内部的对应元素 $("p").parent();//对象的父级元素 $("p").append("Hello");//给对象添加内容
- 20. 4、对事件的支持： 以下为引用的内容： $(“p”).hover(function () { $(this).addClass(“hilite”);//鼠标放上去时 }, function () { $(this).removeClass(“hilite”);//移开鼠标 });//鼠标放上去和移开的不同效果（自动循环所有p对象） 5、动画： 以下为引用的内容： $(“p”).show(“slow”) ;//显示隐藏的匹配元素 $(“p”). hide() ;//隐藏元素 $(“#go”).click(function(){ //鼠标点击后的事件处理。 }); 6、扩展： 以下为引用的内容： $.fn.background = function(bg){ return this.css('background', bg); }; $(#element).background("red");如果要为每一个jQuery 对象添加一个函数，必须把该函数指派给 $.fn，同时这个函数必须要返回一个 this（jQuery 对象）
- 21. 具体使用 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： 程序代码 $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。有如下两种方法： 程序代码 $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性- 22. 4、同一函数实现set和get Jquery中的很多方法都是如此，主要包括如下几个： $("#msg").html(); //返回id为msg的元素节点的html内容。 $("#msg").html("new content"); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $("#msg").text(); //返回id为msg的元素节点的文本内容。 $("#msg").text("new content"); //将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content $("#msg").height(); //返回id为msg的元素的高度 $("#msg").height("300"); //将id为msg的元素的高度设为300 $("input").val("); //返回表单输入框的value值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样width, blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。 包括两种形式： 程序代码 $(“p”).each(function(i){this.style.color=[‘#f00’,‘#0f0’,‘#00f’][i]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。 $(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,‘#fff’][i%2]}) //实现表格的隔行换色效果 $(“p”).click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容 6、扩展我们需要的功能 程序代码 $.extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法 使用扩展的方法（通过“$.方法名”调用）： alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
- 23. 7、支持方法的连写 所谓连写，即可以对一个jquery对象连续调用各种不同的方法。 例如： $("p").click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}); 8、操作元素的样式 主要包括以下几种方式： $("#msg").css("background"); //返回元素的背景颜色 $("#msg").css("background","#ccc") //设定元素背景为灰色 $("#msg").height(300); $("#msg").width("200"); //设定宽高 $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 $("#msg").addClass("select"); //为元素增加名称为select的class $("#msg").removeClass("select"); //删除元素名称为select的class $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。 如： $("#msg").click(function(){alert("good")}) //为元素添加了单击事件 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。 $("tr").hover(function(){ $(this).addClass("over"); }, function(){ $(this).addClass("out"); }); （2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){alert("Load Success")}) //页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价 （3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。 $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); });
- 24. （4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。 例如： $("p").trigger("click"); //触发所有p元素的click事件 （5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定 从每一个匹配的元素中（添加）删除绑定的事件。 例如： $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件 $("p").unbind(); //删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。 如toggle()方法包括了hide()和show()方法。 slideToggle()方法包括了slideDown()和slideUp方法。 11、几个有用的jQuery方法 $.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。 $.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。 如 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 等价于： var tempArr=[0,1,2]; for(var i=0;i
- 25. $.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。 如： $.extend(settings, options); //合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。 var settings = $.extend({}, defaults, options); //合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。 可以有多个参数（合并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。 如： var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); tempArr内容为：[4,5,6] var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); tempArr内容为：[2,3] $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] $.trim(str)：删除字符串两端的空白字符。 如：$.trim(" hello, how are you? "); //返回"hello,how are you? " 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。 如： jQuery.noConflict(); 或者var j= jQuery.noConflict(); j就能代替$了。 // 开始使用jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none';
- 26. ※ 项目案例和总结。 Jquery的最大优势在于分离html页面中的js代码。并且书写起来相当简洁。结合css的特性，操作起来也相当方便快速。对于使用Jquery的页面我们只需要给html里要操作的元素写上id就可以。页面内不用任何js代码就可以实现以前的js功能了。这对于页面的维护可以带来相当大的方便。 一般来说我们只需要通过如下方式$(function () { //操作任何元素。 }) ; 或者 $(document).ready(function(){ //操作任何元素。 }) ; 来开始使用jquery操作页面。（注：后面为标准写法，前面为简写。两个功能完全一致。） 例如对页面的某组name名为hobby的复选框在id为hobby_all的按钮点击事件进行全选操作。 $(function () { // 全选 $('#hobby_all').click(function () { $('input[name="hobby"]').attr("checked",true); }) ; }) ; 注（在jquery中取得js中事件前面的on。） 又如日历控件中只需添加如下代码即可使用日历控件了。 $(function () { $(‘#buttonDatepicker’).datepick({showOn: ‘button’});//通过文字或者按钮点击显示日历。 $(‘#buttonDatepicker’).datepick({showOn: ‘focus’}); //焦点到输入框后显示日历。 $(‘#imageDatepicker’).datepick({showOn: ‘button’,buttonImageOnly: true, buttonImage: ‘calendar.gif’}); //通过图片按钮点击显示日历。 }); buttonDatepicker和imageDatepicker分别为input的id。 更多日历控件的详细用法请参加js/jquery包下的js文件。而对于我们项目中的其他很多地方也可以使用jquery来让你对页面的操作更简单。
- 27. dwr DWR是一个框架，简单的说就是能够在javascript直接调用java方法，而不必去写一大堆的javascript代码。它的实现是基于ajax的，可以实现无刷新效果。 网上有不少DWR的例子，但大都只是某种方法的调用，下面以我们项目中用的DWR 2.0为基础介绍在javascript中是怎样调用各种java方法 。 dwr一般只需要配置3个地方就可以使用了。即web.xml、dwr.xml、使用页面导入的js。 一、 dwr配置篇之web.xml 1 、最简配置
dwr-invoker uk.ltd.getahead.dwr.DWRServlet dwr-invoker /dwr/* debug true - 28. 3、多个dwr.xml文件的配置 可能有几种情况，我们一一列举。一个servlet，多个dwr.xml配置文件；多个servlet，每个servlet对应一个或多个dwr.xml配置文件。 3.1、一个servlet，多个dwr.xml配置文件
dwr-invoker uk.ltd.getahead.dwr.DWRServlet config-1 WEB-INF/dwr1.xml config-2 WEB-INF/dwr2.xml dwr-invoker uk.ltd.getahead.dwr.DWRServlet dwr-invoker1 uk.ltd.getahead.dwr.DWRServlet config-admin WEB-INF/dwr1.xml debug true dwr-invoker /dwr/* dwr-invoker1 /dwr1/* - 29. 二、 dwr使用篇 1、调用没有返回值和参数的JAVA方法 1.1、dwr.xml的配置
标签中包括可以暴露给 javascript 访问的东西。 标签中指定 javascript 中可以访问的 java 类，并定义 DWR 应当如何获得要进行远程的类的实例。 creator="new" 属性指定 java 类实例的生成方式， new 意味着 DWR 应当调用类的默认构造函数来获得实例，其他的还有 spring 方式，通过与 IOC 容器 Spring 进行集成来获得实例等。 javascript=" testClass " 属性指定 javascript代码访问对象时使用的名称。 标签指定要公开给 javascript 的 java 类名。 标签指定要公开给 javascript 的方法。不指定的话就公开所有方法。 标签指定要防止被访问的方法。 1.2、javascript中调用 首先，引入 javascript 脚本 其中 TestClass.js 是 dwr 根据配置文件自动生成的， engine.js 和 util.js 是 dwr 自带的脚本文件。 其次，编写调用 java 方法的 javascript 函数 Function callTestMethod1(){ testClass.testMethod1(); } - 30. 2、调用有简单返回值的java方法 2.1、dwr.xml的配置 配置同1.1
- 31. 4、调用返回JavaBean的java方法 4.1、dwr.xml的配置
标签负责公开用于 Web 远程的类和类的方法， 标签则负责这些方法的参数和返回类型。 convert 元素的作用是告诉 DWR 在服务器端 Java 对象表示和序列化的 JavaScript 之间如何转换数据类型。 DWR 自动地在 Java 和 JavaScript 表示之间调整简单数据类型。这些类型包括 Java 原生类型和它们各自的封装类表示，还有 String 、 Date 、数组和集合类型。 DWR 也能把 JavaBean 转换成 JavaScript 表示，但是出于安全性的原因，要求显式的配置， 标签就是完成此功能的。 converter="bean" 属性指定转换的方式采用 JavaBean 命名规范， match=""com.dwr.TestBean" 属性指定要转换的 javabean 名称， 标签指定要转换的 JavaBean 属性。 4.2 、javascript中调用 首先，引入 javascript 脚本 其次，编写调用 java 方法的 javascript 函数和接收返回值的回调函数 Function callTestMethod4(){ testClass.testMethod4(callBackFortestMethod4); } Function callBackFortestMethod4(data){ // 其中 date 接收方法的返回值 // 对于 JavaBean 返回值，有两种方式处理 // 不知道属性名称时，使用如下方法 for(var property in data){ alert("property:"+property); alert(property+":"+data[property]); } // 知道属性名称时，使用如下方法 alert(data.username); alert(data.password); } 其中 callBackFortestMethod4 是接收返回值的回调函数 - 32. 5、调用有JavaBean参数的java方法 5.1、dwr.xml的配置 配置同4.1 5.2 、javascript中调用 首先，引入 javascript 脚本 其次，编写调用 java 方法的 javascript 函数 Function callTestMethod5(){ // 定义要传到 java 方法中的参数 var data; // 构造参数， date 实际上是一个 object data = { username:"user", password:"password" } testClass.testMethod5(data); } 6、调用返回List、Set或者Map的java方法 6.1、dwr.xml的配置 配置同4.1
标签。 - 33. 6.2 、javascript中调用(以返回List为例，List的元素为TestBean) 首先，引入 javascript 脚本 其次，编写调用 java 方法的 javascript 函数和接收返回值的回调函数 Function callTestMethod6(){ testClass.testMethod6(callBackFortestMethod6); } Function callBackFortestMethod6(data){ // 其中 date 接收方法的返回值 // 对于 JavaBean 返回值，有两种方式处理 // 不知道属性名称时，使用如下方法 // 知道属性名称时，使用如下方法 for(var i=0;i
); ]]> 标签是用来声明 java 方法中 List 、 Set 或者 Map 参数所包含的确切类，以便 java 代码作出判断。 - 34. 7.2 、javascript中调用(以返回List为例，List的元素为TestBean) 首先，引入 javascript 脚本 其次，编写调用 java 方法的 javascript 函数 Function callTestMethod7(){ // 定义要传到 java 方法中的参数 var data; // 构造参数， date 实际上是一个 object 数组，即数组的每个元素均为 object data = [ { username:"user1", password:"password2" }, { username:"user2", password:" password2" } ]; testClass.testMethod7(data); } 注意： 1、 对于第 6 种情况，如果 java 方法的返回值为 Map ，则在接收该返回值的 javascript 回调函数中如下处理： function callBackFortestMethod(data){ // 其中 date 接收方法的返回值 for(var property in data){ var bean = data[property]; alert(bean.username); alert(bean.password); } }
- 35. 2、 对于第 7 种情况，如果 java 的方法的参数为 Map （假设其 key 为 String ， value 为 TestBean ），则在调用该方法的 javascript 函数中用如下方法构造要传递的参数： function callTestMethod (){ // 定义要传到 java 方法中的参数 var data; // 构造参数， date 实际上是一个 object ，其属性名为 Map 的 key ，属性值为 Map 的 value data = { "key1":{ username:"user1", password:"password2" }, "key2":{ username:"user2", password:" password2" } }; testClass.testMethod(data); } 并且在 dwr.xml 中增加如下的配置段
); ]]> 3、 由以上可以发现，对于 java 方法的返回值为 List(Set) 的情况， DWR 将其转化为 Object 数组，传递个 javascript ；对于 java 方法的返回值为 Map 的情况， DWR 将其转化为一个 Object ，其中 Object 的属性为原 Map 的 key 值，属性值为原 Map 相应的 value 值。 4、 如果 java 方法的参数为 List(Set) 和 Map 的情况， javascript 中也要根据 3 种所说，构造相应的 javascript 数据来传递到 java 中。- 36. ※ 项目案例和总结 在上次东京都的项目中的夜明/日暮時間設定页面中起到很好的无刷新等待效果。代码如下 UserService.getTimeSetData(stDate,edDate,stTime,edTime,selType,TimeSetData); function TimeSetData(timeData){ //modify by wangli in gb if (timeData.length==0) alert("指定夜明/日暮期間に登録情報がありません"); //alert(timeData.length); if(timeData.length>10&&timeDataTable.rows.length
- 37. 本次项目中在检索的菜单链接前使用了dwr设置session信息。代码如下 function openMenu(){ for(var row=0;row
- 38. 结束语经过学习我们明白js是我们对页面元素操作的基础。而jquery则是我们为了提高对页面操作的编程效率和轻松维护页面的一个极好框架。Dwr则可以方便我们在页面只有很小的局部更改为了不需用户等待刷新延迟的极好选择。当然它们都还更多很好用的东东。希望通过这个学习能够提起大家对它们的兴趣。学到它们的更多优点用于我们的项目中。为此一起加油吧。
PPT 图集
相关PPT