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.

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);
    });
});

<!-- 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:
```

<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:
```

<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.

Before Start

CONTENTS

Module2 : Managing content, events and effects