JQuery能做什么

JQuery在线手册

1、取得文档中的元素

如果不使用JavaScript库，遍历DOM（Document Object Model，文档对象模型）树，以及查找HTML文档结构中某个特殊的部分，必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。$('div.content').find('p');

2、修改页面的外观

CSS虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足，它提供了跨浏览器的标准解决方案。而且，即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。$('ul > li:first').addClass('active');

3、改变文档的内容

jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码，jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。$('#container').append('<a href="more.html">more</a>');

4、响应用户的交互操作

即使是最强大和最精心设计的行为，如果我们无法控制它何时发生，那它也毫无用处。jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

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

5、为页面添加动态效果

为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。$('div.details').slideDown();

6、无需刷新页面从服务器获取信息

这种编程模式就是众所周知的Ajax（AsynchronousJavaScript and XML，异步JavaScript和XML），它是一系列在客户端和服务器之间传输数据的强大技术。jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计，从而得以创建出反应灵敏、功能丰富的网站。$('div.details').load('more.html #content');

7、简化常见的JavaScript任务

除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构的操作（例如迭代和数组操作等）。

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

jQuery为什么如此出色

1、利用CSS的优势

通过将查找页面元素的机制构建于CSS选择符之上，jQuery继承了简明清晰地表达文档结构的方式。由于进行专业Web开发的一个必要条件是掌握CSS语法，因而jQuery成为希望向页面中添加行为的设计者们的切入点。

2、支持拓展

为了避免特性蠕变，jQuery将特殊情况下使用的工具归入插件当中。创建新插件的方法很简单，而且拥有完备的文档说明，这促进了大量有创意且有实用价值的模块的开发。甚至在下载的基本jQuery库文件当中，多数特性在内部都是通过插件架构实现的。而且，如有必要，可以移除这些内部插件，从而生成更小的库文件。

3、抽象浏览器不一致性

Web开发领域中一个令人遗憾的事实是，每种浏览器对颁布的标准都有自己的一套不太一致的实现方案。任何Web应用程序中都会包含一个用于处理这些平台间特性差异的重要组成部分。虽然不断发展的浏览器前景，使得为某些高级特性提供浏览器中立的完美的基础代码（code base）变得不大可能，但jQuery添加一个抽象层来标准化常见的任务，从而有效地减少了代码量，同时，也极大地简化了这些任务。

4、总是面向集合

当我们指示jQuery找到带有collapsible类的全部元素，然后隐藏它们时，不需要循环遍历每一个返回的元素。相反，.hide()之类的方法被设计成自动操作对象集合，而不是单独的对象。利用这种称作隐式迭代（implicit iteration）的技术，就可以抛弃那些臃肿的循环结构，从而大幅地减少代码量。

5、将多重操作集于一行

为了避免过度使用临时变量或不必要的代码重复，jQuery在其多数方法中采用了一种称作连缀（chaining）的编程模式。这种模式意味着基于一个对象进行的多数操作的结果，都会返回这个对象自身，以便为该对象应用下一次操作。

第一个jQuery驱动的页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <style type="text/css">

        body {

            background-color: #fff;

            color: #000;

            font-family: Helvetica, Arial, sans-serif;

        }

        h1, h2, h3 {

            margin-bottom: .2em;

        }

        .poem {

            margin: 0 2em;

        }

        .highlight {

            background-color: #ccc;

            border: 1px solid #888;

            font-style: italic;

            margin: 0.5em 0;

            padding: 0.5em;

        } 

    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            var item = $('div.poem-stanza');

            item.addClass("highlight");

        });

    </script>

</head>

<body>

    <h1>Through the Looking-Glass</h1>

    <div class="author">by Lewis Carroll</div>

    <div class="chapter" id="chapter-1">

        <h2 class="chapter-title">1. Looking-Glass House</h2>

        <p>

            There was a book lying near Alice on the table,

            and while she sat watching the White King (for she

            was still a little anxious about him, and had the

            ink all ready to throw over him, in case he fainted

            again), she turned over the leaves, to find some

            part that she could read, <span class="spoken">

                "&mdash; for it's all in some language I don't know,"

            </span> she said to herself.

        </p>

        <p>It was like this.</p>

        <div class="poem">

            <h3 class="poem-title">YKCOWREBBAJ</h3>

            <div class="poem-stanza">

                <div>sevot yhtils eht dna ,gillirb sawT'</div>

                <div>;ebaw eht ni elbmig dna eryg diD</div>

                <div>,sevogorob eht erew ysmim llA</div>

                <div>.ebargtuo shtar emom eht dnA</div>

            </div>

        </div>

        <p>

            She puzzled over this for some time, but at last

            a bright thought struck her. <span class="spoken">

                "Why, it's a Looking-glass book, of course! And if

                I hold it up to a glass, the words will all go the

                right way again."

            </span>

        </p>

        <p>This was the poem that Alice read.</p>

        <div class="poem">

            <h3 class="poem-title">JABBERWOCKY</h3>

            <div class="poem-stanza">

                <div>'Twas brillig, and the slithy toves</div>

                <div>Did gyre and gimble in the wabe;</div>

                <div>All mimsy were the borogoves,</div>

                <div>And the mome raths outgrabe.</div>

            </div>

        </div>

        </div>

