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. ROS库生成和调用

      参考资料: 生成.so文件:http://blog.csdn.net/u013243710/article/details/35795841 调用.so文件:http://blog.csdn.ne ...

  2. 调用iPhone的短信

    不传递短信内容,可以调用下面的方法: [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"sms://4664 ...

  3. lower_bound() 与 upper_bound()

    1. lower_bound() lower_bound()是泛型算法,在使用时,需要先将序列进行排序: 作用:  函数lower_bound()在first和last中的前闭后开区间进行二分查找,返 ...

  4. 初识C++之虚函数

    1.什么是虚函数 在基类中用virtual关键字修饰.并在一个或多个派生类中被又一次定义的成员函数.使用方法格式为: virtual 函数返回类型 函数名(參数表) { 函数体 } 虚函数是实现多态性 ...

  5. SpringBoot项目的云服务器部署

    1.场景还原 springboot配置相当简单,人人皆知.怎么把springboot工程部署到云服务器上呢?可能有人会说,博主你前篇不是讲了java工程的云部署把:但是我想澄清一点的是,我前篇的工程都 ...

  6. centos7设置ip

    centos7不能再通过setup命令来设置ip了,但可以通过修改网卡配置文件来设置ip 在/etc/sysconfig/network-scripts目录下找到网卡配置文件,修改之前内容如下 TYP ...

  7. 第二篇： Ansible 安装

    一.配置epel源 wget –O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo 二.安装ansible  ...

  8. 在Ubuntu下利用Eclipse调试FFmpeg

    [编辑]第一步:准备编译环境 .tar.bz2 -2245/ ./configure -linux-i586.tar.gz 解压后得到jre1.7.0_17目录 最后通过java -version检查 ...

  9. python 线程安全

    http://www.cnblogs.com/monsteryang/p/6592385.html

  10. windows db2 添加用户权限

    http://www.csharpwin.com/csharpspace/12086r9069.shtml 在windows上DB2数据库安装的时候会创建一个系统管理员 的账户,默认为DB2ADMIN ...