演讲人窦衍旭.ppt

演讲人：窦衍旭
JQuery 技术简介及用法示例
1、JQuery介绍与下载组件
2、JQuery的引入与$的作用
3、JQuery基础语法
4、JQuery选择器的各种用法
5、JQuery事件器的介绍
6、隐藏显示、切换与滑动 、淡入淡出和动画
7、JQuery Ajax
JQuery 技术简介及用法示例
1、Jquery介绍与下载组件
Jquery 是什么？
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
经过压缩后的JQ库
未压缩的JQ库，适合
学习和开发使用

JQuery 技术简介及用法示例
2、Jquery的引入与$的作用
<script type="text/javascript" src="jquery-"></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” 的元素
$("") 所有 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