《jquery基础教程》PPT课件.ppt_第1页
《jquery基础教程》PPT课件.ppt_第2页
《jquery基础教程》PPT课件.ppt_第3页
《jquery基础教程》PPT课件.ppt_第4页
《jquery基础教程》PPT课件.ppt_第5页
已阅读5页,还剩36页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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程序供使用,效果好。 (/home) 1.7 DHTML DOM选择器与链式语法 $(“p.surprise”).addClass(“ohmy”).show(“slow”);,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,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()这点请大家记住。 不要急,等会给大家展示几个实例。,选择器和事件,1. how to find me! 为什么要有选择器?选择器的作用是干什么? 在普通的JS里面,我们做选择有以下的一些方法: document.getElementById(“id“) document.getElementByName(“name“) document.getElementByTagName(“tagname“) 这些东西写起来是不是好长啊,写的好烦啊!有没有什么更好的方法让我少写一下,我想偷点懒;如果你有这个想法,那么我现在告诉你,选择JQuery就对了。呵呵! 如果大家对所谓的JS框架有所了解的话,相信应该知道这个所谓的框架的基本原理,就是对上述的那些语句进行了封装。 如果说到选择器,就不的不谈的”$()”,待续,选择器和事件,工厂函数$() $()函数会消除使用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添加了一个样式,选择器和事件,例子2:光标的切换 $(function() $(“#orderList li:last“).hover(function() $(this).addClass(“red“); , function() $(this).removeClass(“red“); ); ); 当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效 见maopao.html 注意: #orderList li: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.html 5.过滤 eq() hasClass() filter(expr) is(expr) not(expr) slice(start,end) 选择一个子集 见dom.html,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,DOM操作四,8. 层级 parent child:匹配所有的子级元素 prev + next:匹配所有紧接在prev元素后的next元素 prev siblings:匹配prev元素之后的所有siblings元素 例子:cj.html,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,XPath 专题二,1.第一种根据属性选择Eattr $(“title“).click() 即选择所有元素内属性带有title的元素 即 li-1 li-2 li-1 li-2 $(“divtitle“).click() 选择所有div标签下的所有带title的元素 即 li-1 li-2,XPath 专题三,2.第二种根据属性值选择Eattr=val $(“divtitle=ttt“).click() 选择div下所有title属性等于ttt的元素 即 li-1 如果是 $(“title=ttt“).click() 所有元素下属性title等于ttt的元素 li-1 li-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 如你有一段这样的html 1 2 3 4 全选/取消全选,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中的大部分都支持,具体的详细信息请看W3C 2.CSS选择符:addClass() 如:$(“p”).addClass(“class”); 3.修改内敛的CSS css(“color”):得到color的值 css(“color”,”blue”)把color值改为blue css(“color”:”blue”,”font-size”:”20px”),效果之速度一,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,效果之速度二,3. show(slow)会同时修改宽度、高度和不透明度属性,因此,事实上它只是animate()方法的一种内置了特定样式属性的简写形式。 $().animate(height: show, width:show, opacity:show, slow);,Animate me,什么是Animate? 使什么有生气,激励(引申为动态效果) animate(params,duration,easing,callback) params:必选,其他可选 params:一组包含作为动画属性和终值的样式属性和及其值的集合 duration:(默认值: “normal“) 三种预定速度之一的字符串(“slow“, “normal“, or “fast“)或表示动画时长的毫秒数值(如:1000) 见实例 maopao.html 属性的详细意思请查看api,ajax,1.jQuery的form.js文件来实现ajax Name: Comment: / wait for the DOM to be loaded $(document).ready(function() var queryString = $(#myForm).formSerialize(); / bind myForm and provide a simple callback function $(#myForm).ajaxForm(function() alert(“Thank you for your comment!“); ); ); ,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 forms action attribute /type: type / get or post, override for forms 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);,Ajax 二,function showRequest(formData, jqForm, options) formData是一个数组 jqForm 是一个对象 function showResponse(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=“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,jquery 性能,jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发,性能问题还是值得大家的注意的 1. 从ID选择器开始继承 Traffic Light Red Yellow Green ,jquery 性能,在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法 要是想这样的语句的效率怎么样? var traffic_button = $(#content .button); var traffic_button = $(#traffic_button); 上面两条语句那条要好一些? 当然是后者 选择多个元素 提到多元素选择其实是在说DOM遍历和循环,特点是慢 为了提高效率,我们该做一些什么? var traffic_lights = $(#traffic_light input);,jquery 性能(二),第二快的选择器是tag选择器($(head),因为它来自原生的getElementsByTagName() 方法. 2. 在class前使用tag Traffic Light Red Yellow Green ; 总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID),jquery 性能(二),var active_light = $(#traffic_light input.on); 注意:在jquery 中class是最慢的选择器,IE浏览器下它会遍历所有DOM节点,不管它用在哪里。 不要用tag name 来修饰ID 如:var content = $(div #content) 这个例子将会遍历所有的div元素来查找id为content的那个节点,jquery 性能(二),用ID 修饰ID也是画蛇添足 var traffic_light=$(#content #traffic_light),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); 不管在那种程序里面,这个方法都是一种好的编程习惯,jquery 性能(三),为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次 4.子查询 jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经保存了一个父级对象在变量里, 这样大大提高对其子元素的操作,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); 灯息,jquery 性能(四),冒泡 除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用. 代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件. 见实例 父级元素扮演了一个调度员的角色, 它可以基于目标元素的绑定事件来选择它需要触发的事件. 如果有空可以把jquery的源码好好的研究一番,会有另一番收获哦!O(_)O,任务调度使用说明,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这张表!,任务调度使用说明,表qrtz_job_details 字段:job_class_name 各位要写的所有的服务类,都是放在这个字段上(完整路径,如:com.citicbank.quartz.job.MyQuartzJobBean) 这个类会被序列化得保存到上述字段,quartz在运行的时候会读取上述字段,然

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论