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. Java种八种常用排序算法

    1 直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数……直 ...

  2. 阿里CI/CD、DevOps、分层自动化技术

    原文地址:http://www.infoq.com/cn/news/2017/01/alibaba-yunxiao-cicd-devops 在互联网时代,产品快速迭代的重要性不言而喻.不管是传统企业还 ...

  3. 工作总结 错误 using 块缺少结束字符“}”。请确保此块内的所有“{”都有匹配的“}”字符，并且任何“}”都不会解释为标记。

    页面上 有两个 它会跟标签 匹配的     标准要在同一级别下 什么也不改变 只改变它们位置 就不报错了 总结 @using (Html.BeginForm()) { } 要根据标签位置 匹配  要放 ...

  4. windows下简单配置squid反向代理服务器

    下载windwosNT版本的squid下载地址: http://squid.acmeconsulting.it/download/squid-2.6.STABLE13-bin.zip 1．把squid ...

  5. docker 报错 Error response from daemon: driver failed programming external connectivity on endpoint mynginx

    Error response from daemon: driver failed programming external connectivity on endpoint mynginx (7d1 ...

  6. 如何验证cname，MX，spf记录是否生效？

    创建域名邮箱时,对域名做完相应设置后,在域名邮箱设置里点击“设置完成并提交验证”来等待验证所有权和MX记录设置的正确性.但同时也可以通过下面的方法确认设置是否成功和正确: 一.验证CNAME记录的方法 ...

  7. CAN协议学习（二）MCAN控制器介绍

    更多细节请参看MCAN2文档mcan2_ps.pdf. 一.MCAN2简介 MCAN2是Mentor公司开发的一个CAN2.0网络控制器的软核,初版2001年末版2006年.MCAN 2控制器实现了B ...

  8. member access within misaligned address 0x000000000031 for type 'struct ListNode', which requires 8 byte alignment

    在做LeetCode的two sum题目的时候,提交代码遇到了如题的runtime error,后来在一篇博客上看到了解决方法. 现有如下结构体: struct ListNode { int val; ...

  9. [原]Nginx+Lua服务端合并静态文件

    http://homeway.me 0x01.About 源代码已经上传到github:https://github.com/grasses/nginx-lua-static-merger nginx ...

  10. Android 4.4(KitKat)中apk包的安装过程

    原文地址:http://blog.csdn.net/jinzhuojun/article/details/25542011 事实上对于apk包的安装.4.4和之前版本号没大的区别. Android中a ...