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

 <!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://img.mukewang.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>

jQuery设计理念的更多相关文章

  1. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  2. jQuery和AngularJS的区别小分析

    最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...

  3. 深入理解jQuery中的Deferred

    引入 1  在开发的过程中,我们经常遇到某些耗时很长的javascript操作,并且伴随着大量的异步. 2  比如我们有一个ajax的操作,这个ajax从发出请求到接收响应需要5秒,在这5秒内我们可以 ...

  4. 关于angularjS与jQuery框架的那些事

    这篇文章主要介绍了jQuery和angularJS的区别浅析,本文着重讲解一个熟悉jQuery的程序员如何应对angularJS中的一些编程思想的转变吗,需要的朋友可以参考下 最近一直研究angula ...

  5. jQuery总体架构

    第一章  总体架构 1.设计理念 jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性. 2.总体架构 大致可以分为三个部分:构造模块,底层支持模块和功能模块. 3.使用自调用 ...

  6. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  7. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  8. jquery 源码学习（一）

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  9. 主流JavaScript框架（Dojo、Google Closure、jQuery、Prototype、Mootools和YUI）的分析和对比

    本文主要选取了目前比较流行的JavaScript框架Dojo.Google Closure.jQuery.Prototype.Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供 ...

随机推荐

  1. STM32F4先设置寄存器还是先使能时钟

    http://zhidao.baidu.com/link?url=gdVNuIgLOJcV37QzbCx0IrFip5pskiPQDWpoZayr_xBEe120p4d_iWtrfDl1d4tSFaH ...

  2. Newtonsoft.Json之JArray, JObject, JProperty,JValue

    JObject staff = new JObject(); staff.Add(new JProperty("Name", "Jack")); staff.A ...

  3. Unity2D实现人物三连击

    之前写过一个系列<HTML5 2D平台游戏开发>,在此过程中发现有很多知识点没有掌握,而且用纯JavaScript来开发一个游戏效率极低,因为调试与地图编辑都没有可视化的工具,开发起来费时 ...

  4. 大型网站技术学习-2. 云计算之OpenStack简述

    上一章讲,虚拟化能够充分的利用资源,带来各种各样的好处. 当一个网站不大,只需要四五台机器就可以支撑的时候,可以采用手工的方式虚拟机,但是当网站流量很高,需要成千上万台机器的时候,那就非常不方便了. ...

  5. Google Code Jam 2014 资格赛：Problem B. Cookie Clicker Alpha

    Introduction Cookie Clicker is a Javascript game by Orteil, where players click on a picture of a gi ...

  6. 从sql走向linq的我撞死在起点上

    [本文纯个人理解,错误轻喷,非常希望能有大神指点] A left (outer) join B on A.bid=B.id 上面这句话叫做左连接,原因是left(左)join(加入,连入)被译为左连接 ...

  7. ios 推送 证书配置

    S的推送证书,有有效期限制,一般为一年.当我们证书过期的时候,就需要重新生成证书了.有一段时间没有上苹果网站了,昨天上去一看,此奥,改版了,下边我们将重新生成一个正式环境的push推送的证书. 1.先 ...

  8. IOS程序国际化

    1.1 新建一个Single View app模版项目,命名为Localization. 1.2 新建后,可以看到工作目录结构文件如下,单击InfoPlist.strings,查看右边的属性,在Loc ...

  9. python 可变参数函数定义* args和**kwargs的用法

    python函数可变参数 (Variable Argument) 的方法:使用*args和**kwargs语法.其中,*args是可变的positional arguments列表,**kwargs是 ...

  10. 解决不同浏览器创建不同 XMLHTTP 对象的问题

    function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XML ...