Nikhil KumarSoftware Consultant

Knoldus Software LLP

Agenda

Introduction of jQuery

What is jQuery

Getting started with jQuery

Animation, Callback, Chaining

DOM Manipulation, GET, SET, ADD, REMOVE

DOM Traversing

Managing events, contents and effects

Introduction to jQuery

Jquery is easy
&
very useful

Introduction to jQuery

jQuery is a lightweight, "write less, do more", JavaScript library.

Query is a fast, small, and feature-rich JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler.

Adding jQuery to a page

between selectors indicates the parent/child relationship.

$('nav > a') //Selects all elements that are direct //descendants nav element

$('nav a') //Selects all elements that are //descendants nav element The elements can //appear anywhere inside of the element //listed first

For example, an a element inside of a nav section may need to be treated differently than a elements elsewhere on the page. CSS, and in turn jQuery, offer the ability to find items based on their location. $('nav > a')

(First) This will be selected (Second) This will **not** be selected

Adding/Removing classes

jQuery also makes it very easy to manipulate the classes an element is currently using.

In fact, you'll notice most libraries that use jQuery to manipulate the UI will also come with a stylesheet that defines the set of classes their code will use to enable the functionality.

Adding a class to an element is just as easy as calling addClass.

Removing a class from an element is just as easy as calling removeClass.

var currentElement = $('#demo');currentElement.addClass('class-name') //Add class //'class-name' to selected element.

currentElement.removeClass('class-name') //removes class //'class-name' from selected element.

Working with attributes

To retrieve an attribute value, simply use the attr method with one parameter, the name of the attribute you wish to retrieve.

To update an attribute value, use the attr method with two parameters, the first being the name of the attribute and the second the new value you wish to use.

var attribute = $('selector').attr('attribute-name');//gets value of the attribute 'attribute-name' of 'selector'

$('selector').attr('attribute-name','new-value');//changes value of the attribute 'attribute-name' to 'new-value' //of 'selector'

Modifying Content

Beyond just working with classes and attributes, jQuery allows you to modify the content of an element as well.

// update the text$('selector').text('Hello, world!!');

// update the HTML$('selector').html('Hello, world!!');

jQuery offers you the ability to update the text inside of an element by using the text method, and the HTML inside of an element by using the html method. Both methods will replace all of the content of an element.

The main difference between the two methods is html will update (and parse) the HTML that's passed into the method, while text will be text only. If you pass markup into the text method, it will be HTML encoded, meaning all tags will be converted into the appropriate syntax to just display text, rather than markup. In other words, < will become < and just display as < in the browser. By using text when you're only expecting text, you can mitigate cross-site scripting attacks.

Event Handlers

jQuery provides several ways to register an event handler.

The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".

Mouse Events & Form Events etc

Web pages are typically built using an event based architecture. An event is something that occurs where we, as the developer, don't have direct control over its timing. Unlike a classic console application, where you provide a list of options to the user, in a time and order that you choose, a web page presents the user with a set of controls, such as buttons and textboxes, that the user can typically click around on whenever they see fit. As a result, being able to manage what happens when an event occurs is critical.

Fortunately, in case you hadn't already guessed, jQuery provides a robust API for registering and managing event handlers, which is the code that will be executed when an event is raised. Event handlers are, at the end of the day, simply JavaScript functions.

Basic event handlers

To register an event handler, you will call the jQuery method that matches the event handler you're looking for.

// click event// raised when the item is clicked$('selector').click(function() { alert('clicked!!');});// hover event// raised when the user moves their mouse over the item$('selector').hover(function() { alert('hover!!');});

To register an event handler, you will call the jQuery method that matches the event handler you're looking for. For example, if you wanted the click event, you'd use the click method. Methods for wiring up event handlers allow you to pass either an existing function, or create an anonymous method. Most developers prefer to use an anonymous method, as it makes it easier to keep the namespace clean and not have to name another item.

Inside of the event handler code, you can access the object that raised the event by using this. One important note about this is it is not a jQuery object but rather a DOM object; you can convert it by using the jQuery constructor as we've seen before: $(this)

Some useful events

We have some useful eventsClick

Double Click

Blur

Change

Focus

Mouse Enter and Mouse Leave

Hover

Event Example

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

Jquery Effects

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

Toggle $("button").click(function(){ $("p").toggle(); });

Animate $("button").click(function(){ $("div").animate({left: '250px'}); });

Callback Functions

A callback function ensures you that it will execute after completing the previous action.Syntax$(selector).hide(speed,callback);

Example $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); *Write without callback

Chaining

Chaining allows multiple events, actions etc to run in one go.

Example $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);

DOM Manipulation

Get, Set, Add, Remove, Css, dimensions etc

Get Content:Three methods:

text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements (including HTML markup)

val() - Sets or returns the value of form fields &

Attr()Example

$("#btn1").click(function(){ alert("Value: " + $("#test").val()); });

Example : attr()

Complete this example

$("button").click(function(){ alert($("#id").attr("href")); });

Dom Manipulation

Set Content:

$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });});

Dom Manipulation

ADD: Majorly 4 methods:

append() - Inserts content at the end of the selected elements

prepend() - Inserts content at the beginning of the selected elements

after() - Inserts content after the selected elements

before() - Inserts content before the selected elements

Examples

$("p").append("Some appended text.");

$("img").after("Some text after");

function afterText() { var txt1 = "I "; // Create element with HTML var txt2 = $("").text("love "); // Create with jQuery var txt3 = document.createElement("b"); // Create with DOM txt3.innerHTML = "jQuery!"; $("img").after(txt1, txt2, txt3); // Insert new elements after }

Dom Manipulation

Remove

$("div").remove(".test, .demo");//remove app div that contains .test & .demo class

Empty

$("#div1").empty();

Dom Manipulation

addClass() - Adds one or more classes to the selected elements

removeClass() - Removes one or more classes from the selected elements

toggleClass() - Toggles between adding/removing classes from the selected elements

css() - Sets or returns the style attribute

-Make Example for each

$("button").click(function(){ alert("Background= " + $("p").css("background-color")); });

Jquery Traversing

The element is the parent of

, and an ancestor of everything inside of it

The

• element is the parent of both

• elements, and a child of

  The left

• element is the parent of , child of

  • and a descendant of

    The element is a child of the left

  • and a descendant of

    • and

      The two

    • elements are siblings (they share the same parent)

      The right

    • element is the parent of , child of and a descendant of The element is a child of the right

    • and a descendant of and Thank You !!References:1- jquery official documentation 2- Jquery communities3- w3schools