The jQuery library adds another extremely powerful capability to JavaScript. It allows HTML5 and CSS3 programmers to easily attach an event to any jQuery object. Take a look at hover.html.
When you move your cursor over any list item, a border appears around the item. This isn't a difficult effect to achieve in ordinary CSS but it's even easier in jQuery.
How to add a hover event
Look at the code to see how it works:
<!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>
The HTML couldn't be simpler. It's simply an unordered list. The JavaScript isn't much more complex. It consists of three one-line functions:
init() is called when the document is ready. It makes jQuery objects of all list items and attaches the event to them. The hover() function accepts two parameters:
The first is a function to be called when the cursor hovers over the object.
The second is a function to be called when the cursor leaves the object.
border() draws a border around the current element. The $(this) identifier is used to specify the current object.
noborder() is a function that is very similar to the border() function, but it removes a border from the current object.
In this example, three different functions were used. Many jQuery programmers prefer to use anonymous functions (sometimes called lambda functions) to enclose the entire functionality in one long line:
$("li").hover(
function(){
$(this).css("border", "1px solid black");
},
function(){
$(this).css("border", "0px none black");
}
);
Note that this is still technically a single line of code. Instead of referencing two functions that have already been created, you can build the functions immediately where they are needed. Each function definition is a parameter to the hover() method.
If you're a computer scientist, you might argue that this is not a perfect example of a lambda function, and you would be correct. The important thing is to notice that some ideas of functional programming (such as lambda functions) are creeping into mainstream AJAX programming, and that's an exciting development.
Changing classes on the fly
jQuery supports another wonderful feature. You can define a CSS style and then add or remove that style from an element dynamically.
The code shows how easy this kind of feature is to add:
<!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>
Here's how to make this program:
Begin with a basic HTML page.
All the interesting stuff happens in CSS and JavaScript, so the actual contents of the page aren't that critical.
Create a class you want to add and remove.
You can build a CSS class called that simply draws a border around the element. Of course, you can make a much more sophisticated CSS class with all kinds of formatting if you prefer.
Link an init() method.
As you're beginning to see, most jQuery applications require some sort of initialization. You can call the first function . init()
Call the toggleBorder() function whenever the user clicks a list item.
The init() method simply sets up an event handler. Whenever a list item receives the click event (that is, it is clicked) the toggleBorder()function should be activated. The toggleBorder()function, well, toggles the border.
jQuery has several methods for manipulating the class of an element:
addClass() assigns a class to the element.
removeClass() removes a class definition from an element.
toggleClass() switches the class (adds it if it isn't currently attached or removes it otherwise).