Jquery- One slide completing all JQuery

Nikhil Kumar
Software Consultant
Knoldus Software LLP
Nikhil Kumar
Software 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 featurerich
JavaScript library.
●
It makes things like HTML document traversal
and manipulation, event handling, animation,
and Ajax much simpler.

Adding jQuery to a page
<script src="../dist/jquery-2.1.4.min.js"></script>
<script type="text/javascript”>
$(document).ready(function() {
Your code here…
});
</script>

Adding jQuery to a page
You might have noticed that all jQuery methods in our examples, are
inside a document ready event:
$(document).ready(function(){
   // jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is
finished loading (is ready).
    Trying to hide an element that is not created yet
    Trying to get the size of an image that is not loaded yet
$(function(){
   // jQuery methods go here...
});

Using Selector with jQuery
●
In order to start manipulating an HTML page
dynamically you first need to locate the desired
items.
●
Id and Class
$('h1') //selects all h1 elements
$('.class-name') //selects all elements
with class of class-name
$('#id') //selects element with an id of ID

Attribute based selector
● To find elements in which an attribute is set to a
specific value, you use the equality syntax.
● Note that the value you wish to compare must be in
quotes.
// selects **all** elements that contains this attribute
$('[“href"]')
// selects all **h1** elements with an attribute matching the
specified value
$('h1[demo-attribute="demo-value"]')
More selectors

Attribute based selector cont...
● jQuery allows you to select items by searching inside of
attribute values for desired sub-strings.
● If you wish to find all elements where the value starts with a
string, use the ^= operator.
● If you wish to find all elements where the value contains a
string, use the *= operator.
$('[class^=”col”]') //selects all elements start with 'col'
$('[class*=”md”]') //selects all elements contain 'md'

Positional Selectors
●
Oftentimes you need to located elements based on where they are on the
page, or in relation to other elements in the DOM.
●
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.
● The > between selectors indicates the parent/child relationship.
$('nav > a') //Selects all <a> elements that are direct
//descendants nav element
$('nav a') //Selects all <a> elements that are
//descendants nav element The elements can
//appear anywhere inside of the element
//listed first

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!!');

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

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!!');
});

Some useful events
●
We have some useful events
– Click
– Double Click
– Blur
– Change
– Focus
– Mouse Enter and Mouse Leave
– Hover

Event Example
$("p").on({
    mouseenter: function(){
        $(this).css("backgroundcolor", "lightgray");
    },
    mouseleave: function(){
        $(this).css("backgroundcolor", "lightblue");
    },
    click: function(){
        $(this).css("backgroundcolor", "yellow");
    }
});

Jquery Effects
   Hide, Show, Toggle, Slide, Fade, and Animate. WOW!
Toggle
         $("button").click(function(){
             $("p").toggle();
         });
Animate
             $("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
           $("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
alert($("#id").attr("href"));
});

Dom Manipulation
● Set Content:
$(document).ready(function(){
        $("#test1").text("Hello world!");
    });
        $("#test2").html("<b>Hello world!</b>");
    });
        $("#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 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").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 <img>
}

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
alert("Background= " + $("p").css("background-color"));
});

Jquery Traversing
● The <div> element is the parent of <ul>, and an ancestor of everything inside of it
● The <ul> element is the parent of both <li> elements, and a child of <div>
● The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
● The <span> element is a child of the left <li> and a descendant of <ul> and <div>
● The two <li> elements are siblings (they share the same parent)
● The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
● The <b> element is a child of the right <li> and a descendant of <ul> and <div>

Thank You !!Thank You !!
References:
1- jquery official documentation
2- Jquery communities
3- w3schools

Jquery- One slide completing all JQuery

More Related Content

What's hot (20)

Similar to Jquery- One slide completing all JQuery (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Jquery- One slide completing all JQuery

Editor's Notes