如何为HTML5和CSS3编程添加到jQuery对象的事件
jQuery库对JavaScript添加了另一个非常强大的函数。
它允许HTML5和CSS3程序员轻松地将事件安装到任何jQuery对象。
看看hover.html。
将光标移动到任何列表项时，该项目周围会出现边框。
这不是在普通CSS中实现的困难效果，但jQuery甚至更容易。
如何添加悬停事件
查看代码以查看它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<title>hover.html</title>
<meta charset="UTF-8">
<script type = "text/javascript"
src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript">
$(init);
function init(){
$("li").hover(border, noBorder);
} //end init
function border(){
$(this).css("border", "1px solid black");
}
function noBorder(){
$(this).css("border", "0px none black");
}
</script>
</head>
<body>
<h1>Hover Demo</h1>
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</body>
</html>
HTML很简单。
它只是一个无序列表。
JavaScript并不是很复杂。
它由三个单行函数组成：
当文档准备就绪时调用init()。它使所有列表项的jQuery对象并将事件添加到它们。hover()函数接受两个参数：
第一个是当光标悬停在对象上时要调用的函数。
第二个是在光标离开对象时要调用的函数。
border()在当前元素周围绘制边框。 $(this)标识符用于指定当前对象。
noborder()是与border()函数非常相似的函数，但它从当前对象中删除边框。
在此示例中，使用了三种不同的函数。
许多jQuery程序员更喜欢使用匿名函数(有时被称为Lambda函数)，以在一条长线中括起整个函数：
$("li").hover(
function(){
$(this).css("border", "1px solid black");
},
function(){
$(this).css("border", "0px none black");
}
);
请注意，这仍然是技术上是单线代码。
我们可以立即构建其需要的位置，而不是引用已创建的两个函数。
每个函数定义都是悬停()方法的参数。
如果我们是计算机科学家，我们可能会争辩说这不是Lambda函数的完美示例，并且我们将是正确的。
重要的是要注意到函数规划的一些思想(如Lambda函数)蔓延到主流Ajax编程，这是一个令人兴奋的发展。
动态修改class
jQuery支持另一个精彩的函数。
我们可以定义CSS样式，然后动态地从元素添加或者删除该样式。
该代码显示这种函数的简单性是添加：
<!DOCTYPE html>
<html lang="en">
<head>
<title>class.html</title>
<meta charset="UTF-8">
<style type = "text/css">
.bordered {
border: 1px solid black;
}
</style>
<script type = "text/javascript"
src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript">
$(init);
function init(){
$("li").click(toggleBorder);
} //end init
function toggleBorder(){
$(this).toggleClass("bordered");
}
</script>
</head>
<body>
<h1>Class Demo</h1>
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</body>
</html>
以下是如何制作这个程序：
从一个基本HTML页面开始。
所有有趣的东西都发生在CSS和JavaScript中，因此页面的实际内容并不重要。创建要添加和删除的类。
我们可以构建一个名为CSS类，即只绘制元素周围的边框。当然，如果我们愿意，我们可以使用各种格式进行更复杂CSS类。链接init()方法。
当我们开始看时，大多数jQuery应用程序需要某种初始化。我们可以调用第一个函数。在里面()每当用户单击列表项时调用ToggleBorder()函数。
init()方法只是设置事件处理程序。只要列表项接收到单击事件(即，单击)，应激活ToggleBorder()函数。 ToggleBorder()函数，嗯，切换边框。
jQuery有几种用于操纵元素类的方法：addclass()将类分配给元素。
removeClass()从元素中删除类定义。
toggleclass()切换类(如果它当前未添加或者否则删除，则添加它)。
