• 1. JQuery 入门1.JQuery特点: 短小精悍(19k),接口设计得精妙(自然语言的风格),与程序思路配合精密。极大限度地体现了javascript的特性。 1.1 轻量级(19k) jquery-1.3.2.min.js 19 56k jquery-1.3.2.js 4337 118k 1.2 支持xpath查询,dom1-3,轻松选择需要的元素; 1.3 css支持;简单的动画实现,支持自定义动画; 1.4 跨浏览器 1.5 支持插件开发,现有插件多; 1.6 拥有官方UI程序供使用,效果好。 (http://jqueryui.com/home) 1.7 DHTML DOM选择器与链式语法 $(“p.surprise”).addClass(“ohmy”).show(“slow”);
  • 2. JQuery 入门2.JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们用一个ready事件作为处理HTML文档的开始. 这个地方跟Ext的Ext.onReady(function() {})类似。 $(document).ready(function() { // do stuff when DOM is ready }); 这是一种最普遍也是一种最基本的方式。 如果你熟悉了JQuery之后,你可以采用一些其他的简写的方式,如: $(function() {}); $().ready(function() {}); 前提条件是你已经加入了jquery的基本js! O(∩_∩)O~
  • 3. JQuery 入门 2.1 Hello,Jquery! 例子1: $(function(){ alert("Hello, Jquery!"); }); 页面会直接显示Hello, Jquery!为什么??因为在载入页面的时候,因为这个JS在head标签里面,故先会载入js,它就跟我们写的普通的js类似,直接放在js标签里面。 ** 哪要是我们想处理一些事件咋办??如:click event, change event and so on! 在普通的js中,我们是在某些标签里面添加了一些相关的属性,如: onClick(), onChange()… 在Jquery里面,为了方便,我们除掉了‘on’,直接就是click(),change()…这点请大家记住。 不要急,等会给大家展示几个实例。
  • 4. 选择器和事件1. how to find me! 为什么要有选择器?选择器的作用是干什么? 在普通的JS里面,我们做选择有以下的一些方法: document.getElementById("id") document.getElementByName("name") document.getElementByTagName("tagname") …… 这些东西写起来是不是好长啊,写的好烦啊!有没有什么更好的方法让我少写一下,我想偷点懒;如果你有这个想法,那么我现在告诉你,选择JQuery就对了。呵呵! 如果大家对所谓的JS框架有所了解的话,相信应该知道这个所谓的框架的基本原理,就是对上述的那些语句进行了封装。 如果说到选择器,就不的不谈的”$()”,待续…
  • 5. 选择器和事件 工厂函数$() $()函数会消除使用for循环访问一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,并且会被保存到一个jQuery对象中。 放在括号中的变量基本上是无限制的! 1.1例子 见choose.html siblings(expr)--同辈元素 2.jQuery提供两种方式来选择html的elements,第一种是用css和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。 2.1:实例 $(function() { $("#orderList").addClass("red"); }); 给orderList添加了一个样式 $(function() { $("#orderList > li").addClass("red"); }); 给orderList中的li添加了一个样式
  • 6. 选择器和事件例子2:光标的切换 $(function() { $("#orderList li:last").hover(function() { $(this).addClass("red"); }, function() { $(this).removeClass("red"); } ); }); 当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效 见maopao.html 注意: #orderList li:last---这是一种什么样的写法?这就是传说总的XPath表示法,如果你采用这种写法,html中一般的节点你都能找到
  • 7. DOM操作一对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素 insertAfter()、after()-外部插入 见dom.html文件 3.appendTo() 把某个段落追加到某个元素中 如:
    $(“#tt”).appendTo(‘#ttt’);
    append()这个函数是什么意思?? pretend(),pretendTo()---内部插入
  • 8. DOM操作二4. 要用新元素或文本替换每个匹配的元素,使用html()、text()、val()、attr(); 要移除每个匹配的元素中的元素,使用empty(); 要从文档中移除每个匹配的元素及其后代元素使用remove(); 注意remove和empty的区别 例子:dom.html 5.过滤 eq() hasClass() filter(expr) is(expr) not(expr) slice(start,[end]) 选择一个子集 见dom.html
  • 9. DOM操作三6.属性 :first :not 去除所有与给定选择器匹配的元素 :last :even :odd :eq :gt :lt :header gt(1) 7.子元素 :nth-child 匹配其父元素下的第N个子或奇偶元素 :first-child :last-child :only-child nth-child()是从1开始,而eq()是从0开始,这个地方要注意 实例见child.html
  • 10. DOM操作四8. 层级 parent > child:匹配所有的子级元素 prev + next:匹配所有紧接在prev元素后的next元素 prev ~ siblings:匹配prev元素之后的所有siblings元素 例子:cj.html
  • 11. XPath 专题一如果我如下的一段html代码 比如下面html代码
    • li-1
    • li-2
    • li-2
    div class="aaaa" title="ttt">li-1
    li-2
    li-2
    • li-1
    • li-2
    • li-2
    li-1
    li-2
    li-2
  • 12. XPath 专题二1.第一种根据属性选择E[@attr] $("[@title]").click().......... 即选择所有元素内属性带有title的元素 即
  • li-1
  • li-2
  • li-1
    li-2
    $("div[@title]").click().......... 选择所有div标签下的所有带title的元素 即
    li-1
    li-2
  • 13. XPath 专题三2.第二种根据属性值选择E[@attr=val] $("div[@title=ttt]").click()................ 选择div下所有title属性等于ttt的元素 即
    li-1
    如果是 $("[@title=ttt]").click()................ 所有元素下属性title等于ttt的元素
  • li-1
  • li-1
    注意: 1.3版本在这个地方又一些小的变动 在1.3版本下面@除掉了,一定要注意!
  • 14. XPath 专题 四3.第三种根据属性值开始字母选择E[@attr^=val] $("div[@title^=t]").click()................ 所有div元素下所有属性title值是以t为开头的元素 第四种根据属性值开始字母选择E[@attr$=val] $("div[@title$=t]").click()................ 所有div元素下所有属性title值是以t为结尾的元素 第五种根据属性值包含字母选择E[@attr*=val] $("div[@title*=t]").click()................ 所有div元素下所有属性title值是包含t的所有元素 第六种根据多个属性选择E[@attr=val][@attr=val] $("div[@title=ttt][@class=aaaa]").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素 以上的jquery版本是1.2.6,如果是1.3.2,“@”除掉
  • 15. each 函数介绍迭代函数,类似for 案例:当我们要做一些选择的时候,如果我们还是要想我们以前那样去遍历,觉得很麻烦,还是哪句话,你想偷点懒的话,jquery会帮助你! 见maopao.html 如你有一段这样的html 16. each 函数介绍//全选 $("#selectall").click(function() { $("input[@name='newsId']").each(function() { $(this).attr("checked", true); }); }); //反选 $("#rselectall").click(function() { $("input[@name='newsId']").each(function() { /*if($(this).attr("checked")) $(this).attr("checked", false); else $(this).attr("checked", true);*/ $(this).attr("checked",!$(this).attr("checked")); }); }); //取消全选 $("#delselect").click(function() { $("input[@name='newsId']").each(function() { $(this).attr("checked", false); }); }); 要想用到一些更加炫的效果,那么去看api,呵呵!
  • 17. 效果之CSS1.jQuery 对CSS从1-3中的大部分都支持,具体的详细信息请看W3C 2.CSS选择符:addClass() 如:$(“p”).addClass(“class”); 3.修改内敛的CSS css(“color”):得到color的值 css(“color”,”blue”)把color值改为blue css({“color”:”blue”,”font-size”:”20px”})
  • 18. 效果之速度一1. 显示 隐藏 show() hide()跟display属性类似 例子见choose.html show(param),param可以是’slow’,’normal’,’fast’ slow=0.6s normal=0.4s fast=0.2s 2. 淡入淡出 fadeIn(),fadeOut() 例子见choose.html
  • 19. 效果之速度二3. show(‘slow’)会同时修改宽度、高度和不透明度属性,因此,事实上它只是animate()方法的一种内置了特定样式属性的简写形式。 $().animate({height: ‘show’, width:’show’, opacity:’show’}, ‘slow’);
  • 20. Animate me什么是Animate? 使什么有生气,激励(引申为动态效果) animate(params,duration,easing,callback) params:必选,其他可选 params:一组包含作为动画属性和终值的样式属性和及其值的集合 duration:(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) 见实例 maopao.html 属性的详细意思请查看api
  • 21. ajax1.jQuery的form.js文件来实现ajax
         Name:      Comment:      
                      
  • 22. Ajax 一var options = { //target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse, // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; $('#myForm').ajaxForm(options);
  • 23. Ajax 二function showRequest(formData, jqForm, options) { } formData是一个数组 jqForm 是一个对象 function showResponse(responseText, statusText) { } 例子见scheduler系统
  • 24. Ajax 三1.Jquery 自带的ajax $.post(url, [data], [callback], [type] ); type:客户端的请求类型,如:json,xml $.get(url, [data], [callback], [type] ) $.getJSON(url,[data],[callback]); 2. $(“#fff”).load(“test.do”,{limit:25},function(){}); 中间的是参数,最后是回调函数
  • 25. Ajax 四$.ajaxSetup({ url:”” });用来设置全局变量 $.ajax({ type: "POST", url: “test.do", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } , timeout:1000,//设置请求超时时间(毫秒)。此设置将覆盖全局设置 error: function(){} });
  • 26. 插件tablesortTablesort 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 主要的特点包括: 1.多列排序 2.支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序 3.支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 4.支持第二个隐藏域排序 5.可扩展外观 6.程序简小,打包后只有 7.4K
  • 27. 插件tablesort1.通过class属性可以在初始化时,对某列排序。 class=“tablesorter {sortlist:[[0,0],[4,0]]}” 对第一列和第五列俺升序排列 2.取消第2列,第3列排序 $(“#table”).tablesorter({headers:{1:{sorter:false},2:{sorter:false}}}); 3.强制某列排序 $(“myTable”).tablesorter({sortFoce:[[0,0]]}); Jquery.validate.js
  • 28. jquery 性能jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发,性能问题还是值得大家的注意的 1. 从ID选择器开始继承

    Traffic Light

    • Red
    • Yellow
    • Green
  • 29. jquery 性能 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法 要是想这样的语句的效率怎么样?? var traffic_button = $(‘#content .button’); var traffic_button = $(‘#traffic_button’); 上面两条语句那条要好一些?? 当然是后者 选择多个元素 提到多元素选择其实是在说DOM遍历和循环,特点是慢 为了提高效率,我们该做一些什么?? var traffic_lights = $(‘#traffic_light input’);
  • 30. jquery 性能(二)第二快的选择器是tag选择器($(’head’)),因为它来自原生的getElementsByTagName() 方法. 2. 在class前使用tag

    Traffic Light

    • Red
    • Yellow
    • Green
    ; 总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID)
  • 31. jquery 性能(二)var active_light = $(‘#traffic_light input.on’); 注意:在jquery 中class是最慢的选择器,IE浏览器下它会遍历所有DOM节点,不管它用在哪里。 不要用tag name 来修饰ID 如:var content = $('div #content') 这个例子将会遍历所有的div元素来查找id为content的那个节点
  • 32. jquery 性能(二)用ID 修饰ID也是画蛇添足 var traffic_light=$('#content #traffic_light')
  • 33. jquery 性能(三)要养成缓存对象的习惯 3. 将jquery 对象缓存起来 $(‘#traffic_light input.on).bind(’click‘, function(){…}); $(’#traffic_light input.on).css(‘border’, ‘3px dashed yellow’); $(‘#traffic_light input.on).css(’background-color‘, ‘orange‘); $(’#traffic_light input.on).fadeIn(’slow’); var $active_light = $(‘#traffic_light input.on’); $active_light.bind(‘click’, function(){…}); $active_light.css(‘border’, ‘3px dashed yellow’); $active_light.css(‘background-color’, ‘orange’); $active_light.fadeIn(’slow’); 不管在那种程序里面,这个方法都是一种好的编程习惯
  • 34. jquery 性能(三)为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次 4.子查询 jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经保存了一个父级对象在变量里, 这样大大提高对其子元素的操作
  • 35. jquery 性能(三)

    Traffic Light

    • Red
    • Yellow
    • Green
    var $traffic_light = $(‘#traffic_light’), $active_light = $traffic_light.find(‘input.on’),灯亮 $inactive_lights = $traffic_light.find(‘input.off’); 灯息
  • 36. jquery 性能(四)冒泡 除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用. 代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件. 见实例 父级元素扮演了一个调度员的角色, 它可以基于目标元素的绑定事件来选择它需要触发的事件. 如果有空可以把jquery的源码好好的研究一番,会有另一番收获哦!O(∩_∩)O~
  • 37. 任务调度使用说明SchedulerServiceImpl.java 主要的表 添加一个Job在表qrtz_job_details插入一条记录 添加一个Simple Trigger在表qrtz_simple_triggers 添加一个Cron Trigger 在表qrtz_cron_triggers插入一条记录 添加Simple Trigger和Cron Trigger都会同时在表qrtz_triggers插入一条记录,我们开始看到的第一个页面调度任务列表的数据就是从qrtz_triggers表获取 一定要注意qrtz_job_details这张表!
  • 38. 任务调度使用说明表qrtz_job_details 字段:job_class_name 各位要写的所有的服务类,都是放在这个字段上(完整路径,如:com.citicbank.quartz.job.MyQuartzJobBean) 这个类会被序列化得保存到上述字段,quartz在运行的时候会读取上述字段,然后对其反序列化。 这也就是首波同学为什么不能取得数据源的原因,因为你写的东西没有经过序列化。 simpleService和其中注入各属性需要实现Serializable序列化接口 ,属性的属性也是需要序列化 如果没有序列化,你注入的属性就是null
  • 39. 任务调度使用说明何为序列化 简单的说序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化。可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间。序列化是为了解决在对对象流进行读写操作时所引发的问题 序列化的实现:将需要被序列化的类实现Serializable接口,该接口没有需要实现的方法,implements Serializable只是为了标注该对象是可被序列化的,然后使用一个输出流(如:FileOutputStream)来构造一个 ObjectOutputStream(对象流)对象,接着,使用ObjectOutputStream对象的writeObject(Object obj)方法就可以将参数为obj的对象写出(即保存其状态),要恢复的话则用输入流。 想知道更多关于序列化知识,请去google.
  • 40. 任务调度使用说明对现有系统使用注意事项: 目录:com.citicbank.scheduler.job 可以看看MyQuartzJobBean,实现了Job接口,如果我们自己想去写一个Jobbean的话,我们也是可以的,完全copy一下就行。这是一个工作的入口,上面我们提到过,job_class_name这个字段,这个字段里面放的就是上述bean,该bean必须是实现了Job接口。 下面的*Service类都是我们的单个业务需求,不过该service类必须序列化,一定要记住!我还写了一个SpringBeanService类,通过这个类,我们可以获取到上下文中的对应的Bean对象。 在这里我们就可以解决小王同志的不能获取数据库对象的问题,现在我们通过beanName可以获取对应的数据库对象
  • 41. 任务调度使用说明目录:com.citicbank.quartz.dao 对数据库的相应操作,我们都是继承BaseDAO.java 目前对数据库的操作,是采用spring的JdbcTemplate框架,有时间大家可以瞅瞅这个东西,还不错,跟ibatis很像! 对于多数据库,需要大家自己到applicationContext.xml中去配置