元素JQuery技术简介及用法示例5.pptVIP

演讲人：窦衍旭 JQuery 技术简介及用法示例 1、JQuery介绍与下载组件 2、JQuery的引入与$的作用 3、JQuery基础语法 4、JQuery选择器的各种用法 5、JQuery事件器的介绍 6、隐藏显示、切换与滑动 、淡入淡出和动画 7、JQuery Ajax JQuery 技术简介及用法示例 1、Jquery介绍与下载组件 Jquery 是什么？ jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。 经过压缩后的JQ库 未压缩的JQ库，适合 学习和开发使用 www.J JQuery 技术简介及用法示例 2、Jquery的引入与$的作用 script type=text/javascript src=jquery-1.6.4.js/script 在JQ中使用 $ 来调用相关对象和DOM元素 script type=text/javascript $(document).ready(function(){  $(button).click(function(){  $(p).hide();  }); }); /script JQuery 技术简介及用法示例 3、Jquery基础语法 基础语法是：$(selector).action() $符号定义 jQuery 选择符（selector）HTML 元素 jQuery 的 action() 执行对元素的操作 $(this).hide() - 隐藏当前元素 $(p).hide() - 隐藏所有P $(.test).hide() - 隐藏所有 class=test 的段落 $(#test).hide() - 隐藏所有 id=test 的元素 例： JQuery 技术简介及用法示例 4、Jquery选择器的各种用法 $(this) 当前元素 $(p) 所有p元素 $(input) 所有input元素 $(.intro) 所有 class=“intro” 的元素 $(ro) 所有 class=intro 的p元素 $(#intro) id=intro 的第一个元素 $(ul li) ul下的所有li节点 $(ul li:first) 每个 ul 的第一个 li 元素 JQuery 技术简介及用法示例 5、Jquery事件器的介绍 基本用法 $(selector).click() 被选元素的点击事件 $(selector).dblclick() 被选元素的双击事件 $(selector).focus() 被选元素的获得焦点事件 $(selector).mouseover() 被选元素的鼠标悬停事件 $(selector). hide(); 被选元素的隐藏事件 $(selector). show(slow); 被选元素的显示事件 …… $(元素). 事件( 事件属性); 常见事件 JQuery 技术简介及用法示例 6、隐藏显示 $(selector).hide(speed,callback) //隐藏 $(selector).show(speed,callback) //显示 $(document).ready(function(){ $(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 元素，同一个按钮可以点击 两次，实现隐藏和显示的效果 $(selector).slideDown(speed,callback) //向下滑动，并显示遮挡 $(selector).slideUp(speed,callback) //向上滑动，并隐藏遮挡 $(selector). slideToggle(speed,callback) //上下滑动，实现切换 JQuery 技术简介及用法示例 6、淡入淡出和动画 $(selector). fadeOut(speed,callback) //变淡至空 $(selector). fadeIn(speed,callback) //变亮至全部 $(selector). fadeTo(speed,opacity,callback) //变淡至指