jQuery 是一个 JavaScript 库。
- jQuery语法
- $("p").hide() -隐藏所有 <p> 标签
- $(".test").hide() -隐藏所有 class="test" 的元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
- $(document).ready(function(){ } -为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
- jQuery事件
- $("button").click(function() {} ) -点击button隐藏事件
-
$("#hide").click(function(){ $("p").hide(); });
- $("button").dblclick(function() {} ) -双击事件
- $(selector).focus(function) -聚焦事件(只能在表单中用)
- $(selector).blur(function) -失焦事件
- $(selector).mouseover(function) -鼠标悬停事件
- 通过 jQuery,使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
-
HTML <p>我会消失</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> jQuery。js //隐藏 $("#hide").click(function(){ $("p").hide(); }); //显示 $("#show").click(function(){ $("p").show(); });
- 通过 jQuery,可以实现元素的淡入淡出效果。
-
<!--淡入--> <div id="div1" style="width:80px; height:80px; display:none; background:aqua;">1</div> <div id="div2" style="width:80px; height:80px; display:none; background:orchid;">2</div> <div id="div3" style="width:80px; height:80px; display:none; background:salmon;">3</div> <!--淡出--> <div id="div1" style="width:80px; height:80px; background:aqua;">1</div> <div id="div2" style="width:80px; height:80px; background:orchid;">2</div> <div id="div3" style="width:80px; height:80px; background:salmon;">3</div> //淡入 $("button").click(function(){ //点击按钮 $("#div1").fadeIn(); //淡入div1; $("#div2").fadeIn("slow"); //缓慢的淡入div2; $("#div3").fadeIn(4000); //4秒以后淡入; }); //淡出 $("button").click(function(){ //点击按钮 $("#div1").fadeOut(); //淡出div1; $("#div2").fadeOut("slow"); //缓慢的淡出div2; $("#div3").fadeOut(4000); //4秒以后淡出; });
- jQuery 滑动方法可使元素上下滑动
-
//向下滑动 $(".our").click(function(){ $(".pass").slideDown("show"); }); //向上滑动 $(".our").click(function(){ $(".pass").slideUp("slow"); });
- jQuery animate() 方法创建自定义的动画
-
("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); })
//动画3 列队 $("button").click(function(){ var div = $("div"); div.animate({height:'300px', opacity:'0.4'},"slow"); div.animate({width:'300px', opacity:'0.8'},"slow"); div.animate({height:'100px', opacity:'0.4'},"slow"); div.animate({width:'100px', opacity:'0.8'},"slow"); });
- jQuery stop() 方法用于停止动画或效果
-
$("#stop").click(function(){ $("#panel").stop(); });