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: