(2)入门指南——(2)jQuery可以做什么(What jQuery does)
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');
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)的更多相关文章
- Jquery入门指南教程
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScr ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- Day 19: EmberJS 入门指南
编者注:我们发现了有趣的系列文章<30天学习30种新技术>,正在翻译,一天一篇更新,年终礼包.下面是第19天的内容. 到目前为止,我们这一系列文章涉及了Bower.AngularJS.Gr ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- yii2实战教程之新手入门指南-简单博客管理系统
作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...
- 【翻译】Fluent NHibernate介绍和入门指南
英文原文地址:https://github.com/jagregory/fluent-nhibernate/wiki/Getting-started 翻译原文地址:http://www.cnblogs ...
随机推荐
- oc总结
OC10天大纲 一.类和对象 1.什么是类? 同一种对象的抽象就是类. 2.什么是对象? 世界上的任何事物都可以称为对象,每个对象都有他自己的属性和行为. 3.如何创建一个类(请把一个.h和一个.m粘 ...
- java_reflect_04
反射操作数组: 通过public Class<?> getComponentType()来取得一个数组的Class对象 例: import java.lang.reflect.Array ...
- PHP PDO 简单登陆操作
用PHP做出一个简单的登陆操作,确实很简单,下面就让我给大家简单的介绍一下PDO做出一个登陆界面操作的过程,因为也是初学乍练,不足之处请大家包涵. 首先,首先还要建一个表,在MySQL中建表,核心代码 ...
- 你好,C++(12)如何管理多个类型相同性质相同的数据?3.6 数组
3.6 数组 学过前面的基本数据类型之后,我们现在可以定义单个变量来表示单个的数据.例如,我们可以用int类型定义变量来表示公交车的216路:可以用float类型定义变量来表示西红柿3.5元一斤.但 ...
- 初涉JavaScript模式 (7) : 原型模式 【三】
组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...
- flvplayer.swf flv视频播放器使用方法
今天由于网页上要加入一个视频文件,就研究了一下flv视频播放器flvplayer.swf : 关于SewisePlayer 插件 演示例子链接 一.直接在html文件中加载: &l ...
- 织梦DedeCms用SQL语句调用数据库任意内容
dedecms多站点数据利用SQL句段进行互相调用数据方法:2个或者多个DEDE的站怎么互相调用数据,非JS调用,前提是2个或者多个dedecms站点都安装的同一个数据库的不同数据表内,才能实现功能. ...
- jquery 事件绑定(1)
$(function(){ $("#panel h5.head").bind("click",function(){ $(this).next().show() ...
- 周赛C题 LightOJ 1047 (DP)
C - C Time Limit:500MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Description Th ...
- IOS学习:常用第三方库(GDataXMLNode:xml解析库)
IOS学习:常用第三方库(GDataXMLNode:xml解析库) 解析 XML 通常有两种方式,DOM 和 SAX: DOM解析XML时,读入整个XML文档并构建一个驻留内存的树结构(节点树),通过 ...