第十讲jquery框架.ppt

一 什么是jQuery jQuery是一个JavaScript库 jQuery极大地简化了JavaScript编程 二 jQuery选择器 jQuery选择器允许您对HTML元素组或单个元素进行操作 jQuery中所有选择器都以美元符号开头 id选择器 jQuery id选择器通过HTML元素的id属性选取指定的元素 test 例如 当用户点击按钮后 有id test 属性的元素将被隐藏 document ready function btn1 click function p hide btn2 click function p show Thisisaparagraph HideShow document ready function btn1 click function p hide btn2 click function p show Thisisaparagraph HideShow class样式选择器 jQuery类选择器可以通过指定的class查找元素 test 实例 用户点击按钮后所有带有class test 属性的元素都隐藏 document ready function button click function test hide class样式选择器 jQuery类选择器可以通过指定的class查找元素 test 实例 用户点击按钮后所有带有class test 属性的元素都隐藏 document ready function button click function test hide p HTML元素选择器 jQueryHTML元素选择器可以通过指定的查找元素 body 实例 用户点击按钮后所有body内的元素都隐藏 document ready function button click function body hide 三 使用jQuery方法 四 jQuery事件 页面对不同访问者的响应叫做事件 常见事件 鼠标事件 键盘事件 表单事件 文档 窗口事件 如click keypress submit load dblclick keydown change resize mouseenter keyup focu sscroll mouseleave blur unload 五 Query事件方法 在jQuery中 大多数DOM事件都有一个等效的jQuery方法 常用的jQuery事件方法 1 document ready 方法文档完全加载完后执行该函数2 click 方法在用户点击HTML元素时执行 p click function this hide Query事件方法 3 dblclick 方法当双击元素时 运行的函数 p dblclick function this hide 4 mouseenter 方法当鼠标指针穿过元素时 运行的函数 p1 mouseenter function alert Youenteredp1 Query事件方法 5 mouseleave 方法当鼠标指针离开元素时运行的函数 p1 mouseleave function alert Bye Younowleavep1 6 mousedown 方法按下鼠标按键时 运行的函数 p1 mousedown function alert Mousedownoverp1 Query事件方法 7 mouseup 方法在元素上松开鼠标按钮时 运行的函数 p1 mouseup function alert Mouseupoverp1 8 focus 方法当元素获得焦点时 运行的函数 input focus function this css background color cccccc Query事件方法 9 blur 方法当元素失去焦点时 运行的函数 input blur function this css background color ffffff 10 jQuery 设置内容和属性方法 三种方法来设置内容 text 设置或返回所选元素的文本内容html 设置或返回所选元素的内容 包括HTML标记 val 设置或返回表单字段的值例如 btn1 click function test1 text Helloworld btn2 click function test2 html Helloworld btn3 click function test3 val RUNOOB jQueryAJAX 什么是AJAX AJAX 异步JavaScript和XML AsynchronousJavaScriptandXML 简短地说 在不重载整个网页的情况下 AJAX通过后台加载数据 并在网页上进行显示 使用AJAX的应用程序案例 谷歌地图 腾讯微博 优酷视频等等 通过jQueryAJAX方法 您能够使用HTTPGet和HTTPPost从远程服务器上请求文本 HTML XML或JSON 同时您能够把这些外部数据直接载入网页的被选元素中 六 jQuery动画效果 jQuery提供了很多动画效果 例如滑动效果 淡入淡出效果 关于jQuery中可以实现动画效果的常用方法具体如下表所示 设定动画效果 参数speed表示动画的速度 可以设置为预定的三种速度 slow fast 和 normal 或动画时长的毫秒值 如1000 参数easing表示切换效果 默认效果为swing 还可以使用linear效果 参数function表示在动画完成时执行的函数 参数opacity表示透明度数值 范围在0 1之间 如0 5 function 隐藏 慢速 曲线效果 div hide slow 显示 慢速度 直线效果 div show slow linear 设置透明度 div fadeTo slow 0 5 自定义动画jQuery支持自定义动画 用户只需要指定一个最终样式 就可以使指定元素以动画效果变为最终样式 在上述语法中 参数params表示一组包含动画最终属性值的集合 speed表示动画速度 easing表示动画效果 function表示动画完成后执行的函数 animate params speed easing function 例如 为元素添加自定义动画时 示例代码如下 定义动画最终效果varcssjn width 400px height 300px fontSize 25px 添加自定义动画 div animate cssjn 2000 七 jQuery的Ajax操作 在传统的Ajax中 通过XMLHttpRequest实现Ajax不仅代码复杂 浏览器兼容问题也比较多 jQuery对Ajax操作进行了封装 使用jQuery可以极大地简化Ajax程序的开发过程 jQuery常用Ajax方法在jQuery中 常用的Ajax操作方法如下表所示 jQuery常用Ajax方法参数url表示请求的URL地址 参数data表示请求时发送的数据 参数function表示载入成功时执行的函数 参数type表示返回数据的格式 例如xml html script json text等 参数settings是对Ajax的请求设置 ajax 方法 ajax 是通用方法 通过该方法的setting参数 可以实现 get post getJSON 和 getScript 方法同样的功能 1 只发送GET请求 2 发送GET请求并传递数据 接收返回结果 ajax test php ajax test php data name tom age 23 要发送的数据success function msg 请求成功后执行的函数alert msg ajax 方法只通过配置setting参数可以实现同样的功能 ajax type GET 请求方式 GET或POST 默认为GETurl test php 请求地址data name tom age 23 success function msg alert msg ajax 方法 3 通过 ajaxSetup 方法可以预先设置全局参数 预先设置全局参数 ajaxSetup type GET url test php data name tom age 23 success function msg alert msg 执行Ajax操作 使用全局参数 ajax ajax 方法以上列举了 ajax 方法的基本使用 其中 setting参数还可以接收更多的可选值 例如 dataType表示要接收的数据格式 async表示异步或同步请求 cache表示是否缓存等等 在jQuery手册中有详细的说明 get 方法 get 和 post 方法简化了 ajax 中的部分操作 以 get 方法为例 具体使用方法如下 1 只发送GET请求 2 发送GET请求并接收返回结果 get test php get test php function msg alert msg get 方法 3 发送GET请求并传递数据 接收返回结果 4 发送GET请求并传递数据 接收返回结果 限制返回格式 get test php name tom age 23 function msg alert msg get test php name tom age 23 function msg alert msg name msg age json get 方法使用 getJSON 方法可以实现同样的功能 代码如下 返回数据时 可以使用PHP的json encode 函数 以上列举了 get 方法的使用 如果需要POST请求方式 可以使用 post 方法 其使用方法与 get 完全相同 getJSON test php name tom age 23 function msg alert msg name msg age echojson encode GET function 设置全局ajax ajaxSetup url comment php type POST dataType json success comment add 添加按钮单击事件 button click comment send 获得默认数据 ajax 实例 5 25 八 用jQuery插件 概述jQuery插件是以jQuery核心代码为基础 编写的符合一定规范的应用程序 随着jQuery的发展 同时也诞生了许多优秀的插件 运用这些插件可以解决项目开发中的某些需求 节约开发成本 本节将会围绕几个常用的jQuery插件进行详细讲解 日历插件jQuery官方网站中提供了丰富的插件资源库 网站地址为 点击 Downloadnow 按钮之后 跳转到了jQueryUI网站 jQueryUI是以jQuery为基础的网页用户界面代码库 日历插件datepicker是jQueryUI中的控件之一 通过jQueryUI网站 function div datepicker 在线编辑器许多网站都为用户提供了在线编辑器 通过在线编辑器可以实现文字的排版 设置字体 字号 颜色等功能 甚至可以上传图片 附件等 通过jQuery插件 可以轻松地为网站添加一个在线编辑器 在线编辑器UEditor是百度推出的一款在线编辑器 其功能强大 开源免费 有详细的中文注释和文档 适合读者学