jquery tutorial

the jquery syntax is used for selecting html elements and performing some action on the element(s).

note:- the jquery does't change original html and css files.it makes changes only to the dom representation of the page in browser memory.

basic syntax is :-- $(selector).action()   or    jquery(selector).action()

the dollar sign with the parenthesis is the shorter name of the jquery function.

  • $ sign to define/access jquery
  • a (selector) to hold html dom elements
  • a jquery action() to be performed on the element(s)

examples

  $("p" ).hide()  :- hides the all paragraph elements.

  $("p" ).remove()  :removes the all paragraph elements.

  $(".date" ).hide()  :- hides the all elements with class="date".

  $("#date" ).remove()  :-removes the all elements with id ="date".

  $(this ).hide()  :- hides the current element.


who's using jquery

jquery is a fast, lightweight, and feature-rich javascript library.

many of the biggest companies on the web use jquery --

  • google
  • yahoo
  • wordpress
  • microsoft
  • imgur

What can jquery do

dom traversal and manipulation

get the <button> element with the class 'continue' and change its html to 'next step...'

               $( "button.continue").html( "next step--")

Jquery - event handling

show the #banner element that is hidden with display:none in its css when any button in #button-container is clicked.

   var hiddenbox = $( "#banner" );

          $( "#button-container button" ).on( "click",function( event ) {
          
                        hiddenbox.show();
                        
                          });

Jquery Tutorial - ajax

call a local script on the server /api/get with the query parameter zipcode=901 and replace the element #weather-temp's html with the returned text.

   $.ajax({

                          url: "/api/get",

                                    data: { 

                                      zipcode: 901
 
                                                   },

                         success:  function(data) {

                          
 $( "#weather-temp" ).html( "<strong>"   +  data +   "#</strong> degrees" );

} 

});