Jquery 2 - part 1

Jquery makes it easy

1. FIND an HTML element 
2.  CHANGE  HTML content
3. LISTEN  to user & react accordingly
4. ANIMATE cotent on the page
5. TALK over the network to fetch content

Ways

1. FIND an HTML element 
2. '<'li class ='vacation sale' data-price = '399.99' '>'
3.  jquery('li') or $('li')

$( document ).ready(function() {

   $("span").text("$100");

});

Question: Modify all list nodes 

Question: Finding elements by ID or class

Question: Finding elements by ID

Question: Finding elements by ID or class

Question: Finding elements by ID or class

select  by element  :$("ul") 

select  by id  :$("#vacations")

select  by id : $(".america")

Searching the DOM

You can search an element by 

1. Specifying class  followed by element $(tours li)
2. specifying class  '>' element  for finding direct children $(tours '>' li)
3. Multiple elements  ,just comma seperated classes $(".asia",".sale")
4.  selecting odd| even| first : last    $(tours > li :even)

Traversing the DOM

You can search an element by 

1. Specifying class  followed by element $(tours).find('li')
2. specifying class  '>' element  for finding direct children $(tours'>' li)
3. Multiple elements  ,just comma seperated classes $(".asia",".sale")
4.  selecting odd| even| first : last  $(tours).find('li).even()/odd()/first()/last()
5. $(tours).find('li).first().next().prev()
6. $(tours).parent().find('p')
7. $(tours).children()

Acting the DOM

You can search an element by 
----

--

Refactoring the DOM

 Removing the Clicked Button

$(document).ready(function() {

  $('button').on('click', function() {

    var message = $('Call 1-555-jquery-air to book this tour');

    $('.usa').append(message);

    $(this).remove();

  });

});

Relative Traversing I

$(document).ready(function() {

  $('button').on('click', function() {

    var message = $('Call 1-555-jquery-air to book this tour');

    $(this).after(message);

    $(this).remove();

  });

});

1. Relative Traversing II
2. 
   
3. $(document).ready(function() {
     $('button').on('click', function() {
       var message = $('Call 1-555-jquery-air to book this tour');
       $(this).parent().after(message);
       $(this).remove();
     });
   });
4. 
   
5. Relative Traversing III
6.                         

Rather than clicking on the button to show the message, we've decided to allow travelers to click on the entire 

 element. Change the call to on() to target .tour elements instead of button elements. After that change, $(this) will reference the clicked 

. Let's remove the closest() method so that .append(message) still works. Then, use find to locate the button element and remove() it.

--------------------------------------------------------------------

$(document).ready(function() {

  $('button').on('click', function() {

    var message = $('Call 1-555-jquery-air to book this tour');

    $(this).parent().after(message);

    $(this).remove();

  });

});

--------------------------------------------------------------------

$(document).ready(function() {

  $('button').on('click', function() {

    var message = $('Call 1-555-jquery-air to book this tour');

    $(this).closest('.tour').append(message);

    $(this).remove();

  });

});

--------------------------------------------------------------------

$(document).ready(function() {
  $('.tour').on('click', function() {
    var message = $('Call 1-555-jquery-air to book this tour');
    $(this).append(message).find('button').remove();
  });
});

Traversing and Filtering

'<'li class ='vacation sale' data-price = '399.99' '>'

Data price is a special tag that we with HTML 5 we can add to provide additional information 

-

-

3.20 Better On Handlers 

250 PTS

There is a small problem with the way our on() handler is being used. Currently, it is targeting all of the  elements on the screen. Refactor the on() handler to only target  elements within a .tour by using the selector argument of the on() method.

-

-

Using filters  1 

$(document).ready(function() {

  $('#filters').on('click', '.on-sale', function() {

    $('.tour').filter('.on-sale').addClass('highlight');

  });

});

Using filters  2 

$(document).ready(function() {

  $('#filters').on('click', '.on-sale', function() {

    $('.tour').removeClass('highlight');

    $('.tour').filter('.on-sale').addClass('highlight');

  });

  $('#filters').on('click', '.featured', function() {

    $('.tour').removeClass('highlight');

    $('.tour').filter('.featured').addClass('highlight');

  });

});

Using filters  3 

1.  ----------------------------------------------------------------------------------------

On DOM Load

1. 1.  4.2 On DOM Load
   2.  4.3 On Load I
   3.  4.4 On Load II
   4.  4.5 Slide Effect I
   5.  4.6 Slide Effect II

   
   

$(document).ready(function() { 

  $('#tour').on('click', 'button', function() { 

    $('.photos').slideDown();

  });

});

4.12 Keyboard Events

--------------------------------------------------------------------------------------------------------------

$(document).ready(function() {

  

  $('#tour').on('click', 'button', function() {

    $('.photos').slideToggle();

  });

  

  $('.photos').on('mouseenter', 'li', function() {

    $(this).find('span').slideToggle();

  });

  $('.photos').on('mouseleave','li',function(){

     $(this).find('span').hide();

  });

  

  $('.photos').on('mouseleave','li',function(){

     $(this).find('span').slideToggle();

  });

  

});

$(document).ready(function() {

  $('#tour').on('click', 'button', function() {

    $('.photos').slideToggle();

  });

  // create showPhotos() function

  $('.photos').on('mouseenter', 'li', showPhotos);

  $('.photos').on('mouseleave', 'li', showPhotos);

 function showPhotos(){

      $(this).find('span').slideToggle();

  }

});

------------------------------------------------------------------------------------------------------------------------

1. Keyboard Events 
2. 
   

2. 
   
   
3. $(document).ready(function() {
     $('#nights').on('keyup', function() {
       $('#nights-count').text($('#nights').val()); 
     });
   
   });

$(document).ready(function() {

  $('#nights').on('keyup', function() {

    var nights = +$(this).val();

    $('#nights-count').text($(this).val());

    var price = +$(this).closest('.tour').data('daily-price');

    $('#total').text(nights*price);

  });

});

1. 
   
2. -------------------------------------------------------------------------------------------------------------------------
3. -

4. $(document).ready(function() {
     $('#nights').on('keyup', function() {
       var nights = +$(this).val();
       var dailyPrice = +$(this).closest('.tour').data('daily-price');
       $('#total').text(nights * dailyPrice);
       $('#nights-count').text($(this).val());
     });
     $('#nights').on('focus', function() {
       $('#nights').val(7);
     });
   });

5. --------------------------------------------------------------------------------------------------------------------------
6. 
   
7. Link Layover

1. 1.  4.17 Link Layover
   2.  4.18 Link Events I
   3.  4.19 Link Events II
   4.  4.20 Event Parameter I
   5.  4.21 Event Parameter II

$(document).ready(function() {
  $('.see-photos').on('click', function(event) {
    event.stopPropagation();
    event.preventDefault();
    $(this).closest('.tour').find('.photos').slideToggle();
  });
  $('.tour').on('click', function() {
    alert('This event handler should not be called.');
  });

});

Taming CSS

1.  5.2 Taming CSS
2.  5.3 CSS I
3.  5.4 CSS II
4.  5.5 Show Photo
5.  5.6 Refactoring to CSS

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).css({'background-color': '#252b30', 'font-weight': 'bold'});
    $(this).find('.photos').show();
  });
  // add a new event handler
  $('.tour').on('mouseover',function(){
     $(this).addClass('highlight');
  });
  
  $('.tour').on('mouseleave',function(){
     $(this).removeClass('highlight');
  });

});

