使用jQuery的将桌面应用程序引入浏览器

2020-05-19 07:31:32易采站长站整理

// The slice() function lets you input a start and an end index in the array, to
// create a subset of the array. This will hide the 3rd through 5th paragraphs on the
// page
$(“p”).slice(2,5).hide();

除了这些数组遍历函数之外,jQuery 还提供了一些函数,使您可以查找嵌套在搜索词周围的元素。为什么这很有用呢?例如,我们常常需要在图片的旁边嵌入一个文本标签,或在表单元素旁边嵌入一个错误消息。使用这些命令可以查找特定的表单元素,然后通过将表单元素放置在下一个元素(span 标记)中,把该错误消息直接放置在表单元素旁边。清单 12 显示了这种设计的一个示例:


清单 12. 示例 next() 函数 


<input type=text class=validate><span></span>

function validateForm()
{
$(“.validate:text”).each(function(){
if ($(this).val()==””)
// We’ll loop through each textfield on the page with a class of “validate”
// and if they are blank, we will put text in the <span> immediately afterwards
// with the error message.

$(this).next().html(“This field cannot be blank”);
});
}


综合学到的知识

要了解如何结合使用以上知识,可以查看本文包含的示例应用程序(参见 参考资料 小节)。

现在简单介绍一下示例应用程序。我将在本系列所有文章中使用这个示例应用程序,因为它使用了大量不同的 jQuery 示例,并且几乎所有人都熟悉这个应用程序 — 一个处理 Web 邮件的富 Internet 应用程序。这个示例应用程序是一个简单的邮件客户机,它利用 jQuery 给用户这样的感觉:该电子邮件客户机非常类似于桌面应用程序。在最后一篇文章结束时,您将明白这个简单的应用程序是如何为用户制造这种感觉的,并且明白使用 jQuery 实现这个功能是多么简单。

本文的重点是 “Select All”/“Deselect All” 复选框,它们出现在 Web 邮件表(下面突出显示)的左侧列的顶部。当选中该复选框时,它将选择该列的每个复选框;取消选择该复选框时,它将取消选择该列的所有复选框。


图 2. “Select All” 复选框
 

清单 13. 综合学到的知识


<!– The first step is creating the Select All checkbox itself.
we give it a unique ID on the page –>