引用百科的介绍:
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')); …
为什么要做jQuery源码解析?
虽然jQuery的文档很完善,潜意识降低了前端开发的入门的门槛,要实现一个动画随手拈来,只要简单的调用一个animate方法传递几个执行的参数即可,但如果要我们自己实现一个定制的动画呢?我们要考虑的问题太多太多了,浏览器兼容、各种属性的获取、逻辑流程、性能等等,这些才是前端开发的基础核心。
如果我们只知道使用jQuery,而不知道其原理,那就是“知其然,而不知其所以然”,说了这么多,那就赶快跟着慕课网进入“高大上”之旅吧,深入来探究jQuery的内部架构!
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> p { color:red; margin:5px; cursor:pointer; } p:hover { background:yellow; } .selected { color:blue; } .highlight { background:yellow; } div { background-color:#bca; width:100px; border:1px solid green; } div { color:red; } </style> <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script> <title>便捷的操作</title> </head> <body> <!-- 例一 --> <p>First Paragraph</p> <p>Second Paragraph</p> <p>Yet one more Paragraph</p></br></br></br> <!-- 例二 --> <button id="go">» Run</button> <div id="block">Hello!</div></br></br></br> <!-- 例三 --> <form> <input type="checkbox" name="newsletter" value="Hourly" checked="checked"> <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type="checkbox" name="newsletter" value="Monthly" checked> <input type="checkbox" name="newsletter" value="Yearly"> </form> <div id="t"></div> <script> //例一 $("p").click(function () { $(this).slideUp(); }); //例子二 $("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 ); }); //例子三 var countChecked = function() { var n = $( "input:checked" ).length; $( "#t" ).text( n + (n === 1 ? " is" : " are") + " checked!" ); }; $( "input[type=checkbox]" ).on( "click", countChecked ); </script> </body> </html>