《jquery基础教程》PPT课件.ppt

JQuery入门,1.JQuery特点：短小精悍(19k)，接口设计得精妙(自然语言的风格)，与程序思路配合精密。极大限度地体现了javascript的特性。1.1轻量级（19k）jquery-1.3.2.min.js1956kjquery-1.3.2.js4337118k1.2支持xpath查询，dom1-3，轻松选择需要的元素；1.3css支持；简单的动画实现，支持自定义动画；1.4跨浏览器1.5支持插件开发，现有插件多；1.6拥有官方UI程序供使用，效果好。($(“p.surprise”).addClass(“ohmy”).show(“slow”);,JQuery入门,2.JQuery是怎么工作?在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件。所以,我们用一个ready事件作为处理HTML文档的开始.这个地方跟Ext的Ext.onReady(function()类似。$(document).ready(function()/dostuffwhenDOMisready);这是一种最普遍也是一种最基本的方式。如果你熟悉了JQuery之后，你可以采用一些其他的简写的方式，如：$(function();$().ready(function();前提条件是你已经加入了jquery的基本js！O(_)O,JQuery入门,2.1Hello,Jquery！例子1：$(function()alert(Hello,Jquery!););页面会直接显示Hello,Jquery!为什么？因为在载入页面的时候，因为这个JS在head标签里面，故先会载入js，它就跟我们写的普通的js类似，直接放在js标签里面。*哪要是我们想处理一些事件咋办？如：clickevent，changeeventandsoon!在普通的js中，我们是在某些标签里面添加了一些相关的属性，如：onClick(),onChange()在Jquery里面，为了方便，我们除掉了on，直接就是click(),change()这点请大家记住。不要急，等会给大家展示几个实例。,选择器和事件,1.howtofindme!为什么要有选择器？选择器的作用是干什么？在普通的JS里面，我们做选择有以下的一些方法：document.getElementById(id)document.getElementByName(name)document.getElementByTagName(tagname)这些东西写起来是不是好长啊，写的好烦啊！有没有什么更好的方法让我少写一下，我想偷点懒;如果你有这个想法，那么我现在告诉你，选择JQuery就对了。呵呵！如果大家对所谓的JS框架有所了解的话，相信应该知道这个所谓的框架的基本原理，就是对上述的那些语句进行了封装。如果说到选择器，就不的不谈的”$()”，待续,选择器和事件,工厂函数$()$()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。放在括号中的变量基本上是无限制的！1.1例子见choose.htmlsiblings(expr)-同辈元素2.jQuery提供两种方式来选择html的elements，第一种是用css和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$(divula)）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。2.1：实例$(function()$(#orderList).addClass(red););给orderList添加了一个样式$(function()$(#orderListli).addClass(red););给orderList中的li添加了一个样式,选择器和事件,例子2：光标的切换$(function()$(#orderListli:last).hover(function()$(this).addClass(red);,function()$(this).removeClass(red);););当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效见maopao.html注意：#orderListli:last-这是一种什么样的写法？这就是传说总的XPath表示法，如果你采用这种写法，html中一般的节点你都能找到,DOM操作一,对文档一些节点的操作1.toggleClass():交替的移除和添加类2.insertBefore()、before()在某元素的前面插入元素insertAfter()、after()-外部插入见dom.html文件3.appendTo()把某个段落追加到某个元素中如：$(“#tt”).appendTo(#ttt);append()这个函数是什么意思？pretend(),pretendTo()-内部插入,DOM操作二,4.要用新元素或文本替换每个匹配的元素，使用html()、text()、val()、attr();要移除每个匹配的元素中的元素，使用empty();要从文档中移除每个匹配的元素及其后代元素使用remove();注意remove和empty的区别例子：dom.html5.过滤eq()hasClass()filter(expr)is(expr)not(expr)slice(start,end)选择一个子集见dom.html,DOM操作三,6.属性:first:not去除所有与给定选择器匹配的元素:last:even:odd:eq:gt:lt:headergt(1)7.子元素:nth-child匹配其父元素下的第N个子或奇偶元素:first-child:last-child:only-childnth-child()是从1开始，而eq()是从0开始，这个地方要注意实例见child.html,DOM操作四,8.层级parentchild:匹配所有的子级元素prev+next:匹配所有紧接在prev元素后的next元素prevsiblings:匹配prev元素之后的所有siblings元素例子：cj.html,XPath专题一,如果我如下的一段html代码比如下面html代码li-1li-2li-2divclass=aaaatitle=tttli-1li-2li-2li-1li-2li-2li-1li-2li-2,XPath专题二,1.第一种根据属性选择Eattr$(title).click().即选择所有元素内属性带有title的元素即li-1li-2li-1li-2$(divtitle).click().选择所有div标签下的所有带title的元素即li-1li-2,XPath专题三,2.第二种根据属性值选择Eattr=val$(divtitle=ttt).click().选择div下所有title属性等于ttt的元素即li-1如果是$(title=ttt).click().所有元素下属性title等于ttt的元素li-1li-1注意：1.3版本在这个地方又一些小的变动在1.3版本下面除掉了，一定要注意！,XPath专题四,3.第三种根据属性值开始字母选择Eattr=val$(divtitle=t).click().所有div元素下所有属性title值是以t为开头的元素第四种根据属性值开始字母选择Eattr$=val$(divtitle$=t).click().所有div元素下所有属性title值是以t为结尾的元素第五种根据属性值包含字母选择Eattr*=val$(divtitle*=t).click().所有div元素下所有属性title值是包含t的所有元素第六种根据多个属性选择Eattr=valattr=val$(divtitle=tttclass=aaaa).click().所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素以上的jquery版本是1.2.6，如果是1.3.2，“”除掉,each函数介绍,迭代函数，类似for案例：当我们要做一些选择的时候，如果我们还是要想我们以前那样去遍历，觉得很麻烦，还是哪句话，你想偷点懒的话，jquery会帮助你！见maopao.html如你有一段这样的html1234全选/取消全选,each函数介绍,/全选$(#selectall).click(function()$(inputname=newsId).each(function()$(this).attr(checked,true);););/反选$(#rselectall).click(function()$(inputname=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()$(inputname=newsId).each(function()$(this).attr(checked,false);););要想用到一些更加炫的效果，那么去看api，呵呵！,效果之CSS,1.jQuery对CSS从1-3中的大部分都支持，具体的详细信息请看W3C2.CSS选择符：addClass()如：$(“p”).addClass(“class”);3.修改内敛的CSScss(“color”):得到color的值css(“color”,”blue”)把color值改为bluecss(“color”:”blue”,”font-size”:”20px”),效果之速度一,1.显示隐藏show()hide()跟display属性类似例子见choose.htmlshow(param),param可以是slow，normal，fastslow=0.6snormal=0.4sfast=0.2s2.淡入淡出fadeIn(),fadeOut()例子见choose.html,效果之速度二,3.show(slow)会同时修改宽度、高度和不透明度属性，因此，事实上它只是animate()方法的一种内置了特定样式属性的简写形式。$().animate(height:show,width:show,opacity:show,slow);,Animateme,什么是Animate？使什么有生气，激励（引申为动态效果）animate(params,duration,easing,callback)params:必选，其他可选params:一组包含作为动画属性和终值的样式属性和及其值的集合duration:(默认值:normal)三种预定速度之一的字符串(slow,normal,orfast)或表示动画时长的毫秒数值(如：1000)见实例maopao.html属性的详细意思请查看api,ajax,1.jQuery的form.js文件来实现ajaxName:Comment:/waitfortheDOMtobeloaded$(document).ready(function()varqueryString=$(#myForm).formSerialize();/bindmyFormandprovideasimplecallbackfunction$(#myForm).ajaxForm(function()alert(Thankyouforyourcomment!);););,Ajax一,varoptions=/target:#output1,/targetelement(s)tobeupdatedwithserverresponsebeforeSubmit:showRequest,/pre-submitcallbacksuccess:showResponse,/post-submitcallback/otheravailableoptions:/url:url/overrideforformsactionattribute/type:type/getorpost,overrideforformsmethodattribute/dataType:null/xml,script,orjson(expectedserverresponsetype)/clearForm:true/clearallformfieldsaftersuccessfulsubmitresetForm:true/resettheformaftersuccessfulsubmit/$.ajaxoptionscanbeusedheretoo,forexample:/timeout:3000;$(#myForm).ajaxForm(options);,Ajax二,functionshowRequest(formData,jqForm,options)formData是一个数组jqForm是一个对象functionshowResponse(responseText,statusText)例子见scheduler系统,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();中间的是参数，最后是回调函数,Ajax四,$.ajaxSetup(url:”);用来设置全局变量$.ajax(type:POST,url:“test.do,data:name=John,插件tablesort,Tablesort是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。主要的特点包括：1.多列排序2.支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序3.支持TH元素的ROWSPAN和COLSPAN属性4.支持第二个隐藏域排序5.可扩展外观6.程序简小，打包后只有7.4K,插件tablesort,1.通过class属性可以在初始化时，对某列排序。class=“tablesortersortlist: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,jquery性能,jquery虽在诸多的js类库中性能表现还算优秀,但毕竟不是在用原生的javascript开发,性能问题还是值得大家的注意的1.从ID选择器开始继承TrafficLightRedYellowGreen,jquery性能,在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法要是想这样的语句的效率怎么样？vartraffic_button=$(#content.button);vartraffic_button=$(#traffic_button);上面两条语句那条要好一些？当然是后者选择多个元素提到多元素选择其实是在说DOM遍历和循环，特点是慢为了提高效率，我们该做一些什么？vartraffic_lights=$(#traffic_lightinput);,jquery性能(二),第二快的选择器是tag选择器($(head)，因为它来自原生的getElementsByTagName()方法.2.在class前使用tagTrafficLightRedYellowGreen;总是用一个tagname来限制(修饰)class(并且不要忘记就近的ID),jquery性能(二),varactive_light=$(#traffic_lightinput.on);注意：在jquery中class是最慢的选择器，IE浏览器下它会遍历所有DOM节点，不管它用在哪里。不要用tagname来修饰ID如：varcontent=$(div#content)这个例子将会遍历所有的div元素来查找id为content的那个节点,jquery性能(二),用ID修饰ID也是画蛇添足vartraffic_light=$(#content#traffic_light),jquery性能(三),要养成缓存对象的习惯3.将jquery对象缓存起来$(#traffic_lightinput.on).bind(click,function();$(#traffic_lightinput.on).css(border,3pxdashedyellow);$(#traffic_lightinput.on).css(background-color,orange);$(#traffic_lightinput.on).fadeIn(slow);var$active_light=$(#traffic_lightinput.on);$active_light.bind(click,function();$active_light.css(border,3pxdashedyellow);$active_light.css(background-color,orange);$active_light.fadeIn(slow);不管在那种程序里面，这个方法都是一种好的编程习惯,jquery性能(三),为了记住我们本地变量是jquery的封装,通常用一个$作为变量前缀.记住,永远不要让相同的选择器在你的代码里出现多次4.子查询jQuery允许我们对一个已包装的对象使用附加的选择器操作.因为我们已经保存了一个父级对象在变量里,这样大大提高对其子元素的操作,jquery性能(三),TrafficLightRedYellowGreenvar$traffic_light=$(#traffic_light),$active_light=$traffic_light.find(input.on),灯亮$inactive_lights=$traffic_light.find(input.off);灯息,jquery性能(四),冒泡除非在特殊情况下,否则每一个js事件(例如:click,mouseover,等.)都会冒泡到父级节点.当我们需要给多个元素调用同个函数时这点会很有用.代替这种效率很差的多元素事件监听的方法就是,你只需向它们的父节点绑定一次,并且可以计算出哪个节点触发了事件.见实例父级元素扮演了一个调度员的角色,它可以基于目标元素的绑定事件来选择它需要触发的事件.如果有空可以把jquery的源码好好的研究一番，会有另一番收获哦！O(_)O,任务调度使用说明,SchedulerServiceImpl.java主要的表添加一个Job在表qrtz_job_details插入一条记录添加一个SimpleTrigger在表qrtz_simple_triggers添加一个CronTrigger在表qrtz_cron_triggers插入一条记录添加SimpleTrigger和CronTrigger都会同时在表qrtz_triggers插入一条记录，我们开始看到的第一个页面调度任务列表的数据就是从qrtz_triggers表获取一定要注意qrtz_job_details这张表！,任务调度使用说明,表qrtz_job_details字段：job_class_name各位要写的所有的服务类，都是放在这个字段上（完整路径，如：com.citicbank.quartz.job.MyQuartzJobBean）这个类会被序列化得保存到上述字段，quartz在运行的时候会读取上述字段，然后对其反序列化。这也就是首波同学为什么不能取得数据源的原因，因为你写的东西没有经过序列化。simpleService和其