jQuery设计理念

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         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>

 

posted on 2015-10-07 21:01  yhdsir  阅读(492)  评论(0)  编辑  收藏  举报

导航