$(this).hide();
$(this).css("display","none");
等价
方法一:
$(
'#id'
).css(
'display'
,
'none'
);
$(
'#id'
).css(
'display'
,
'block'
);
方法二:
$(
'#id'
).hide();
$(
'#id'
).show();
区别于 bind()
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
// 事件处理函数的第一个参数是一个事件对象 $('#foo').click(function(event){ event.stopPropagation(); // do sth. });
阻止表单提交 e.preventDefault();
替换没找到的图片,真 tn 的聪明
$("img").error(function(){
$(this).replaceWith("<p><b>图片未加载成功!</b></p>");
});
$.each($("p"),function(){ alert($(this).text()); }) $("p").each(function(){ alert($(this).text()); })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <title>Title</title> <script type="text/javascript" src="./jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(function(){ $("input").blur(function(e){ alert("blur"); }); $("input:text").focus(function(){ alert("focus"); }); }); </script> </head> <body> <input type="text" placeholder="占位符" focus=false/> <div class="Container" style="height:800px;50%;background-color:red;opacity:0.8;"><div class="subContainer"></div></div> <div class="SecondContainer"></div> </body> </html>
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form").submit(function(e){ e.preventDefault(); alert("Submit was prevented!"); }); $("button").click(function(){ $("form").submit(); }); }); </script> </head> <body> <form name="input" action="" method="get"> First name: <input type="text" name="FirstName" value="Mickey" size="20"> <br />Last name: <input type="text" name="LastName" value="Mouse" size="20"> <br /> <input type="submit" value="Submit"> </form> <button>触发表单域的 submit 事件</button> </body> </html>
<!DOCTYPE html> <html> <head> <title>动画</title> <meta charset="utf-8"/> <style> div{ background:#98bf21; height:100px; 100px; position:absolute; } .divHeight{ height:300px; opacity:0.4 } .divWidth{ 300px; opacity:0.4 } .divShortWidth{ 300px; opacity:0.8 } .divShortHeight{ height:100px; opacity:0.8 } </style> <script type="text/javascript" src="./jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(function(){ function show(){ $("div").addClass("divHeight"); $("div").addClass("divWidth"); $("div").addClass("divShortWidth"); $("div").addClass("divShortHeight"); } setInterval(show,3000); }); </script> </head> <body> <div></div> </body></html>
<!DOCTYPE html> <html> <head> <title>动画</title> <meta charset="utf-8"/> <style> </style> <script type="text/javascript" src="./jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(function(){ var div=$("div"); function show(){ div.animate({ height:'373px',opacity:'0.4'},"slow"); div.animate({ '400px',opacity:'0.8'},"slow"); div.animate({ '50px',opacity:'0.8'},"slow"); div.animate({ height:'50px',opacity:'0.4'},"slow"); } //setInterval(show,300); function extendDiv(){ div.animate({ height:'373px',opacity:'0.4'},"slow"); div.animate({ '400px',opacity:'0.8'},"slow"); } function collapseDiv(){ div.animate({ '50px',opacity:'0.8'},"slow"); div.animate({ height:'50px',opacity:'0.4'},"slow"); } div.mouseover(extendDiv); div.mouseout(collapseDiv); }); </script> </head> <body> <div><img src="C:UsersFrankLiDesktop est背景图16.jpg"/></div> </body></html>
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").toggle("slow"); }); $("h3").click(function(){ $(this).next(".ex").show("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>中国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人:张先生<br /> 北三环中路 100 号<br /> 北京</p> </div> <h3>美国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人:David<br /> 第五大街 200 号<br /> 纽约</p> </div> </body> </html>