Nuwana - Software Development

  What is jQuery? JQuery is a fast, small, cross-platform and feature-rich JavaScript library to handle client side development. JQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following features: 1.     HTML/DOM manipulation 2.     CSS manipulation 3.     HTML event methods 4.     Effects and animations 5.     AJAX 6.     Utilities There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) < head > < script  src ="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" >< /script > < /head >

jQuery Syntax 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) Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". Document Ready Event It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.(Trying to hide an element that is not created yet) $(document). ready ( function (){ // jQuery methods go here... }); OR $( function (){   // jQuery methods go here... });

jQuery Selectors < script >   $(document).ready( function (){     $( "button" ).click( function (){       $( "p" ).hide();       $( "#test" ).hide();       $( ".test" ).hide();     });   });        </ script >

jQuery Event Methods < script > //..................................................................... $( "p" ).click( function (){   $( this ).hide(); }); //..................................................................... $( "p" ).dblclick( function (){   $( this ).hide(); }); //..................................................................... $( "#p1" ).mouseenter( function (){   alert( "You entered p1!" ); }); //..................................................................... $( "#p1" ).mouseleave( function (){   alert( "Bye! You now leave p1!" ); }); //..................................................................... $( "#p1" ).mousedown( function (){   alert( "Mouse down over p1!" ); }); //..................................................................... $( "#p1" ).mouseup( function (){   alert( "Mouse up over p1!" ); }); //............

 jQuery Effects hide(), show() Fading Sliding Animation Stop  Callback Chaining 01 .hide(), show() $( "p" ).hide(); $( "p" ).show(); $( "p" ).hide( 1000 ); Shown elements are hidden and hidden elements are shown $( "p" ).toggle();  Example $(document).ready( function (){   $( "button" ).click( function (){     $( "p" ).toggle();   }); });   02 .Fading jQuery has the following fade methods:      1. fadeIn()      2. fadeOut()      3. fadeToggle()      4. fadeTo() $( "button" ).click( function (){   $( "#div1" ).fadeIn();   $( "#div2" ).fadeIn( "slow" );   $( "#div3" ).fadeIn( 3000 ); }); $( "button" ).click( function (){   $( "#div1" ).fadeOut();   $( "#div2" ).fadeOut( "slow" );   $( "#div3" ).fadeOut( 3000 ); }); If the elemen...

  jQuery changing and manipulating HTML elements and attributes   Get Content - text(), html(), and val()  Three simple, but useful, jQuery methods for DOM manipulation are: 1.    text()  - Sets or returns the text content of selected elements - $( "#test" ). text (); 2.   html()  - Sets or returns the content of selected elements (including HTML markup) - $( "#test" ). html (); 3.    val()  - Sets or returns the value of form fields - $( "#test" ). val () Get Attributes $( "#One" ). attr ( "href" ); - <p><a href="https://www.abc.com" id="One">W3Schools.com</a></p> Set Content - text(), html(), and val() $( "#test1" ). text ( "Hello world!" ); $( "#test2" ). html ( "<b>Hello world!</b>" );  $( "#test3" ). val ( "Dolly Duck" ); < html > < head > < script src = "https:...