$(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>