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. JavaScript变量提升 面试题

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. sort-colors——排序3种数字

    题目描述 Given an array with n objects colored red, white or blue, sort them so that objects of the same ...

  3. 谈谈IIS与ASP.NET管道

    作为一个Asp.Net平台开发者,非常有必要了解IIS和Asp.Net是如何结合,执行我们的托管代码,以及Asp.Net管道事件的. 本节目录 IIS 5.X IIS 6 IIS 7+ 集成模式 As ...

  4. 25个经典的Spring面试问答

    1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...

  5. python 的三元表达式

    python中的三目运算符不像其他语言 其他的一般都是 判定条件?为真时的结果:为假时的结果 如 result=5>3?1:0 这个输出1,但没有什么意义,仅仅是一个例子. 而在python中的 ...

  6. java中高级写法

    1.低级写法: if (null != redisCacheService.get(MediaConstants.GUANGDIANTONG_YOUMI + CommonConstants.PLUS  ...

  7. webview长按保存图片

    private String imgurl = ""; /***     * 功能:长按图片保存到手机     */    @Override    public void onC ...

  8. Tomcat9源码分析：BootStrap

    概览 BootStrap源码所在的位置是:org.apache.catalina.startup.Bootstrap 这个类是Tomcat项目的启动类,也就是main函数所在的地方,起始tomcat就 ...

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

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

  10. 【cogs182】【USACO Jan07】均衡队形【st表】

    题目描写叙述 农夫约翰的 N (1 ≤ N ≤ 50,000) 头奶牛,每天挤奶时总会按相同的顺序站好. 一日.农夫约翰决定为奶牛们举行一个"终极飞盘"比赛.为简化问题.他将从奶牛 ...