JQuery常用基础语法（描述篇幅短）（第1季）
1、jQuery实现表格行点击选中复选框
?
$(".list tr").slice(1).each(function(){var p = this;$(this).children().slice(1).click(function(){$($(p).children()[0]).children().each(function(){if(this.type=="checkbox"){if(!this.checked){this.checked = true;}else{this.checked = false;}}});});});只要table 的 ,就能实现该功能 2、jQuery 隐藏/显示
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery 隐藏/显示</title><script type="text/javascript">$(document).ready(function() {$("p").click(function() {$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>3、?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("p").hide();});});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>?4、002?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">$(document).ready(function() {$("#button").click(function() {$("p").hide(1000);});$("#button2").click(function() {$("p").toggle();});});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button" id="button">Click me</button><button type="button" id="button2">Click me2</button></body></html>?
?5、003
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>$(document).ready(function() {$("button").click(function() {$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>演示带有不同参数的 fadeIn() 方法。</p><button>点击这里，使三个矩形淡入</button><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></body></html>?6、004
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});});</script></head><body><p>演示带有不同参数的 fadeOut() 方法。</p><button>点击这里，使三个矩形淡出</button><br><br><div id="div1"style="width: 80px; height: 80px; background-color: red;"></div><br><div id="div2"style="width: 80px; height: 80px; background-color: green;"></div><br><div id="div3"style="width: 80px; height: 80px; background-color: blue;"></div></body></html>?7、005
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_fadein</title><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="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></body></html>?8、006
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>$(document).ready(function() {$(".flip").click(function() {$(".panel").slideDown("slow");});});</script><style type="text/css">div.panel,p.flip {margin: 0px;padding: 5px;text-align: center;background: #e5eecc;border: solid 1px #c3c3c3;}div.panel {height: 120px;display: none;}</style></head><body><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">$(document).ready(function() {$(".flip").click(function() {//$(".panel").slideUp("slow");$(".panel").slideToggle("slow");});});</script><style type="text/css">div.panel,p.flip {margin: 0px;padding: 5px;text-align: center;background: #e5eecc;border: solid 1px #c3c3c3;}div.panel {height: 120px;}</style></head><body><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation1</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("div").animate({left : '250px'});});});</script></head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position属性设置为 relative、fixed 或 absolute。</p><divstyle="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div></body></html>?11、009
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation1_multicss</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("div").animate({left : '250px',opacity : '0.5',height : '150px',width : '150px'});});});</script></head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position属性设置为 relative、fixed 或 absolute。</p><divstyle="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div></body></html>?12、010
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation1_relative</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("div").animate({//left:'250px',//height:'+=150px',//width:'+=150px'height : 'toggle'});});});</script></head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position属性设置为 relative、fixed 或 absolute。</p><divstyle="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div></body></html>?13、011
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation</title><script type="text/javascript">$(document).ready(function() {$("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");});});</script></head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position属性设置为 relative、fixed 或 absolute。</p><divstyle="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div></body></html>?14、012
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {var div = $("div");div.animate({left : '100px'}, "slow");div.animate({fontSize : '3em'}, "slow");});});</script></head><body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position属性设置为 relative、fixed 或 absolute。</p><divstyle="background: #98bf21; height: 100px; width: 200px; position: absolute;">HELLO</div></body></html>?15、013
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation</title><script>$(document).ready(function() {$("#flip").click(function() {$("#panel").slideDown(5000);});$("#stop").click(function() {$("#panel").stop();});});</script><style type="text/css">#panel,#flip {padding: 5px;text-align: center;background-color: #e5eecc;border: solid 1px #c3c3c3;}#panel {padding: 50px;display: none;}</style></head><body><button id="stop">停止滑动</button><div id="flip">点击这里，向下滑动面板</div><div id="panel">Hello world!</div></body></html>?16、014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_animation</title><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("p").hide(1000, function() {alert("The paragraph is now hidden");});//错误写法//$("p").hide(2000);//alert("The paragraph is now hidden");});});</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.</p></body></html>?17、015
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery_chaining</title><script>$(document).ready(function() {$("button").click(function() {$("#p1").css("color", "red").slideUp(2000).slideDown(2000);});});</script></head><body><p id="p1">jQuery 乐趣十足！</p><button>点击这里</button></body></html>?
?