</body>

</html>

接下来我们来分析这几行代码

1、查找诗歌文本

jQuery中基本的操作就是选择文档中的某一部分，这是通过$()函数来完成的。通常，该函数需要一个字符串参数，参数中可以包含任何CSS选择符表达式。在这个例子中，我们想要找到带有poem-stanza类的所有<div>元素，因此选择符非常简单。这里用到的$()函数会返回一个新的jQuery对象实例，它是我们从现在开始就要打交道的基本的构建块。jQuery对象中会封装零个或多个DOM元素，并允许我们以多种不同的方式与这些DOM元素进行交互。

2、加入新类

本例中，.addClass()方法的作用是不言而喻的，这个方法唯一的参数就是要添加的类名。现在，这个例子只是简单地添加了highlight类，而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。我们注意到，无需迭代操作就能为所有诗歌中的节添加这个类。前面我们提到过，jQuery在.addClass()等方法中使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的文档部分的修改。

3、执行代码

综合起来，$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是，如果将这行代码单独插入文档的头部，不会有任何效果。通常，JavaScript代码在浏览器初次遇到它们时就会执行，而在浏览器处理头部时，HTML还不会呈现样式。因此，我们需要将代码延迟到DOM可用时再执行。通过使用$(document).ready()方法，jQuery支持我们预定在DOM加载完毕后调用某个函数，而不必等待页面中的图像加载。尽管不使用jQuery，也可以做到这种预定，但$(document). ready()为我们提供了很好的跨浏览器解决方案，涉及如下功能：

 尽可能使用浏览器原生的DOM就绪实现，并以window.onload事件处理程序作为后备；
可以多次调用$(document).ready()并按照调用它们的顺序执行；
 即便是在浏览器事件发生之后把函数传给$(document).ready()，这些函数也会执行；
 异步处理事件的预定，必要时脚本可以延迟执行；
 通过重复检查一个几乎与DOM同时可用的方法，在较早版本的浏览器中模拟DOM就绪
事件。
.ready()方法的参数可以是一个已经定义好的函数的引用，如下所示：

function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);

JQuery基础教程：入门的更多相关文章

  1. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  2. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  3. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

  4. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

  5. jquery 基础教程[温故而知新二]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  6. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  7. 【JQuery基础教程(第三版)图灵】笔记

    第1章 jQuery入门 1.jQuery官方网站:http://jquery.com   2.开发工具:Firebug         第2章 选择元素 1.属性选择符:属性选择符通过HTML元素的 ...

  8. 总结： 《jQuery基础教程》 1-4章

    前言: 因为公司的项目用到了jQuery+Bootstrap,而Bootstrap基于jQuery,突然发现自己只是很久前看过jQuery的视频教程,对jQuery的一些API有一些了解,在使用中还是 ...

  9. JQuery基础教程：事件（上）

    在页面加载后执行任务      之前我们已经知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式,但是要知道原生的window.onload事件也可以实现相同的 ...

随机推荐

  1. smarty模板基础

    将前台后台隔离,前台控制显示,后台控制逻辑/内容,与cms类似 原理: 用户访问text.php页面,后台调用类smarty.class.php显示静态模板;

  2. 转：Why SeaJS

    原文地址:http://chaoskeh.com/blog/why-seajs.html Why SeaJS 前言 本文主要面向刚接触 SeaJS 的同学.文章会先提出传统 Javascript 开发 ...

  3. LintCode "Number of Islands II"

    A typical Union-Find one. I'm using a kinda Union-Find solution here. Some boiler-plate code - yeah ...

  4. Python列表,元组,字典,序列,引用

    1.列表 # Filename: using_list.py # This is my shopping list shoplist=["apple", "mango&q ...

  5. BIP_开发案例04_通过BI Publisher实现打印报表的二维码（案例）（待整理）

    2014-01-01 Created BaoXinjian

  6. OAF_架构MVC系列1 - MVC的概述（概念）

     2015-04-03 Created By BaoXinjian

  7. 转--Android实用的代码片段 常用代码总结

    这篇文章主要介绍了Android实用的代码片段 常用代码总结,需要的朋友可以参考下     1:查看是否有存储卡插入 复制代码 代码如下: String status=Environment.getE ...

  8. ylbtech-Unitity-CS:Indexers

    ylbtech-Unitity-CS:Indexers 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, // indexer.cs // 参数:indexer.txt using S ...

  9. memcached完全剖析–1. memcached的基础

    系列文章导航: memcached完全剖析–1. memcached的基础 memcached全面剖析–2. 理解memcached的内存存储 memcached全面剖析–3. memcached的删 ...

  10. mysql常用脚本

    1.执行拼接字符串sql语句(可传参数) set @dbname='trickraft_14f.'; set @sql=CONCAT('SELECT * FROM ',@dbname,'Armforc ...