jQuery Practical - Fundamental-I

jQuery Practical - Fundamental-I

1. Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red. Go to the editor You can see the output from

   .addBorder {
          border: 2px solid red;
   }
   
   $("#button1").on("click",function() {
       if ($("textarea").hasClass("addBorder")) {
           $("textarea").removeClass("addBorder");
       } else {
           $("textarea").addClass("addBorder");
       } 
   });
   

2. Set the background color red of the following elements using jQuery

   .addBg {
          background: red;
   }
   
   $("#button1").on("click",function() {
       if ($("textarea").hasClass("addBg")) {
           $("textarea").removeClass("addBgr");
       } else {
           $("textarea").addClass("addBg");
       } 
   });
   

3. Using jQuery add the class " w3r_font_color " to the last paragraph element

   $("p:nth-last-child(1)" ).addClass("w3r_background");
   
   $("p").last().addClass("w3r_background");

4. Using jQuery add the class "w3r_font_color" and w3r_background to the last paragraph element

   $("p:nth-last-child(1)").addClass("w3r_background w3r_font_color");

5. Using jQuery add a new class to an element that already has a class

       $("p").addClass("w3r_bg_red");

6. Using jQuery insert some HTML after all paragraphs

   var html = " <p>This is appen to last element</p>" ;
     $("p").append(html);

7. Using jQuery count all elements within a division

       $("#iddiv").children().length
   

8. Using jQuery appends a jQuery object to all paragraphs

   $(document).on("click","#button1", function() {
       var appendContent = $("strong");
       $("p").append(appendContent);
   });
   

9. Using jQuery find all the divisions with a name attribute that contains 'tutorial' and sets the background color yellow.

   $(document).on("click","#button1", function() {
          $("div[name*='tutorial']").addClass("w3r_bg_red");
          #$( "input[value='Red']" ).next().text( " Red " );
     });

10. Using jQuery add a callback or a collection of callbacks to a callback list.

    var f1 = function( value ) {  
      console.log( "f1: " + value );  
    };  
     
    var f2 = function( value ) {  
      console.log( "f2: " + value );  
    };  
      
    var callbacks = $.Callbacks();  
      
    // Add the function "f1" to the list  
    callbacks.add(f1);  
      
    // Fire the above items  
    callbacks.fire( "jQuery" );  
     
      
    // Add the function f2 to the list  
    callbacks.add(f2 );  
      
    // Fire the above items  again  
    callbacks.fire( "Javascript" );