jQuery tutorial for beginners

What is jQuery?

jQuery is a lightweight, “write less, do more”, JavaScript library. jQuery is a fast, small, and feature-rich JavaScript library. It makes HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jQuery is absolutely amazing. It’s cross-browser, easy to learn, and makes adding interactivity to your website a breeze.

How to setup jQuery file with html

Before we can do anything, we need to establish our file and link it to our HTML document. First, we will create our plugin file and put it in the “js” directory of our website. It is traditional to start our filename with “jQuery,” followed by the actual plugin name, so we will call this “jquery-hello.js”.

Let us create an index.html file and a folder by the name of “js”.

Mirketa-ProjectFolderStructure

Then let’s create a jQuery file in js folder, for example- “jquery-1.9.1.min.js”.

Mirketa-JqueryFilesInWorkspace

Next, we will need to make sure our plugin files are linked in our HTML file. To ensure this let us place the following two lines at the bottom of our HTML document, just before the closing </body> tag:

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/jQuery-hello.js"></script>

jQuery CDN

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

 jQuery Syntax

Basic syntax is: $(selector).action()

1. A $ sign to define/access jQuery
2. A (selector) to “query (or find)” HTML elements
3. A jQuery action() to be performed on the element(s)

 Examples:

$(this).hide() – hides the current element.

-$(“p”).hide() – hides all <p> elements.
-$(“.test”).hide() – hides all elements with class=”test”.
-$(“#test”).hide() – hides the element with id=”test”.

 

jQuery Event

Mouse Events Keyboard Events Form Events Document/Window Events
Click Keypress submit load
Dblclick Keydown change resize
Mouseenter Keyup focus scroll
Mouseleave blur unload

 

jQuery Events

click()

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:

$(“p”).click(function(){
$(this).hide();
});

dblclick()

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:

$(“p”).dblclick(function(){
$(this).hide();
});

mouseenter()

The mouseenter() method also attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element:

$(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});

mouseleave()

The mouseleave() method too attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element:

$(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});

mousedown()

The event handler attached by mousedown()

is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

$(“#p1”).mousedown(function(){
alert(“Mouse down over p1!”);
});

mouseup()

The event handler attached by mouseup ()

is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

$(“#p1”).mouseup(function(){
alert(“Mouse up over p1!”);
});

hover()

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

$(“#p1”).hover(function(){
alert(“You entered p1!”);
},
function(){
alert(“Bye! You now leave p1!”);
});

focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

$(“input”).focus(function(){
$(this).css(“background-color”, “#cccccc”);
});

blur()

The blur() method too attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

$(“input”).blur(function(){
$(this).css(“background-color”, “#ffffff”);
});

On()

The on() method attaches one or more event handlers for the selected elements.

Attach a click event to a <p> element:

$(“p”).on(“click”, function(){
$(this).hide();
});

Attach multiple event handlers to a <p> element:

$(“p”).on(
{ mouseenter: function(){
$(this).css(“background-color”, “lightgray”);
},
mouseleave: function(){
$(this).css(“background-color”, “lightblue”);
},
click: function(){
$(this).css(“background-color”, “yellow”);
}
});

 

 

 

 

Posted in Agile, CSS, HTML/CSS, Java Script, UI. Tagged with , , , , .

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *