jQuery for Beginners: Nothing but the Good Stuff


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. We’ve decided to make your acquaintance with jQuery simpler and prepared a “What is jQuery” article mixed with cheat sheet that will guide you into the world of JavaScript coding.

You can use simple JavaScript to perform all functions that jQuery provides. Then why jQuery? jQuery library provides many easy to use functions and methods to make rich applications. These functions are very easy to learn that even a designer can get it fast. Due to these features jQuery is very popular and is in high demand among the developers. You can use jQuery in all the web based applications no matter what technologies you’ve applied.

jQuery is java script and can be used with JSP, Servlets, ASP, PHP, CGI and almost all the web programming languages. The jQuery code is very simple and easy to learn.

Key features of jQuery

  • DOM element selections functions
  • DOM traversal and modification
  • Events
  • CSS manipulation
  • Effects and animations
  • Ajax
  • Extensibility
  • Utilities – such as browser version and the each function.
  • JavaScript Plugins

How much time is required to learn jQuery?

You can learn jQuery in a day and master it within 2-3 days. There are so many features available with jQuery and you may spend months to explore these features.

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 src=”js/jquery-1.4.min.js”></script>
<script>
$(document).ready(function(){
//Your code goes here.
});
</script>
</head>
<body>
<div>This is visible.</div>
<div style=”display:none” id=”showme”>This is hidden.</div>
<input value=”doSomething”>
</body>
</html>

Here’s a quick rundown on how to apply these effects to < 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 src=”js/jquery-1.4.min.js”></script>
<script>
$(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!”);
});

***

Well don’t be angry in you didn’t find what you’ve expected, here is a list of best resources for mastering jQuery:

How jQuery Works

***

jQueryrain includes 1500+ Plugins and turorials

***

Best jQuery Images Galleries & Sliders

***

jQuery Popup Window Tutorials

***

jQuery Animation Tutorials

***

If you got something to say. or would like to add something to the blog post comments section is at your disposal.

Share this post: