The jQuery library provides a general-purpose abstraction layer for common web scripting, and is, therefore, useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities. The core features, though, assist us in accomplishing the following tasks:

jQuery库为通用的web脚本提供了一个多用途的概念层级,因此在几乎所有的脚本环境中都是有用的。他的可扩展性因为这我们不可能在一本书中覆盖他的全部可能的使用方法和功能,正如插件不断的被开发出来去添加新功能。不过,他的核心功能帮助我们完成下面的功能:

Access elements in a document: Without a JavaScript library, web developers often need to write many lines of code to traverse the Document ObjectModel(DOM) tree and locate specific portions of an HTML document's structure. With jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact piece of the document that needs to be inspected or manipulated.

$('div.content').find('p');

存取文档元素:假如不使用js库,web开发者通常需要写很多行代码去遍历DOM树、找到在元素HTML结构中明确的位置。但是通过jQuery他们将会有一个强大且高效的选择器提供使用,这让检索那些需要被检索或者操作的文档部分变的很容易。

$("div.content").find("p");

Modify the appearance of a web page: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when web browsers do not all support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.

$('ul > li:first').addClass('active');

修改页面的展现样式:css提供了一个影响页面渲染的有力方法,但是有一点不爽的是,不是所有的浏览器都支持相同的标准。使用jquery,开发者可以依赖所有浏览器都支持的标准度过这些空缺。另外,甚至在文档渲染以后,jquery也可以改变应用于部分文档上的类和style。

$('ul > li:first').addClass('active');

Alter the content of a document: Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use Application Programming Interface(API).

$('#container').append('<a href="more.html">more</a>');

修改文档内容:不局限于仅仅美化页面的改变,仅仅敲几下键盘jquery就可以修改文档的内容,文本可以被修改,图片可以被插入或交换,列表可以被重新整理,全部的文档结构可以被重写或扩展---全部依靠一个简单使用的api。

$('#container').append('<a href="more.html">more</a>');

Respond to a user's interaction: Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. At the same time, its event-handling API removes browser inconsistencies that often plague web developers.

$('button.show-details').click(function() {

$('div.details').show();

});

对用户的交互作出反应:甚至最精心制作的有力的行为如果我们没有在他们发生的时候没有控制他们都是没有用的。jquery库提供了高雅的方法去处理很多种的事件,比如用户点击一个链接,而不用使用事件处理去混乱html代码。同时事件处理api还移除了通常折磨web开发者的兼容性问题。

$('button.show-details').click(function() {

$('div.details').show();

});

Animate changes being made to a document: To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new graphic displays.

$('div.details').slideDown();

为文档添加动画改变:为了有效地实现交互行为,设计师必须也为用户提供一个视觉反馈。jquery通过提供一个效果数组,比如淡出,清除和精心制作图象展示的工具箱,实现了这一点。

$('div.details').slideDown();

Retrieve information from a server without refreshing a page: This code pattern has become known as Ajax, which originally stood for asynchronousJavaScript and XML, but has since come to represent a much greater set of technologies for communicating between the client and the server. The jQuery library removes the browser-specific complexity from this responsive, featurerich process, allowing developers to focus on the server-end functionality.

$('div.details').load('more.html #content');

无刷新的从服务器取回数据:这种代码模式已经以ajax的名字被大家熟知,代表异步的javascript和XML,但是他已经代表了一个更加强大的在客户端和服务器端交流的技术。jqery库从这个响应的很有特点的进程中移出了浏览器的复杂性,允许开发者关注服务器端的功能。

$('div.details').load('more.html #content');

Simplify common JavaScript tasks:In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.

$.each(obj, function(key, value) {

total += value;

});

简单的js任务:除了所有的这些文档明确的jquery特点以外,jquery提供了基础js概念的增强,比如迭代和数组控制。

$.each(obj, function(key, value) {
total += value;

});

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/supportand register to have the files e-mailed directly to you.

下载范例代码
你可以使用你在
http://www.packtpub.com上购买书籍的下载下载范例代码文件。如果你在其他别的地方购买的这本书,你可以访问
http://www.packtpub.com/support然后注册,直接把这些文件发电子邮件给自己。

(2)入门指南——(2)jQuery可以做什么(What jQuery does)的更多相关文章

  1. Jquery入门指南教程

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScr ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. RequireJS 入门指南

    RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...

  4. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  5. node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...

  6. Day 19: EmberJS 入门指南

    编者注:我们发现了有趣的系列文章<30天学习30种新技术>,正在翻译,一天一篇更新,年终礼包.下面是第19天的内容. 到目前为止,我们这一系列文章涉及了Bower.AngularJS.Gr ...

  7. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

  8. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. yii2实战教程之新手入门指南-简单博客管理系统

    作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...

  10. 【翻译】Fluent NHibernate介绍和入门指南

    英文原文地址:https://github.com/jagregory/fluent-nhibernate/wiki/Getting-started 翻译原文地址:http://www.cnblogs ...

随机推荐

  1. 深入理解offsetTop与offsetLeft

    做为走上前端不归路的我,以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离,同理offsetRight是相对于上内边框.那么问题来了,包含元素off ...

  2. 新思路:Exception Handle

    以前提到异常处理,马上就想到加try-catch. 没错,这种应激反应是对的.关键是怎么加? 如果想为每一个方法都加异常处理,输出相同格式的异常信息,应该怎么做呢? 难道是为每一个方法加一个try-c ...

  3. Android中AsyncTask异步

    今天我们学习了 AsyncTack, 这是一个异步任务. 那么这个异步任务可以干什么呢? 因为只有UI线程,即主线程可以对控件进行更新操作.好处是保证UI稳定性,避免多线程对UI同时操作. 同时要把耗 ...

  4. laravel框架——保存用户登陆信息(session)

    public function inlog(Request $request) { //获取表单提交的数据 $input = $request->all(); //根本获取的数据去数据库中查询 ...

  5. 启动weblogic11g一直提示<141281> <unable to get file lock, will retry ...>

    一次非正常关闭weblogic之后,再次启动时启动不成功,一直提示:<141281> <unable to get file lock, will retry ...> 解决方 ...

  6. 突然间,对JAVA也找到点感觉了。

    书上没有那段代码,我自己修修补补弄完全了呢.... 就是感觉体系有点宏大,不要急,慢慢玩~!~~ 这个世界很精彩哟~~: QuizCard.java package QuizCard.sky.com; ...

  7. h.264 FMO

    在H.264之前的标准中,比如H.263,其比特流中的数据是按照一个宏块接一个宏块的方式排列的,一旦发生丢包,很多相邻宏块信息都会丢失,很难进行错误隐藏处理.在H.264中加入了一项新特性:把宏块在比 ...

  8. [Android] hid设备按键流程简述

    hexdump /dev/hidraw0就能看到usbhid设备传输过来的裸流 如:按下Input键 003ae60 0000 0096 8000 006b 0000 0000 0000 0000 * ...

  9. 使用Java Applet在客户端解压缩,以及使用证书的意义

    以前解压缩是用Java Applet在客户端解压缩,而且用户不知道这回事.但是现在Chrome不支持NP API了,所以不得不把Java去掉,然后在服务器里解压缩.风险在于,解压缩以后,传输到客户端的 ...

  10. POJ1080 Human Gene Functions(LCS)

    题目链接. 分析: 和 LCS 差不多. #include <iostream> #include <cstdio> #include <cstdlib> #inc ...