Animation

1.  5.7 Animation
2.  5.8 Animate I
3.  5.9 Animate II
4.  5.10 Animation Speed
5.  5.11 Animate III

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).addClass('highlight');
    $(this).find('.per-night').animate({'top': '-14px', 'opacity': '1'}, 'fast');
  });
  $('.tour').on('mouseleave', function() {
    $(this).removeClass('highlight');
    $(this).find('.per-night').animate({'top':'0px','opacity':0},'fast');
  });

});

----------------------------------------------------------------------------------------

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

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

This is to prevent execution before document is loaded

-----

$(document).ready(function(){

   // jQuery methods go here...

});

SELECTORS

Tag Name:

It represents a tag name available in the DOM.
For example: $('p') selects all paragraphs'p'in the document.

Tag ID:

It represents a tag available with a specific ID in the DOM.For example: $('#real-id') selects a specific element in the document that has an ID of real-id.

Tag Class:

It represents a tag available with a specific class in the DOM.For example: $('real-class') selects all elements in the document that have a class of real-class.

 $("p").css("background-color", "pink");  

CALLING HTML ELEMENTS ON SELECTORS

1. How will you get contents of an html elements? 

 alert($("p").html());  

2. Getting value of option selected from list

  var singleValues = $( "#single" ).val();    

3. Insert content before selected element

   $("p").before("<p><b>Hello javatpoint.com</b></p>");

4. Insert content after selected element

   $("p").after("<p><b>Hello javatpoint.com</b></p>");  

5. Insert span after selected element

  $("<span><b>Hello javatpoint.com</b></span>").insertAfter("p");  

    $("p").unwrap();  

6. Prepends span after selected element

      

 $("p").prepend("Prepended text. ");  

Prepended text. Prepended text. This is the first paragraph.
Prepended text. Prepended text. This is the second paragraph.

7. Appends after selected element

        $("p").append(" Newly added appended text.");

        $("ol").append()

Newly added appended item

");

8.  Shows position of  selected element

        var x = $("p").position();
        alert("Top position: " + x.top + " Left position: " + x.left);

9.  Appends element to existing  element

       $("Hello javatpoint.com").appendTo("p");

10. To change value of an attribute of an element at runtime 

        $("img").attr("width", "500"); 


11.  Remove element to existing  element

  $( "p" ).remove();  



--------------------------------------------------------------------------------------------------------------------