在上周的文章中，我们介绍了最基本的jQuery概念 。 我们已经学习了使用jQuery语句的步骤：确保文档准备就绪，选择元素并进行更改。 在本文中，我们将应用这些课程来实现一些很酷且有用的效果-加强您对jQuery基础的理解。
本文还摘自Earle Castledine和Craig Sharkie的《 jQuery：Ninja的新手》第2章。 您可以在此处免费下载PDF第1章，第2章和第7章的所有内容 。 该下载文件还包含整本书的代码存档，因此，如果您想按照本文中的示例进行操作，请务必先获取它。
客户不喜欢该网站上的免责声明-他认为该免责声明反映在该产品上很糟糕-但他的律师坚持认为这是必要的。 因此，客户要求您添加一个按钮，该按钮将在用户有机会阅读文本后将其删除：
例子1. chapter_02/11_hiding/index.html （节选）
<input type="button" id="hideButton" value="hide" />
我们在页面上添加了一个HTML按钮，其ID为hideButton 。 当用户单击此按钮时，我们希望隐藏ID为disclaimer的disclaimer元素：
例子2. chapter_02/11_hiding/script.js （摘录）
$('#hideButton').click(function() { $('#disclaimer').hide();});
运行此代码，并确保单击“隐藏”按钮时免责声明元素消失。
在此示例中，使元素实际消失的部分是hide动作。 因此，您可能会问，围绕该行的所有其他代码是什么？ 这就是所谓的事件处理程序-了解事件处理程序对于成为jQuery忍者至关重要。 我们可以使用许多事件处理程序（我们在这里使用了click事件处理程序），并且在继续进行过程中将使用大量事件处理程序。
事件处理程序 因其处理事件的功能而命名。 事件是发生在网页上的动作和用户交互。 当事件发生时，我们说它已经触发了 。 当我们编写一些代码来处理事件时，我们说我们捕获了事件。
始终有数千个事件在网页上触发：用户移动鼠标或单击按钮，或者调整浏览器窗口的大小或滚动条时。 我们可以捕获任何此类事件并对其采取行动。
本书中向您介绍的第一个事件是文档就绪事件。 是的，那是一个事件处理程序：当文档说“我准备好了”时，它触发了一个事件，我们的jQuery语句捕获了该事件。
我们使用click事件处理程序来告诉jQuery在click 按钮时隐藏免责声明：
$('#hideButton'). click (function() { $('#disclaimer').hide();});
当事件触发时，我们通常会希望引用触发该事件的元素。 例如，我们可能想要以某种方式修改用户刚刚单击的按钮。 这样的引用可通过JavaScript关键字this在事件处理程序代码中使用。 要将JavaScript对象转换为jQuery对象，我们将其包装在jQuery选择器中：
例子3. chapter_02/12_this/script.js （摘录）
$('#hideButton').click(function() { $(this) .hide(); // a curious disappearing button.});
$(this)提供了一种更好的方式来讨论引发事件的元素，而不必重新选择它。
继续我们的任务！ 客户端还指定了用户需要能够检索免责声明，以防他们错误地关闭了免责声明。 因此，让我们向HTML添加另一个按钮，这次将其id为showButton ：
例子4. chapter_02/13_revealing/index.html （节选）
<input type="button" id="showButton" value="show" />
我们还将在脚本文件中添加另一个jQuery语句，以处理单击按钮时显示的免责声明：
例子5. chapter_02/13_revealing/script.js （摘录）
$('#showButton').click(function() { $('#disclaimer').show();});
使用单独的按钮隐藏和显示免责声明似乎浪费了宝贵的屏幕空间。 最好有一个按钮执行两项任务-在可见的时候隐藏免责声明，在隐藏的时候显示它。 我们执行此操作的一种方法是检查元素是否可见，然后相应地显示或隐藏。 我们将删除旧的按钮，并添加这个新按钮：
例子6. chapter_02/14_toggle_1/index.html （节选）
<input type="button" id="toggleButton" value="toggle" />
单击它后，我们检查是否应该显示或隐藏免责声明：
例子7. chapter_02/14_toggle_1/script.js （摘录）
$('#toggleButton').click(function() { if ($('#disclaimer').is(':visible')) { $('#disclaimer').hide(); } else { $('#disclaimer').show(); }});
这介绍了is动作。 is与我们通常传递给jQuery函数的选择器相同，并检查它们是否与调用它的元素匹配。 在这种情况下，我们正在检查伪选择器:visible是否也选择了我们选择的#disclaimer 。 它也可以用于检查其他属性：选择是form还是div或已启用。
如果您是编程的新手（也就是说，如果您只使用过HTML和CSS），那么整个代码块可能会令人困惑！ 不用担心，它实际上非常简单：
if (condition) { // this part happens if the condition is true} else { // this part happens if the condition is false}
条件可以是JavaScript将评估为true或false任何条件。 这种结构在任何类型的编程中都非常普遍，在本书的其余部分中，我们将大量使用它。 如果你不舒服的话，最好的学习方法是玩一圈：尝试写不同的if / else使用jQuery的块is像我们上面写的一个动作。 您将立即掌握其窍门！
is将返回true或false具体取决于元素是否与选择器匹配。 为了我们的目的，我们将显示元素是否隐藏，如果可见则将其隐藏。 这种逻辑（我们在两种状态之间进行切换 ）称为切换 ，是一种非常有用的构造。
在两种状态之间切换元素非常普遍，以至于许多jQuery函数都有一个允许切换的版本。 show / hide的切换版本简称为toggle ，其工作方式如下：
例子8. chapter_02/15_toggle_2/script.js （摘录）
$('#toggleButton').click(function() { $('#disclaimer').toggle();});
每次单击按钮时，该元素都会在可见和隐藏之间切换。
但是，如果按钮上标有比“切换”更有用的词，那就太好了，这可能会使我们的用户感到困惑。 如果您还想切换按钮的文字怎么办？ 与使用jQuery时一样，有几种方法可以解决此问题。 这是一个：
例子9. chapter_02/16_toggle_text/script.js （摘录）
$('#toggleButton').click(function() { $('#disclaimer').toggle(); if ($('#disclaimer').is(':visible')) { $(this).val('Hide'); } else { $(this).val('Show'); }});
此代码中有很多内容对您来说是新的。 我们将保存大多数详细信息以供以后使用，但请仔细阅读一下，看看是否可以自己解决。 （提示：请记住，选择器$(this)是指导致事件触发的元素，在这种情况下为按钮。）
我们的免责声明功能运行良好，无疑会给我们的客户留下深刻的印象。 但是，我们应该注意解决方案的一个微妙方面：如果用户使用不支持JavaScript的浏览器进入我们的网站，则他们会在页面上看到一个按钮，单击该按钮不会执行任何操作。 这将导致非常混乱的用户，甚至可能放弃我们的网站。
“不支持JavaScript吗？” 你可能会打喷嚏。 “哪种浏览器无法运行JavaScript ？！”
没有JavaScript的情况下，浏览Web的人数可能会比您想象的要多。 需要屏幕阅读器才能使用网络的视力障碍者； 以及那些担心JavaScript是不必要的安全风险，因此选择禁用它的人。
根据您网站的人口统计，可能有5％至10％的用户在没有JavaScript功能的情况下进行浏览，没有人愿意疏远10％的客户！ 解决方案是为这些用户提供可接受的体验，并为其他所有人增强体验。 这种做法称为渐进增强。
对于免责声明功能，我们可以解决此折衷方案：我们希望免责声明对所有用户可见，因此我们将其放置在HTML中。 然后，我们添加了对具有JavaScript的用户隐藏它的功能。 也就是说，我们希望避免向无法使用显示/隐藏按钮的用户显示该按钮。
实现此目的的一种方法可能是用CSS隐藏我们的按钮，而仅通过jQuery css语句显示它。 这个技巧的问题在于，如果用户的浏览器也缺乏对CSS的支持，它将失败。 我们真正想做的是通过jQuery将按钮添加到页面。 这样，只有使用JavaScript的用户才能看到该按钮。 完善！
到目前为止，我们已经看到了用于选择的jQuery函数，但是它确实还有另一个同等重要的函数：创建新元素。 实际上，将创建任何放置在jQuery函数中的有效HTML字符串，并准备将其粘贴在页面上。 以下是我们如何创建一个简单的段落元素的方法：
$('<p>A new paragraph!</p>')
编写此代码时，jQuery执行一些有用的操作：它将HTML解析为DOM片段并选择它-就像普通的jQuery选择器一样。 这意味着它可以立即用于进一步的jQuery处理。 例如，要将一个class添加到我们新创建的元素中，我们可以简单地编写：
$('<p>A new paragraph!</p>').addClass('new');
新的段落现在被赋予new class 。 使用此方法，您可以通过jQuery本身创建所需的任何新元素，而不用在HTML标记中定义它们。 这样，我们就可以完成逐步增强页面的目标。
在内部，通过创建简单元素（例如div ）并将该div的innerHTML属性设置为您提供的标记来解析HTML字符串。 您传递的某些内容无法轻松转换-因此最好使HTML片段尽可能简单。
创建新元素后，我们需要一种方法将其插入页面中我们希望它们进入的位置。 有几个jQuery函数可用于此目的。 我们要看的第一个是insertAfter函数。 insertAfter将采用我们当前的jQuery选择（在本例中为我们新创建的元素），并将其插入另一个选定的元素之后，然后将其作为参数传递给函数。
一个示例是显示其工作方式的最简单方法。 这就是我们使用jQuery创建切换按钮的方式：
例子10. chapter_02/17_insert_after/script.js （摘录）
$('<input type="button" value="toggle" id="toggleButton">') .insertAfter('#disclaimer'); $('#toggleButton').click(function() { $('#disclaimer').toggle();});
如图1所示，“使用jQuery创建并插入的按钮” ，该按钮将在免责声明之后插入到我们的页面中，就像我们将其放在HTML文件中一样。
图1.用jQuery创建并插入的按钮
insertAfter函数将新元素作为同级元素直接添加到disclaimer元素之后。 如果您希望按钮出现在 disclaimer元素之前 ，则可以将元素定位在disclaimer之前并使用insertAfter ，或者更insertAfter逻辑的是使用insertBefore方法。 insertBefore还将新元素放置为现有元素的兄弟元素，但它将立即出现在它之前：
例子11. chapter_02/18_insert_before/script.js （摘录）
$('<input type="button" value="toggle" id="toggleButton">') . insertBefore ('#disclaimer');
快速复习：当我们谈论DOM时， 兄弟姐妹指的是DOM层次结构中同一级别上的元素。 如果您的div包含两个span元素，则span元素是同级元素。
如果要将新元素添加为现有元素的子元素（也就是说，如果希望新元素出现在现有元素内），则可以使用prependTo或appendTo函数：
例子12. chapter_02/19_prepend_append/script.js （摘录）
$('<strong>START!</strong>').prependTo('#disclaimer');$('<strong>END!</strong>').appendTo('#disclaimer');
如图2所示，“ prependTo和appendTo实际上” ，我们的新元素已添加到实际免责声明div的开头和结尾，而不是之前或之后。 还有更多用于插入和删除元素的操作，但是由于在本轮更改中不需要它们，因此我们稍后将解决它们。
图2. prependTo和appendTo的作用
扫一扫
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
