Reading notes for Code Fellows!
jQuery is a JavaScript file that we include in our web pages that lets us find elements using CSS-style selectors and then do something with those elements using jQuery methods.
A function called jQuery() lets us find elements and creates an object called jQuery to reference those elements. $() is often used as a shorthand for jQuery().
Similarities to DOM
jQuery object in a variable, just as you can with DOM nodes.The jQuery object has many methods that we can use to work with the elements we select and represent tasks that we commonly need to perform.
A jQuery object is created by the jQuery() function. The object and the elements it contains is referred to as a matched set or a jQuery selection. Methods of the jQuery object to update the elements that it contains.
$('li .hot').addClass('complete');
Everything jQuery does can be accomplished with standard JavaScript. It is mostly used because it makes coding simpler. “Write less, do more”
When we select one or more elements, a jQuery object is returned, known as a matched set or jquery selection.
Multiple Elements
Some jQuery methods both retrieve information from, and update the contents of elements.
When we create a selection with jQuery, it stores a reference to the corresponding nodes in the DOM tree. It does not copy them.
The jQuery object is an array-like object because it stores a list of the elements in the same order that they appear in the HTML document.
Creating a jQuery object takes time, processing resources, and memory because the interpreter must:
So, if the code needs to use the same selection more than once, it is better to use that same jQuery object again rather than repeating the process above. To do this we store a reference to the jQuery object in a variable. This is known as Caching.
When a variable contains a jQuery object, it is often given a name beginning with the $ symbol (to help differentiate it from other variables).
With jQuery, when a selector returns multiple elements, we can update all of them using one method, without needing a loop. This is known as implicit iteration.
When we want to get information from a series of elements, we can use the .each() method, rather than writing a loop.
The process of placing several methods in the same selector is reffered to as chaining and results in far more compact code:
$('li[id!="one"]').hide().delay(500).fadeIn(1400);
However, to make the code easier to read, we can place each new method on a new line:
$('li[id!="one"]')
.hide()
.delay(500)
.fadeIn(1400);
Chaining works on most methods used to update the jQuery selection. It does not work on methods that retrieve information from the DOM.
jQuery’s .ready() method checks that the page is ready for our code to work with:
$(document).ready(function() {
// Script goes here
});
$(document) creates a jQuery object representing the page.ready() when the page is ready, the function inside the parentheses is runthe more commonly used shorthand for this is:
$(function(){
// Script goes here
});
A positive side-effect of writing jQuery code inside this method is that it creates function-level scope for its variables preventing naming collisions with other scripts that might use the same variable names.
load Event vs. The .ready() Method vs. Placing Scripts Before the Closing </body> TagThe load Event
jQuery’s .load() method has been replaced by the .on() method. It fires after the page and all of its resources have loaded.
We should use this when our script relies on assets to have loaded (i.e. images, etc) to be functional.
The .ready() Method
jQuery’s .ready() method checks if the browser supports the DOMContentLoaded event and, if it does, creates an event listener that responds to that event, firing as soon as the DOM has loaded.
Using this can make our pages appear as if they are loading faster because it does not wait for other assets to finish loading.
Placing Scripts Before the Closing </body> Tag
When we place our script at the end of the page, the HTML will have loaded into the DOM before the script runs.
People still use the .ready() method so that scripts will still work if someone moves the script tag somewhere else in the HTML page.
The .html() and .text() methods both retrieve and update the content of elements.
.html() retrieves only the HTML inside the first element in the matched set, along with any of its descendants.text() returns the content from every element in the jQuery selection, along with the text from any descendantsFour methods that update the content of all elements in a jQuery selection:
.html() This method gives every element in the matched set the same new content. The new content may include HTML.
.text() This method gives every element in the matched set the same new text content. Any markup would be shown as text.
.replaceWith() This method replaces every element in a matched set with new content. It also returns the replaced elements.
remove() This method removes all of the elements in the matched set.
Using a Function to Update Content
The following function takes the text from each selected element and places it inside <em> tags:
$('li.hot').html(function() {
return '<em>' + $(this).text() + '</em>';
});
return indicates that the content should be returned by the function<em> tags are placed around the text content of the list item.this refers to the current list item. $(this) places that element in a new jQuery object so that we can use jQuery methods on it.Inserting elements involves two steps:
Creating New Elements in a jQuery Object
The following statement creates a variable that stores a jQuery object in it:
var $newItem = $('<li class="new">item</li>');
Adding the New Elements to the Page
Once we have a variable containing new content, we can use any of the following methods to add the content to the DOM tree:
.before() inserts the content before the selected element(s).after() inserts the content after the selected element(s).prepend() inserts content inside the selected element(s), after the opening tag.append() inserts content inside the selected element(s), before the closing tag(there are also .prependTo() and .appendTo() methods)
We can create attributes, or access and update their contents, using the following four methods:
.attr() can get or set a specified attribute and its value.removeAttr() removes a specified attribute (and its value).addClass() adds a new value to the existing value of the class attribute without overwriting existing values.removeClass() removes a value from the class attribute, leaving any other class names intact