Summary of CodeSchool’s “Try jQuery”
[JL’s Coding Bootcamp Story] Series
JavaScript “Scope & Closure”
JavaScript “This”
JavaScript “Call, Apply, Bind”
Summary of CodeSchool’s “Try jQuery”(Current)
JavaScript “This” — Advanced
JavaScript “Code Reuse” — Part 1–1: Decorators
JavaScript “Code Reuse” — Part 1–2: Functional Classes
JavaScript “Prototype Chains”
JavaScript “Code Reuse” — Part 2–1: Prototypal Classes
JavaScript “Code Reuse” — Part 2–2: Pseudo-classical ClassesPART 1. Introduction to jQuery
[1–1. What is jQuery?]
In order to use jQuery, you need to know HTML(content), CSS(style), and JavaScript(behavior). jQuery makes the following things easy to do : 1. find elements in an HTML document 2. change HTML content 3. listen to what a user does & react accordingly 4. animate content on the page 5. talk over the network to fetch new content.
How can we search through our HTML document? Our browser organizes the HTML it receives through the Document Object Model (DOM), a tree-like structure created by browsers that helps us to quickly find HTML elements using JavaScript. When we go to a URL, our browser starts receiving HTML from that web page and the browser loads the HTML piece by piece into the DOM. As it receives each element, it starts building nodes inside of our DOM.
JavaScript gives developers a language to interact with the DOM. 1. A web browser requests a web page through a URL to a web server. 2. A web server sends the HTML and other files needed to load that page including JavaScript to the web browser. 3. The web browser is going to load the HTML into the DOM. Once loaded, we can execute the JavaScript sent over to interact with the DOM.
Because each browser has a slightly different DOM interface, we use jQuery to communicate with all modern web browsers.
jQuery(document).ready(function() {
<code>
});This code will only run once the DOM is “ready.”
[1–2. Using jQuery]
PART 2. Traversing the DOM
[2–1. Searching the DOM]
/* Using the descendant selector */
$("#destinations li"); // parent - space - descendant/* Selecting only direct children */
$("#destinations > li"); // parent - the sign matters - child/* Selecting multiple elements */
$(".promo, #france"); // the comma matters
CSS-like pseudo classes are the following:
$(#destinations li:first"); // select the first item in the list
$(#destinations li:last"); // select the last item in the list/* The index starts at 0 */
$(#destinations li:odd"); // select odd items in the list
$(#destinations li:even"); // select even items in the list
[2–2. Traversing the DOM]
/* Walking the DOM */
$("li").first().next().prev();/* Walking up the DOM */
$("#vacations li").last().parent();/* Walking the DOM up & down */
$("#destinations").children("li");
// children(), unlike find(), only selects direct children
PART 3. Working with the DOM
[3–1. Manipulating the DOM]
[3–2. Acting on interaction]
/* Passing in a function */$(document).ready(<even handler function>); // The ready method takes an event handler function as argumentfunction() {
// executing the function runs the code
// between the braces
}$(document).ready(function() {
// this function runs when the DOM is ready
});
[3–3. Refactor Using Traversing]
When clicking “Get Price” button, each button is removed when it should be. However, it’s still adding the price on every list item.
Rather than clicking on the button to show the message, we could allow travelers to click on the entire <li> element.
$(document).ready(function() {
$('.vacation').on('click', function() {
var price = $('<p>From $399.99</p>');
$(this).append(price).find('button').remove();
});
});[3–4. Traversing & Filtering]
So far, all vacations packages have the same price : $399.99. In order to give different prices for each vacation, we can do the following:
If we add different buttons to our web page, this click handler is going to be called for all of them. So, we need to make this more specific by using a CSS selector. This technique is called ‘event delegation.’ We’re targeting buttons only if it’s inside a vacation class.
We’ll write 2 event handlers for our buttons and highlight vacations with these traits.
$('#filters.').on('click', '.onsale-filter', function() {
// 1. find all vacations that are on sale
// 2. add a class to these vacations
}
We clear the highlighted class on click and highlight only the targeted vacations.
PART 4. Listening to DOM Events
[4–1. On DOM Load]
There are 3 jQuery object methods of ‘slide’ : .slideDown(), slideUp(), and slideToggle().
This code doesn’t work. In order to debug the issue, we could query how many nodes are on a page by typing the following:
alert($('button').length); // 0The problem was that we didn’t include $(document).ready().
$(document).ready(function() {
alert($('button').length); // 1
<code> in the image above
});[4–2. Expanding on on()]
We can extract the repeated part out and name our event handler.
[4–3. Keyboard Events]
$(document).ready(function() {
$('.vacation').on('keyup', '.quantity', function() {
// 1. Get the price for this vacation
// 2. Get the quantity entered
// 3. Set the total to price * quantity
});
});
[4–4. Link Layover]
When clicking “show comments,” we want to show comments for that vacation. Specifically, we want them to fade in.
$(this).closest('.vacation').find('.comments')
// find the .comments ul using traversingThere are 3 jQuery object methods of ‘fade’ : .fadeDown(), fadeUp(), and fadeToggle().
$(this).closest('.vacation').find('.comments').fadeToggle();
// fadeIn() .comments on the first click
// fadeOut() .comments on the next clickBy the way, if we click on a link near the bottom of the page, the page jumps back up to the top of the page. To solve the problem, we need to understand what happens when the event occurs inside of the DOM.
When an event occurs, it starts on the link and the click event will “bubble up” to each parent node. Eventually, it’s going to get to the top of ‘index.html’ and run the following code:
<a href="#" class='expand'>Show Comments</a>
// follows the link! (pop it back up to the top of the web page)
PART 5. Styling
[5–1. Taming CSS]
We can make all .vacation elements clickable to allow people to click on the <li> element for changing the style.
To hide the price when we click the <li> element for the 2nd time, we could use “toggleClass” instead of “addClass.”
[5–2. Animation]
Let’s make each of vacations jump up a little bit when we select them.
$(document).ready(function() {
$('#vacations').on('click', '.vacation', function() {
$(this).toggleClass('highlighted');
$(this).animate({'top': '-10px'});
// will adjust a CSS property pixel in order to animate it
});
});
[Note] This is a summary of ‘Try jQuery’
Thanks for reading! 💕 If you like this blog post, please clap👏
