《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的构造器 如 div ula 第二种是用jQuery对象的几个methods 方法 这两种方式还可以联合起来混合使用 2 1 实例 function orderList addClass red 给orderList添加了一个样式 function orderList li 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 层级parent child 匹配所有的子级元素prev next 匹配所有紧接在prev元素后的next元素prev siblings 匹配prev元素之后的所有siblings元素例子 cj html XPath专题一 如果我如下的一段html代码比如下面html代码li 1li 2li 2divclass aaaa title ttt li 1li 2li 2li 1li 2li 2li 1li 2li 2 XPath专题二 1 第一种根据属性选择E attr title click 即选择所有元素内属性带有title的元素即li 1li 2li 1li 2 div title click 选择所有div标签下的所有带title的元素即li 1li 2 XPath专题三 2 第二种根据属性值选择E attr val div title ttt click 选择div下所有title属性等于ttt的元素即li 1如果是 title ttt click 所有元素下属性title等于ttt的元素li 1li 1注意 1 3版本在这个地方又一些小的变动在1 3版本下面 除掉了 一定要注意 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 除掉 each函数介绍 迭代函数 类似for案例 当我们要做一些选择的时候 如果我们还是要想我们以前那样去遍历 觉得很麻烦 还是哪句话 你想偷点懒的话 jquery会帮助你 见maopao html如你有一段这样的html1234全选 取消全选 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 呵呵 效果之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 fast slow 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 or fast 或表示动画时长的毫秒数值 如 1000 见实例maopao html属性的详细意思请查看api ajax 1 jQuery的form js文件来实现ajaxName Comment waitfortheDOMtobeloaded document ready function varqueryString myForm formSerialize bind myForm andprovideasimplecallbackfunction myForm ajaxForm function alert Thankyouforyourcomment Ajax一 varoptions target output1 targetelement s tobeupdatedwithserverresponsebeforeSubmit showRequest pre submitcallbacksuccess showResponse post submitcallback otheravailableoptions url url overrideforform s action attribute type type get or post overrideforform s method attribute dataType null xml script or json 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 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选择器开始继承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和其中注入各属性需要实现Serializable序列化接口 属性的属性也是需要序列化如果没有序列化 你注入的属性就是null 任务调度使用说明 何为序列化简单的说序列化就是一种用来处理对象流的机制 所谓对象流也就是将对象的内容进行流化 可以对流化后的对象进行读写操作 也可将流化后的对象传输于网络之间 序列化是为了解决在对对象流进行读写操作时所引发的问题序列化的实现 将需要被序列化的类实现Serializable接口 该接口没有需要实现的方法 implementsSerializable只是为了标注该对象是可被序列化的 然后使用一个输出流 如 FileOutputStream 来构造一个ObjectOutputStream 对象流 对象 接着 使用ObjectOutputStream对象的writeObject Objectobj 方法就可以将参数为obj的对象写出 即保存其状态 要恢复的话则用输入流 想知道更多关于序列化知识 请去google 任务调度使用说明 对现有系统使用注意事项 目录 com citicbank scheduler job可以看看MyQuartzJobBean 实现了Job接口 如果我们自己想去写一个Jobbean的话 我们也是可以的 完全copy一下就行 这是一个工作的入口 上面我们提到过 job class name这个字段 这个字段里面放的就是上述bean 该bean必须是实现了Job接口 下面的 Service类都是我们的单个业务需求 不过该service类必须序列化 一定要记住 我还写了一个SpringBeanService类 通过这个类 我们可以获取到上下文中的对应的Bean对象 在这里我们就可以解决小王同志的不能获取数据库对象的问题 现在我们通过beanName可以获取对应的数据库对象 任务调度使用说明 目录 com citicbank quartz dao对数据库的相应操作 我们都是继承BaseDAO java目前对数据库的操作 是采用spring的JdbcTemplate框架 有时间大家可以瞅瞅这个东西 还不错 跟ibatis很像 对于多数据库 需要大家自己到applicationContext xml中去配置