<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
<script type="text/javascript">
window.onload=function(){
$("#eachBtn").click(function(){
$(".container>ul>li").each(function(){
alert($(this).text());
});
});
};
</script>
</head>
<body>
<div class="container">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<button id="eachBtn">点击each演示</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".clickDiv").click(function(){
$(".dataDiv").toggle(900);
});
});
</script>
<style>
div{
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
</style>
</head>
<body>
<div class="clickDiv">
点击这里，隐藏/显示面板
</div>
<div class="dataDiv">
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".clickDiv").click(function(){
$(".dataDiv").toggle(900,function(){
alert("切换完成!");
});
});
});
</script>
<style>
div{
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
</style>
</head>
<body>
<div class="clickDiv">
点击这里，隐藏/显示面板
</div>
<div class="dataDiv">
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeIn() 方法。</p> <button>点击这里，使三个矩形淡入</button> <br><br> <div id="div1" style="80px;height:80px;display:none;background-color:red;"></div> <br> <div id="div2" style="80px;height:80px;display:none;background-color:green;"></div> <br> <div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div> </body> </html>
上下滑
$("#div1").slideDown();
<!DOCTYPE html> <html> <head> <script src="./jquery-2.2.3.min.js"></script> <script> $(function(){ for(i=0;i<=5;i++){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }; }); </script> </head> <body> <p id="p1">来抓我呀</p> </body> </html>
<html>
<head>
<script src="./jquery-2.2.3.min.js"></script>
<script>
$(function(){
var testForm = $('#test-form');
var selectAll = testForm.find('label.selectAll>input:checkbox');
var selectAllLabel = testForm.find('label.selectAll span.selectAll');
var deselectAllLabel = testForm.find('label.selectAll span.deselectAll');
var invertSelect = testForm.find('a.invertSelect');
var langs = testForm.find('input[name=lang]');
selectAll.change(function(){
if(selectAll.prop('checked')){
langs.prop('checked',true);
selectAllLabel.hide();
deselectAllLabel.show();
}else{
langs.prop('checked',false);
deselectAllLabel.hide();
selectAllLabel.show();
}
});
function isAllChecked(){
return langs.filter(function(){
return $(this).is(':checked');
}).length === 5;
}
// 手动选
langs.change(function(){
if(isAllChecked()){
selectAll.prop('checked',true);
selectAllLabel.hide();
deselectAllLabel.show();
}else{
selectAll.prop('checked',false);
selectAllLabel.show();
deselectAllLabel.hide();
}
});
// 反选
invertSelect.click(function(){
langs.map(function(){
$(this).prop('checked',!($(this).prop('checked')));
});
langs.change();
});
});
</script>
</head>
<body>
<!-- HTML结构 -->
<form id="test-form" action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
</body>
</html>