Coding with JavaScript For Dummies
Book image
Explore Book Buy On Amazon
jQuery is a powerful and simple JavaScript library that you can use to select elements in your Web page, add impressive special effects, and insert content. Also find great resources for jQuery tips, tutorials, and plug-ins.

Selecting elements with jQuery

jQuery allows you to select elements in a Web page with ease. You can find anything you want in a page and then use jQuery to add special effects, react to user actions, or show and hide content inside or outside the element you have selected. All these tasks start with knowing how to select an element. Here’s a handy list you can use to select almost anything on your Web page.

To Select By Use This
Element type (for example, <img>) $(“img”)
All elements $(“*”)
ID (for example, id=”thisIsTheID”) $(“#thisIsTheID”)
Class (for example, class=”someClass”) $(“.someClass”)
Order (for example, the first or last <img> element) $(“img:first”)
$(“img:last”)
Attribute, (for example, to get the length attribute of <img>) $(“img[height]”).length
Parent (for example, the parent of <div>) $(“div:parent”)
Child (for example, the first or last child of <div>) $(“div:first-child”)
$(“div:last-child”)

Showing, hiding, sliding, and fading elements with jQuery

jQuery effects are great fun and can transform a simple, static Web page into a dynamic, interactive experience for the site visitor. Part of the visual interest that jQuery offers is the capability to show, hide, slide, and fade elements. The examples that follow all use this sample code:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Your code goes here.
});
</script>
</head>
<body>
<div id="hideme">This is visible.</div>
<div style="display:none" id="showme">This is hidden.</div>
<input id="showme" value="doSomething" type="submit">
</body>
</html>

Here’s a quick rundown on how to apply these effects to a <div> element on a Web page.

Effect Code
Hide $(“:submit”).click(function () {
$(“div”).hide();
});
Show $(“:submit”).click(function () {
$(“#showme”).show();
});
Slide down $(“:submit”).click(function () {
$(“#showme”).slideDown();
});
Slide up $(“:submit”).click(function () {
$(“#hideme”).slideUp();
});
Fade in $(“:submit”).click(function () {
$(“#showme”).fadeIn();
});
Fade out $(“:submit”).click(function () {
$(“#hideme”).fadeOut();
});

Inserting content before, after, and inside elements with jQuery

jQuery provides you with easy ways to get at the data in your Web page. In particular, you can insert any content you want, anywhere on your page. The examples that follow all use this sample code:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Your code goes here.
});
</script>
</head>
<body>
<div>I am a div.</div>
<br />
<input value="Go" type="submit">
</body>
</html>

Here’s a quick rundown on how to insert content before, after, and inside a <div> element in a Web page:

To Place Content Code
In front of and outside the <div> (before) $(“:submit”).click(function () {
$(“div”).before(“Before<br />”);
});
In back of and outside the <div> (after) $(“:submit”).click(function () {
$(“div”).after(“After<br />”);
});
Inside the <div> but before
existing content (prepend)
$(“:submit”).click(function () {
$(“div”).prepend(“New Content!”);
});
Inside the <div> but after
existing content (append)
$(“:submit”).click(function () {
$(“div”).append(“New Content!”);
});

Online jQuery resources

As you gain experience with jQuery, you’ll likely have questions about more advanced jQuery techniques. And after you use jQuery plug-ins, you’ll be hooked and want to get more. jQuery.com provides lots of technical support and the official list of jQuery plug-ins. Visit these additional sites for answers to your jQuery questions and for more ways to extend how you use jQuery in your Web pages:

About This Article

This article is from the book:

About the book authors:

Chris Minnick is an author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Learn more at watzthis.com. Eva Holland is an experienced web developer, tech trainer, and coauthor of Coding with JavaScript For Dummies. With Chris Minnick, she founded WatzThis?, a company focused on training and course development.

This article can be found in the category: