《演讲人窦衍旭》由会员分享，可在线阅读，更多相关《演讲人窦衍旭（18页珍藏版）》请在金锄头文库上搜索。
1、演讲人：演讲人：窦衍旭窦衍旭 JQuery 技术简介及用法示例技术简介及用法示例 1、JQuery介绍与下载组件介绍与下载组件2、JQuery的引入与的引入与$的作用的作用3、JQuery基础语法基础语法4、JQuery选择器的各种用法选择器的各种用法5、JQuery事件器的介绍事件器的介绍6、隐藏显示、切换与滑动、隐藏显示、切换与滑动 、淡、淡入淡出和动画入淡出和动画7、JQuery AjaxJQuery 技术简介及用法示例技术简介及用法示例 1、Jquery介绍与下载组件介绍与下载组件Jquery 是什么？是什么？ jQuery 是一个是一个“写的更少，但做的更多写的更少，但做的更多”的轻
2、量级的轻量级 JavaScript 库。库。经过压缩后的经过压缩后的JQ库库未压缩的未压缩的JQ库，适合库，适合学习和开发使用学习和开发使用www.JJQuery 技术简介及用法示例技术简介及用法示例 2、Jquery的引入与的引入与$的作用的作用 在在JQ中使用中使用 $ 来调用相关对象和来调用相关对象和DOM元素元素 $(document).ready(function() $(button).click(function() $(p).hide(); ); ); JQuery 技术简介及用法示例技术简介及用法示例 3、Jquery基础语法基础语法基础语法是：$(selector).act
3、ion()$符号定义 jQuery选择符（selector）HTML 元素jQuery 的 action() 执行对元素的操作$(this).hide() - 隐藏当前元素$(p).hide() - 隐藏所有$(.test).hide() - 隐藏所有 class=test 的段落$(#test).hide() - 隐藏所有 id=test 的元素例：例：JQuery 技术简介及用法示例技术简介及用法示例 4、Jquery选择器的各种用法选择器的各种用法$(this)当前元素当前元素$(p)所有所有元素元素$(input)所有所有input元素元素$(.intro)所有所有 class=“in
4、tro” 的元素的元素$(p.intro)所有所有 class=intro 的的元素元素$(#intro)id=intro 的第一个元素的第一个元素$(ul li) ul下的所有下的所有li节点节点$(ul li:first)每个每个 的第一个的第一个 元素元素JQuery 技术简介及用法示例技术简介及用法示例 5、Jquery事件器的介绍事件器的介绍基本用法基本用法$(selector).click()被选元素的点击事件被选元素的点击事件$(selector).dblclick()被选元素的双击事件被选元素的双击事件$(selector).focus()被选元素的获得焦点事件被选元素的获得焦
5、点事件$(selector).mouseover()被选元素的鼠标悬停事件被选元素的鼠标悬停事件$(selector). hide();被选元素的隐藏事件被选元素的隐藏事件$(selector). show(slow);被选元素的显示事件被选元素的显示事件$(元素元素). 事件事件( 事件属性事件属性);常见事件常见事件JQuery 技术简介及用法示例技术简介及用法示例 6、隐藏显示、隐藏显示$(selector).hide(speed,callback) /隐藏隐藏$(selector).show(speed,callback) /显示显示$(document).ready(function
6、() $(button).click(function() $(p).hide(1000,function() $(p).show(1000); ); ););例子例子speed 参数可以设参数可以设置这些值：置这些值：slow, fast, normal 或或 milliseconds：更多的方更多的方法或功能法或功能JQuery 技术简介及用法示例技术简介及用法示例 6、切换与滑动、切换与滑动 $(selector).toggle(speed,callback) /切换功能切换功能toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素，同一个按钮可以点击两次
7、，实现隐藏和显示的效果$(selector).slideDown(speed,callback)/向下滑动，并显示遮挡向下滑动，并显示遮挡$(selector).slideUp(speed,callback)/向上滑动，并隐藏遮挡向上滑动，并隐藏遮挡$(selector). slideToggle(speed,callback)/上下滑动，实现切换上下滑动，实现切换JQuery 技术简介及用法示例技术简介及用法示例 6、淡入淡出和动画、淡入淡出和动画$(selector). fadeOut(speed,callback)/变淡至空变淡至空$(selector). fadeIn(speed,ca
8、llback)/变亮至全部变亮至全部$(selector). fadeTo(speed,opacity,callback) /变淡至指定效果变淡至指定效果 亮度直用亮度直用0.0 1.0之间之间$(selector).animate(params,duration,easing,callback) /动画动画变化后的变化后的CSS效果，如：效果，如：height:300变化速度用毫秒变化速度用毫秒变化效果的名称（需要插件）变化效果的名称（需要插件）JQuery 技术简介及用法示例技术简介及用法示例 1、jQuery.ajax(options)2、jQuery.get(url,data,call
9、back,type)3、jQuery.post(url,data,callback,type)4、jQuery (selector).load(url,data,callback)7、JQuery Ajax JQuery 技术简介及用法示例技术简介及用法示例 1、 Ajax是什么及其工作原理是什么及其工作原理AJAX 指异步指异步 JavaScript 及及 XML（Asynchronous JavaScript And XML）。）。通过通过 AJAX，您的您的 JavaScript 可使用可使用 JavaScript 的的 XMLHttpRequest 对象来直对象来直接与服务器进行通信。
10、通过这个对象，您的接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与可在不重载页面的情况与 Web 服务器交换数据。服务器交换数据。 AJAX 在浏览器与在浏览器与 Web 服务器之间使用异步数据传输（服务器之间使用异步数据传输（HTTP 请求），请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。这样就可使网页从服务器请求少量的信息，而不是整个页面。 HTML页面页面JS脚本脚本PHP文件文件触发脚本触发脚本执行执行反应反应JQuery 技术简介及用法示例技术简介及用法示例 2、创建、创建XMLHttpRequest对象对象对于对于Ajax，最核心
11、的一个对象是，最核心的一个对象是XMLHttpRequest，所有的，所有的Ajax操作都离不开对这操作都离不开对这个对象的操作个对象的操作xmlHttp = new XMLHttpRequest();首先我们来了解怎么在首先我们来了解怎么在javascript中创建这个对象：中创建这个对象：JS代码：代码：这对于规范的这对于规范的Js支持的浏览器来讲是没错的支持的浏览器来讲是没错的恰恰相反恰恰相反IE却就不支持，所以没办法我们只能却就不支持，所以没办法我们只能做个判断再创建一个做个判断再创建一个IE支持的支持的xmlHttp = new ActiveXObject(Microsoft.XML
12、HTTP);JQuery 技术简介及用法示例技术简介及用法示例 3、XMLHttpRequest对象相关方法对象相关方法XMLHttpRequest.open(传递方式传递方式,地址地址,是否异步请求是否异步请求)XMLHttpRequest.onreadystatechange=FunctionNameXMLHttpRequest.responseText打开请求打开请求准备就绪执行准备就绪执行获取执行结果获取执行结果JQuery 技术简介及用法示例技术简介及用法示例 1、jQuery.ajax(options)jQuery 库拥有完整的库拥有完整的 Ajax 兼容套件兼容套件参数名参数名描
13、述描述url 发送请求的地址。type请求方式 (POST 或 GET)timeout设置请求超时时间（毫秒）。async(默认: true) 异步请求。Data发送的参数可以是json类型dataType 返回的数据类型：xml,html,json,txtsuccess成功后可以返回function(data,st)JQuery 技术简介及用法示例技术简介及用法示例 1、jQuery.ajax(options) $.ajax(type: GET,url: php.php,data: PHP: “php, Name: Jquery ,success:function(data, st)$(di
14、v#test).html(data); );原始内容原始内容data内容内容$.ajax( type: POST, url: url, data: data, success: success, dataType: typ);JQuery 技术简介及用法示例技术简介及用法示例 2、jQuery.get(url,data,callback,type)参数描述url待载入页面的 URL 地址。data待发送 Key / value 参数。callback载入成功时回调函数。type返回内容格式，xml, html, script, json, text, _default。3、jQuery.post(url,data,callback,type)类似下面模式类似下面模式JQuery 技术简介及用法示例技术简介及用法示例 4、jQuery (selector).load(url,data,callback)$(document).ready(function() $(“button).click(function() $(div).load(php.php,PHP:php,Name:Jquery); ););JQuery 技术简介及用法示例技术简介及用法示例 Jquery参考手册参考手册http:/
