第1天：jQuery效果
1、jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
为了防止文档加载（就绪）之前运行jQuery代码
要将jQuery函数写在document ready函数中
$(document).ready(function){ jQuery函数 }
2、jQuery选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
|
Event 函数 |
绑定函数至 |
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
3、jQuery显示或隐藏
jQuery hide()和show()
通过jQuery我们可以使用hide()和show()方法来隐藏和显示HTML元素
例如:
$(“button”).click(function(){ $(“p”).hide(1000); });
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
jQuery toggle()方法可以切换hide()和show()方法
$(“button”).click(function(){ $(“p”).toggle(); });
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
4、jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$(document).ready(function(){ $(".yincang").click(function(){ $("div").toggle(3000,function(){ alert("隐藏完了") }); }); //向上滑动 $("#xshd").click(function(){ $("div").slideUp(1000,function(){ // $("div").show(1000); }); }); //向下滑动 $("#xxhd").click(function(){ $("div").slideDown(1000) }); $(".sxhd").click(function(){ $("div").slideToggle("fast"); }); $("#sxhddrdc").click(function(){ $("div").fadeToggle(3000) }) }); </script> <body> <button class="sxhd">上下滑动</button> <button id="xxhd">向下滑动</button> <button id="xshd">向上滑动</button> <button class="yincang">隐藏</button> <button id="sxhddrdc">淡入淡出</button> <div></div> </body>
