Introduction to jQuery_3

Module 2.2.

Before Start

The following contents are the notes I took when learning jQuery on Edx.

Mainly for front-End Web developers, check here to get more details.

CONTENTS

Three parts:

Module2 : Managing content, events and effects

Module2 includes six parts:

  • Event handlers
  • Modifying elements
  • Registering event handlers
  • Adding new elements
  • Animations
  • Removing, replacing and cloning

Let’s get to know something about the last three parts of Module2.

  • Adding new elements

    • Internal DOM manipulation

      append, appendTo, prepend and prependTo.

      Remember that the element you target will become the container for the new element. So using append will add a new element inside the target, not after the element.

      • prepend and prependTo

        Add new content to the begining of the contents of a target.

        Example:

        `Html


        existing content

        //executed either of the lines of JavaScript below
        // prepend is called on the target, and accepts the new content as the parameter
        $(‘#target’).prepend(‘

        New content
        ‘);

        //or you can use prependTo
        // prependTo is called on the new content, and accepts the target as the parameter
        $(‘

        New content
        ‘).prependTo(‘#target’);

  <!-- ending HTML -->
  <div id="target">
      <div>New content</div>
      <div>existing content</div>
  </div>
  ```

- `append` and `appendTo`

  Add new content to the **end** of the contents of a target.

  Example:

  ```Html
  <!-- starting HTML -->
  <div id="target">
      <div>existing content</div>
  </div>

  //executed either of the lines of JavaScript below
  // append is called on the target, and accepts the new content as the parameter
  $('#target').append('<div>New content</div>');

  // appendTo is called on the new content, and accepts the target as the parameter
  $('<div>New content</div>').appendTo('#target');

  <!-- ending HTML -->
  <div id="target">
      <div>existing content</div>
      <div>New content</div>
  </div>
  ```
  • External DOM manipulation

    after, insertAfter, before, and insertBefore

    • after and insertAfter

      Add new content after the target.

      Example:

      <!-- starting HTML -->
      <div id="target">
          <div>existing content</div>
      </div>
      
      //executed either of the lines of JavaScript below
      // after is called on the target, and accepts the new content as a parameter
      $('target').after(' New content');
      
      // insertAfter is called on the new content, and accepts the target as a parameter
      $(' New content').insertAfter('#target');
      
      <!-- ending HTML -->
      <div id="target">
          <div>existing content</div>
      </div>
      <div>New content</div>
      
    • before and insertBefore

      Add new content before the target.

      Example:

      <!-- starting HTML -->
      <div id="target">
          <div>existing content</div>
      </div>
      
      //executed either of the lines of JavaScript below
      // before is called on the target, and accepts the new content as a parameter
      $('target').before('New content');
      
      // insertBefore is called on the new content, and accepts the target as a parameter
      $('New content').insertBefore('#target');
      
      <!-- ending HTML -->
      <div>New content</div>
      <div id="target">
          <div>existing content</div>
      </div>
      
  • Wrapping content

    To manipulate the DOM by surrounding existing content with a new element.

    • wrap

      wraps each item with the element passed into the function.

      Example:

      <!-- starting HTML -->
      <div id="target">
          <div class="demo">Item one</div>
          <div class="demo">Item two</div>
      </div>
      
      //JS
      $('.demo').wrap('<section></section>');
      
      <!-- ending HTML -->
      <div id="target">
          <section>
              <div class="demo">Item one</div>
          </section>
          <section>
              <div class="demo">Item two</div>
          </section>
      </div>
      
    • wrapAll

      returned content with one new element.

      Example:

      <!-- starting HTML -->
      <div id="target">
          <div class="demo">Item one</div>
          <div class="demo">Item two</div>
      </div>
      
      //JS
      $('.demo').wrapAll('<section></section>');
      
      <!-- ending HTML -->
      <div id="target">
          <section>
              <div class="demo">Item one</div>
              <div class="demo">Item two</div>
          </section>
      </div>
      
    • wrapInner

      Operates on the children of the target, rather than on the target itself.

      Example:

      <!-- starting HTML -->
      <div id="target">
          <div class="demo">Item one</div>
          <div class="demo">Item two</div>
      </div>
      
      //JS
      $('#target').wrapInner('<section></section>');
      
      <!-- ending HTML -->
      <div id="target">
          <section>
              <div>Item one</div>
              <div>Item two</div>
          </section>
      </div>
      
  • Animations

    • hide, show, toggle

      hide causes something to disappear from the screen;

      show causes something to appear;

      toggle, on the other hand, determines the current status of the item in question and changes it.

      jQuery controls visibility by using the display property in CSS.

      Example:

      <!-- HTML -->
      <div id="target">Show or hide</div>
      <button type="button" id="btn-toggle">Toggle</button>
      
      //JS
      $(function() {
          $('#btn-toggle').click(function() {
              // animation will take one second
              $('#target').toggle(1000);
          });
      });
      

      More:

      <!-- HTML -->
      <style>
          .hidden { display: none; }
      </style>
      <form>
          <div>
              <label>Name:</label>
              <input type="text" />
          </div>
          <button type="button" id="show-additional-information">
              Show additional information
          </button>
          <div id="additional-information" class="hidden">
              <label>Additional information:</label>
              <input type="text" />
          </div>
      </form>
      
      //JS
      $(function() {
          $('#show-additional-information').click(function() {
              $('#additional-information').show(750);
          });
      });
      
    • fading and sliding

      • fadeIn, fadeOut, fadeToggle

        The fading functions perform their work by both modifying the CSS display property, and animates the item by modifying its opacity.

        fadeIn and fadeOut will display and hide an item respectively.

        fadeToggle will reverse the current state of the item.

      • slideDown, slideUp , slideToggle

        The sliding functions perform their work by both modifying the CSS display property, and animates the item by modifying its position.

  • Removing, replacing and cloning

    • Removing and replacing items

      • remove and empty

        Both completely delete items from the DOM.

        remove deletes the item you target.

        empty deletes the contents of the item you target.

        Example:

        <div id="target">
            <div>Some cool content</div>
            <div>Some more cool content</div>
        </div>
        
        //JS
        //the resulting HTML would be, well, nothing. The entire contents of the sample are removed
        $(function() {
            $('#target').remove();
        }
        
        //deletes the contents of the target, so the resulting HTML would be as <div id="target"></div>
        
        $(function() {
            $('#target').empty();
        }
        
      • replaceAll and replaceWith

        replace existing content with new content.

        Example:

        <!-- starting HTML -->
        <div id="target">
            <div>Some cool content</div>
            <div>Some more cool content</div>
        </div>
        
        //JS. execute either of them
        // replaceWith replaces the content on the left with the new content in the parameter
        $('#target').replaceWith('<div>NEW content</div>');
        
        // replaceAll replaces the target in the parameter with the content on the left
        $('<div>NEW content</div>').replaceAll('#target');
        
        <!-- ending HTML -->
        <div>NEW content</div>
        
    • Cloning

      • clone

      clone allows you to make a copy of jQuery objects.

      Let’s say you were building a page to allow an administrator to create email addresses and passwords. You’d like to ensure the administrator can create as many accounts as they would like on one page, and be able to send up all of the information to the server in one round trip, rather than using Ajax calls or submitting the form for each account.

      code:

      <!-- HTML -->
      <button type="button" id="add-line">Add new line</button>
      <div id="container">
          <div class="user-entry">
              <label>Email:</label>
              <input type="email" />
              <label>Password:</label>
              <input type="password" />
          </div>
      </div>
      
      //JS
       $(function() {
           $userForm = $('.user-entry').clone;
          $('#add-line').click(function() {
              $('#container').append($userForm.clone());
          });
       });
      

      Attention:

      When you’re working with an object, JavaScript passes a reference to the object, not a copy of the object. This would mean that we’ve added in a pointer to the clone we created earlier, not a brand new copy. The end result is that if we did not call clone() a second time, we’d be trying to add the exact same object into the container again, not a brand new copy. By calling clone() again, we pass in a copy of our user form, rather than a pointer to the one we already used.

      • Cloning and animations

        Combinnig cloning and animations.

        Example:

        <!-- HTML -->
        <button type="button" id="add-line">Add new line</button>
        <div id="container">
          <div class="user-entry">
            <label>Email:</label>
            <input type="email" />
            <label>Password:</label>
            <input type="password" />
          </div>
        </div>
        
        //JS
        $(function() {
            $userForm = $('.user-entry').clone();
            $userForm.css('display', 'none');
            $('#add-line').click(function() {
                var newUserForm = $userForm.clone();
                $('#container').append($newUserForm);
                newUserForm.show(1000);
            });
        });
        

        This is Module2 all about. More details.