jQuery设计理念
引用百科的介绍：
jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
The Write Less,Do More（写更少，做更多），无疑就是jQuery的核心理念，简洁的API、优雅的链式、强大的查询与便捷的操作。从而把jQuery打造成前端世界的一把利剑，所向披靡！
简洁的API:
$.on
$.css
$.ajax
….
优雅的链式:
var jqxhr = $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
强大的选择器：
$("div, span, p.myClass" )
$("div span:first-child")
$("tr:visible")
…
便捷的操作：
$("p").removeClass("myClass noClass").addClass("yourClass");
$("ul li:last").addClass(function(index) {
return"item-" + index;
});
$('.container').append($('h2'));
…
test.html
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <style> 6 p { color:red; margin:5px; cursor:pointer; } 7 p:hover { background:yellow; } 8 9 .selected { color:blue; } 10 .highlight { background:yellow; } 11 12 div { 13 background-color:#bca; 14 width:100px; 15 border:1px solid green; 16 } 17 div { color:red; } 18 </style> 19 <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> 20 <title>便捷的操作</title> 21 </head> 22 <body> 23 24 25 <!-- 例一 --> 26 <p>First Paragraph</p> 27 <p>Second Paragraph</p> 28 <p>Yet one more Paragraph</p></br></br></br> 29 30 31 <!-- 例二 --> 32 <button id="go">» Run</button> 33 <div id="block">Hello!</div></br></br></br> 34 35 36 <!-- 例三 --> 37 <form> 38 <input type="checkbox" name="newsletter" value="Hourly" checked="checked"> 39 <input type="checkbox" name="newsletter" value="Daily"> 40 <input type="checkbox" name="newsletter" value="Weekly"> 41 <input type="checkbox" name="newsletter" value="Monthly" checked> 42 <input type="checkbox" name="newsletter" value="Yearly"> 43 </form> 44 <div id="t"></div> 45 <script> 46 47 //例一 48 $("p").click(function () { 49 $(this).slideUp(); 50 }); 51 52 53 54 //例子二 55 $("#go").click(function(){ 56 $("#block").animate({ 57 "70%", 58 opacity: 0.4, 59 marginLeft: "0.6in", 60 fontSize: "3em", 61 borderWidth: "10px" 62 }, 1500 ); 63 }); 64 65 66 //例子三 67 var countChecked = function() { 68 var n = $( "input:checked" ).length; 69 $( "#t" ).text( n + (n === 1 ? " is" : " are") + " checked!" ); 70 }; 71 72 $( "input[type=checkbox]" ).on( "click", countChecked ); 73 74 </script> 75 76 77 </body> 78 </html>