jQuery快速入门与动画效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u012988966/article/details/38269757

一.jQuery 安装

1.本地jQuery的引用,把Jquery文件放到根目录下

二.通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
jQuery 语法实例：

元素选择器：
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。`
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

属性选择器：

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

css选择器：

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

三.jQuery事件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

四.jQuery 效果 - 隐藏和显示

1.隐藏和显示

jQuery hide(speed,callback) //隐藏对象，speed控制隐藏或显示的速度，callback是隐藏或显示之后执行的函数名

jQuery show(speed,callback)//显示对象

用法:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#hide").click(function()
{
$("#p1").hide(100);//隐藏
})
$("#show").click(function()
{
$("#p1").show(100);//显示
})
})
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

上面的显示和隐藏并用可以用 jQuery toggle()代替.

jQuery toggle(speed,callback) //两个都为可选参数

2.jQuery 效果 - 淡入淡出

jQuery fadeIn(speed,callback)//淡入
jQuery fadeOut(speed,callback)//淡出
jQuery fadeToggle(speed,callback)//淡出淡入
jQuery fadeTo(speed,callback)//变化到目标状态

用法：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
{
$("#button1").click(function()
{
$("#div1").fadeIn(500);
$("#div2").fadeIn(1500);
$("#div3").fadeIn(2500);
})
$("#button2").click(function()
{
$("#div1").fadeOut(500);
$("#div2").fadeOut(1500);
$("#div3").fadeOut(2500);
})
$("#button3").click(function()
{
$("#div1").fadeToggle(500);
$("#div2").fadeToggle(1500);
$("#div3").fadeToggle(2500);
})
$("#button4").click(function()//淡化后保持现状
{
$("#div1").fadeTo(500,0.9);
$("#div2").fadeTo(1500,0.6);
$("#div3").fadeTo(2500,0.3);
})
})
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button id="button1">淡入</button>
<button id="button2">淡出</button>
<button id="button3">淡入淡出</button>
<button id="button4">淡化到目标状态</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

3.jQuery 效果 -滑动

slideDown()//滑入
slideUp()//滑出
slideToggle()//滑入滑出

用法：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
{
$("#button1").click(function()
{
$(".panel").slideDown(500);
})
$("#button2").click(function()
{
$(".panel").slideUp(500);
})
$(button3).click(function()
{
$(".panel").slideToggle(500);
})
})
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;<!--滑动区域的大小-->
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<button id="button1">滑入</button>
<button id="button2">滑出</button>
<button id="button3">滑入滑出</button>

 
</body>
</html>

4.jQuery 动画

jQuery animate() 方法允许您创建自定义的动画。

animate({params},speed,callback)

用法：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#button").click(function(){
    var div=$("div");
    div.css("display","block");
    div.animate({left:'100px',height:'200px'},1000);
    div.animate({left:'0px',width:'200px'},1000);
    div.animate({fontSize:'3em'},"slow");
  });
  $("#button1").click(function(){
    var div=$("div");
    div.animate({height:'0px',width:'0px',fontSize:'0em'});
})
});
</script> 
</head>

<body>

<button id="button">开始动画</button>
<button id="button1">动画消失</button>
<div style="background:#98bf21;position:absolute;display:none;">HELLO</div>

</body>
</html>

5.jQuery stop()

jQuery stop(stopAll,gotoEnd) 方法用于在动画或效果完成前对它们进行停止。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

6.jQuery Callback

Callback 函数在当前动画 100% 完成之后执行。

7jQuery Chaining

通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);