1-3 jQuery设计理念
本节编程练习不计算学习进度,请电脑登录imooc.com操作

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'));
…

为什么要做jQuery源码解析?

虽然jQuery的文档很完善,潜意识降低了前端开发的入门的门槛,要实现一个动画随手拈来,只要简单的调用一个animate方法传递几个执行的参数即可,但如果要我们自己实现一个定制的动画呢?我们要考虑的问题太多太多了,浏览器兼容各种属性的获取逻辑流程性能等等,这些才是前端开发的基础核心。

如果我们只知道使用jQuery,而不知道其原理,那就是“知其然,而不知其所以然”,说了这么多,那就赶快跟着慕课网进入“高大上”之旅吧,深入来探究jQuery的内部架构!

任务

  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://img1.sycdn.imooc.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">&raquo; 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. width: "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>
下一节