Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 Manip...
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, an...
Adding jQuery to a page
<script src="../dist/jquery-2.1.4.min.js"></script>
<script type="text/javascript”>
$(document).re...
Adding jQuery to a page
You might have noticed that all jQuery methods in our examples, are 
inside a document ready event...
Using Selector with jQuery
●
 In order to start manipulating an HTML page 
dynamically you first need to locate the desire...
Attribute based selector
● To find elements in which an attribute is set to a
specific value, you use the equality syntax....
Attribute based selector cont...
● jQuery allows you to select items by searching inside of
attribute values for desired s...
Positional Selectors
●
Oftentimes you need to located elements based on where they are on the
page, or in relation to othe...
Adding/Removing classes
●
jQuery also makes it very easy to manipulate the classes an element is currently using.
●
In fac...
Working with attributes
● To retrieve an attribute value, simply use the attr method with one parameter, the
name of the a...
Modifying Content
● Beyond just working with classes and attributes,
jQuery allows you to modify the content of an
element...
Event Handlers
●
jQuery provides several ways to register an event handler.
●
The term "fires/fired" is often used with ev...
Basic event handlers
●
To register an event handler, you will call the jQuery 
method that matches the event handler you'r...
Some useful events
●
We have some useful events
– Click
– Double Click
– Blur
– Change
– Focus
– Mouse Enter and Mouse Lea...
 Event Example
$("p").on({
    mouseenter: function(){
        $(this).css("background­color", "lightgray");
    },
    mo...
Jquery Effects
   Hide, Show, Toggle, Slide, Fade, and Animate. WOW!
Toggle
         $("button").click(function(){
       ...
Callback Functions
A callback function ensures you that it will execute  after 
completing the previous action.
●
Syntax
$...
Chaining
●
Chaining allows multiple events, actions etc to run in one 
go.
Example
      
        $("#p1").css("color", "r...
DOM Manipulation
– Get, Set, Add, Remove, Css, dimensions etc
Get Content:
Three methods:
● text() - Sets or returns the t...
Example : attr()
● Complete this example
$("button").click(function(){
alert($("#id").attr("href"));
});
Dom Manipulation
● Set Content:
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("H...
Dom Manipulation
ADD:
Majorly 4 methods:
● append() - Inserts content at the end of the selected elements
● prepend() - In...
● Examples
● $("p").append("Some appended text.");
● $("img").after("Some text after");
function afterText() {
var txt1 = ...
Dom Manipulation
● Remove
● $("div").remove(".test, .demo");
//remove app “div” that contains .test & .demo class
● Empty
...
Dom Manipulation
● addClass() - Adds one or more classes to the selected elements
● removeClass() - Removes one or more cl...
Jquery Traversing
● The <div> element is the parent of <ul>, and an ancestor of everything inside of it
● The <ul> element...
Thank You !!Thank You !!
References:
1- jquery official documentation
2- Jquery communities
3- w3schools
Upcoming SlideShare
Loading in …5
×

Jquery- One slide completing all JQuery

2,701 views

Published on

This presentation contains all the major topics in jquery and enough to get complete information and practicals about jquery

Published in: Design
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ★★★ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Jquery- One slide completing all JQuery

  1. 1. Nikhil Kumar Software Consultant Knoldus Software LLP Nikhil Kumar Software Consultant Knoldus Software LLP
  2. 2. 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
  3. 3. Introduction to jQuery “Jquery is easy & very useful”
  4. 4. 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.
  5. 5. 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>
  6. 6. 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... });
  7. 7. 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
  8. 8. 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
  9. 9. 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'
  10. 10. 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
  11. 11. 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.
  12. 12. 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'
  13. 13. 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!!');
  14. 14. 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
  15. 15. 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!!'); });
  16. 16. Some useful events ● We have some useful events – Click – Double Click – Blur – Change – Focus – Mouse Enter and Mouse Leave – Hover
  17. 17.  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");     } });
  18. 18. Jquery Effects    Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Toggle          $("button").click(function(){              $("p").toggle();          }); Animate                 $("button").click(function(){              $("div").animate({left: '250px'});          });         
  19. 19. 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
  20. 20. Chaining ● Chaining allows multiple events, actions etc to run in one  go. Example                $("#p1").css("color", "red")             .slideUp(2000)             .slideDown(2000);
  21. 21. 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()); });
  22. 22. Example : attr() ● Complete this example $("button").click(function(){ alert($("#id").attr("href")); });
  23. 23. Dom Manipulation ● Set Content: $(document).ready(function(){     $("#btn1").click(function(){         $("#test1").text("Hello world!");     });     $("#btn2").click(function(){         $("#test2").html("<b>Hello world!</b>");     });     $("#btn3").click(function(){         $("#test3").val("Dolly Duck");     }); });
  24. 24. 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
  25. 25. ● 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> }
  26. 26. Dom Manipulation ● Remove ● $("div").remove(".test, .demo"); //remove app “div” that contains .test & .demo class ● Empty ● $("#div1").empty();
  27. 27. 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")); });
  28. 28. 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>
  29. 29. Thank You !!Thank You !! References: 1- jquery official documentation 2- Jquery communities 3- w3schools

×