1、
| .html | .js |
| <div class="aa"></div> | $(".aa"). |
| <div id="aa"></div> | $("#aa"). |
| jQuery 隐藏/显示 | .hide() | .show() | .toggle() |
| jQuery 淡入淡出 | .fadeIn() | .fadeOut() | .fadeToggle() |
| jQuery 滑动 | .slideDown() | .slideUp() | .slideToggle() |
| jQuery 动画 | |
| 多个属性 | .animate({left:‘250‘,opacity:‘0.5‘,height:‘150px‘}); |
| 相对 | .animate({left:‘250px‘,height:‘+=150px‘}); |
| 使用预定义 | .animate({height:‘toggle‘}); |
| 队列功能 |
.animate({height:‘300px‘,opacity:‘0.4‘},"slow"); .animate({weight:‘300px‘,opacity:‘0.8‘},"slow"); .animate({height:‘100px‘,opacity:‘0.4‘},"slow"); .animate({weight:‘100px‘,opacity:‘0.8‘},"slow"); |
| jQuery stop() | .stop |
| jQuery Callback |
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); |
| jQuery Chaining | $("#p1").css("color","red").slideUp(2000).slideDown(2000); |
.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>index.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="jquery-2.1.4.min.js"></script> <script src="app.js"></script> <link rel=stylesheet href="app.css" type="text/css"> </head> <body> <h1>Hello</h1> <p>Hello</p> <a>Hello</a> <p>Hello</p> <button id="show" type="button">显示</button> <button id="hidden" type="button">隐藏</button> <button id="toggle" type="button">切换</button><br> <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> <button id="fadeIn" type="button">点这里，三个正方形可以渐入</button> <button id="fadeOut" type="button">点这里，三个正方形可以渐出</button> <button id="fadeToggle" type="button">点这里，三个正方形渐入渐出切换</button> <button id="fadeTo" type="button">渐出至一定的透明度</button><br/> <div class="div4"> 好好学习，<br> 天天向上。<br> </div> <p class="div5"> 点击这里，div4滑出。 </p> <p class="div6"> 点击这里，div4滑入。 </p> <p class="div7"> 点击这里，div4滑出滑入。 </p> <button id="animate1" type="button">开始动画</button><br><br> <div class="div8" style="background:#98bf21;height:80px;width:500px;position:relative;"> 默认地，所有 HTML 元素都有一个静态位置，且无法移动。<br> 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！<br> </div> <button id="animate2" type="button">animate操作多个动画属性</button><br><br> <button id="animate3" type="button">animate相对动画属性</button><br><br> <button id="animate4" type="button">animate使用预定义的值</button><br><br> <button id="animate5" type="button">animate队列功能</button><br><br> <br><br><br><br><br><br> <button id="animate6" type="button">animate队列功能 增加文字的字号</button><br><br> <div class="div9" style="background:#98bf21;height:100px;width:200px;position:absolute;"> jQuery </div> <br><br><br><br><br><br><br> <button id="stop" type="button">停止滑动</button> <div class="div10"> div10 点这里，向下滑动 </div> <div class="div11"> div11 hello world! </div> <button id="callback" type="button">callback</button> <div class="div12"> div12 callback </div> <div class="div13"> div13 chaining </div> <button id="chaining" type="button">chaining</button> </body> </html>
.js 后面一个是 .css
$(document).ready(function(){
alert("文档加载完毕");
// $("button").click(function(){
// $("p").css("background-color","red");
// $("a").hide();
// });
$("#hidden").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(2000);
});
$("#toggle").click(function(){
$("p").toggle(3000);
});
$("#fadeIn").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(2000);
$("#div3").fadeIn(5000);
});
$("#fadeOut").click(function(){
$("#div1").fadeOut(5000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut();
});
$("#fadeToggle").click(function(){
$("#div1").fadeToggle(5000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle();
});
$("#fadeTo").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
$(".div5").click(function(){
$(".div4").slideUp("slow");
});
$(".div6").click(function(){
$(".div4").slideDown("slow");
});
$(".div7").click(function(){
$(".div4").slideToggle();
});
$("#animate1").click(function(){
$(".div8").animate({left:‘600px‘});
});
$("#animate2").click(function(){
$(".div8").animate({
left:‘250px‘,
opacity:‘0.5‘,
height:‘150px‘,
width:‘150px‘,
});
});
$("#animate3").click(function(){
$(".div8").animate({
left:‘250px‘,
height:‘+=150px‘,
width:‘+=150px‘,
});
});
$("#animate4").click(function(){
$(".div8").animate({
height:‘toggle‘
});
});
$("#animate5").click(function(){
$(".div8").animate({height:‘300px‘,opacity:‘0.4‘},"slow");
$(".div8").animate({width:‘1000px‘,opacity:‘0.8‘},"slow");
$(".div8").animate({height:‘100px‘,opacity:‘0.4‘},"slow");
$(".div8").animate({width:‘500px‘,opacity:‘0.8‘},"slow");
});
$("#animate6").click(function(){
$(".div9").animate({left:‘200px‘},"slow");
$(".div9").animate({fontSize:‘3em‘},"slow");
});
$(".div10").click(function(){
$(".div11").slideToggle(10000);
});
$("#stop").click(function(){
$(".div11").stop();
});
$("#callback").click(function(){
$(".div12").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
$("#chaining").click(function(){
$(".div13").css("color","red").slideUp(2000).slideDown(2000);
});
$(selector).click(function(){
$(this).hide();
});// 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function(){
}); //触发或将函数绑定到被选元素的双击事件
$(selector).focus(function(){
}); //触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function(){
}); //触发或将函数绑定到被选元素的鼠标悬停事件
});// 将函数绑定到文档的就绪事件（当文档完成加载时）
div.div4,p.div5,p.div6,p.div7,div.div10,div.div12{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.div4{
height:120px;
}
div.div11{
padding:50px;
background:#e5eecc;
border:solid 1px #c3c3c3;
display:none;
}
时间： 2025-01-14 05:44:16