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. 合并apk和odex

    Android的ROM中有很多odex文件,相对于APK中的dex文件而言这个odex有什么作用呢? 如果你仔细观察会发现文件名时一一对应的,同时那些对应的apk文件中没有dex文件.这样做可以使其厂 ...

  2. CoreImage的模糊滤镜

    //1.原始图片 UIImage * image = [UIImage imageNamed:@"1.jpg"]; /****************core image***** ...

  3. Android下Slidingmenu和actionbarsherlock的使用

    1 http://blog.csdn.net/wangjinyu501/article/details/9331749  博客很多,推荐此教程,slidingmenu的demo可以演示 2 http: ...

  4. Android适配方案小结（二）

    该节主要记录从代码中获取与屏幕适配相关的各个參数: Java代码例如以下 public class ScreenUtil { /** * Note: * 仅仅有activity能够使用getWindo ...

  5. Spring Web Flow 入门demo（三）嵌套流程与业务结合 附源代码

    上篇博客我们说Spring web Flow与业务结合的方式主要有三种,以下我们主要介绍一下第三种的应用方式 3,运行到<action-state> 元素 SpringWeb Flow 中 ...

  6. H5 打开App

    IOS 1.只能在safari浏览器打开, 2.必须App安装的情况下. 3.IOS必须配置 URLSchemes 为 "yidiandai://"  才可以. <!DOCT ...

  7. Linux系统下如何监测磁盘的使用空间

    不管是我们在安装软件还是监测软件的使用性能,我们都要随时掌握系统磁盘的使用情况. 使用df命令 df df命令用于显示磁盘分区上的可使用的磁盘空间.默认显示单位为KB.可以利用该命令来获取硬盘被占用了 ...

  8. .net之GridView、DataList、DetailsView（二）

    GridView自带分页功能,效率不高,适用于小数据量的显示. protected void GridView1_PageIndexChanging(object sender, GridViewPa ...

  9. hdu 1398 Square Coins 分钱币问题

    Square Coins Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  10. Hadoop相关资料

    http://blog.csdn.net/skywalker_only/article/details/40650427