jQuery, Events, and The DOM

Resources:

‘JavaScript and jQuery’ by Jon Duckett
Jquery course by SoloLearn
- https://www.sololearn.com/

jQuery

offers a simple way to achieve a variety of common JavaScript tasks quickly and consistently.

Select Elements
- It is simpler to access elements using jQuery’s CSS-style selectors than it is using DOM queries.
Perform Tasks
- jQuery methods let update the DOM tree, animate elements into and out of view, and loop through a set of elements, all ine one line of code.
Handle Events
- jQuery includes methods that allow to attach event listeners to selected elements without having to write any fallback code to support older browsers.

//JS 

var el = document.getElementById('start')
el.innerHTML = 'GO';

//jQuery 

$('#start').html('GO');

Getting Started

good practice to wait for the HTML document to be fully loaded and ready before working with it.

Link jQuery in HTML file

<head>
  <script src = "https://code.jquery.com...">
  </script>
</head>

Make HTML document to be fully loaded and ready before working with it

$(document).ready(function(){
  // jQuery code goes here
});

//shortcut 
$(function(){
  //jQuery code goes here
})

Basic Syntax
- $("selector").action()`
- $ accesses jQuery.
- (selector) finds HTML elements.
- action() is then performed on the element(s).

Selectors

$("div")  // selects all <div> elements

$("#test") // select the element with the id="test"

$(".menu") //selects all elements with class="menu"

$("div.menu")  // all <div> elements with class="menu"

$("p:first")  // the first <p> element

$("h1, p") // all <h1> and all <p> elements

$("*")  // all elements of the DOM

Get & Set Attribute Values

We can manipulate attributes (href, src, id, class, style) assigned to HTML elements easily through jQuery.

The attr() method is used for getting value of an attribute.

<a href = "www.google.com">
  Click Here
  </a>

$(function(){
  var value = $('a').attr('href');
  alert(value);
});

//alerts "www.google.com"

The attr() method also allows to set a value for an attribute by specifying it as the second parametr.

$(function(){
  $('a').attr('href', 'https://www.amazon.com')
})

removeAttr() method is used for removing any attribute of an element.

$(function(){
  $('table').removeAttr('class');
})

GET / SET Content

html() method is used to get the content of HTML elements, including the HTML markup.

text() method is used to get only text content

The same html() and text() methods can be used to change content of HTML elements.

$(function(){
  $('#test').text('hello!')
})

Adding Content

jQuery has methods that are used to add new content to a selected element without deleting the existing content:

append()
- inserts content at the end of the selected elements.
prepend()
- inserts content at the beginning of the selected elements.
after()
- inserts content after the selected elements.
before()
- inserts content before the selected elements.

The append(), prepend(), before() and after() methods can also be used to add newly created elements.

<p id="demo">Hello</p>

$(function() {
    var txt = $("<p></p>").text("Hi");
    $("#demo").after(txt);
});

//  inserts the newly created <p> element after the #demo paragraph.

Manipulating CSS

jQuery has several methods for CSS manipulation.

addClass()
- adds one or more classes to the selected elements.
removeClass()
- removes one or more class names from the selected elements.
toggleClass()
- toggles between adding/removing classes from the selected elements (if the specified class exists for the element, it is removed, and if it does not exist, it is added).

Manipulating DOM

Method	What It Returns
`parent`	direct parent element of the selected element
`parents()`	all ancestor elemnts of the selected element
`children()`	all direct children of the selected element
`siblings()`	all siblings elements
`next()`/`nextAll()`	next / all next sibling element/s
`prev()`/`prevAll()`	previous/all previous sibling elementof the selected element
`eq()`	element with a specific index number of the selected elements

// The eq() method can be used to select a specific element from multiple selected elements.
// For example, if the page contains multiple div elements and we want to select the third one

$("div").eq(2);

Remove Elements

remove() method

<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>

$(function() {
    $("p").eq(1).remove();
});

// removes Green, the second paragraph element. 

empty()method

used to remove the child elements of the selected element(s).

<div>
   <p style="color:red">Red</p>
   <p style="color:green">Green</p>
   <p style="color:blue">Blue</p>
</div>

$(function() {
    $("div").empty();
});
// removes all the three child elements of the div, leaving it empty.

reading-notes

Reading notes for CodeFellows Coding