| Objectives |
|---|
| Students will be able to: |
| Use the Chrome Developer Tools and the Console |
| Describe and visualize the Document Object Model (DOM) of an HTML document |
| Explain the relationship between JavaScript and jQuery and the benefits of using jQuery for DOM manipulation |
| Select elements from the page using CSS Selectors and use jQuery to dynamically change the DOM |
To open the developer tools, press cmd-option-i on a webpage in Chrome.
For more information, look at the Chrome Developer Console, specifically the Elements tab, and the Console tab.
DOM stands for Document Object Model. It's a fancy way of describing what's going on in your browser when you visit a website. You may think that a website is just a chunk of HTML, CSS, and JavaScript. But between the pure data (text), and the rendered page that you can explore, there's an important intermediate step. It turns out that everything you interact with inside of your browser can be represented as a javascript object. For example, this paragraph is an object, and it's full of information about being an HTML p tag.
- HTML = Skeleton
- JavaScript = Muscles, Brain, and Organs
- CSS = Skin and Clothing
The DOM is often visualized as a "tree"
Write out the HTML that the above DOM tree represents.
The DOM tree visualization is a great starting point for understanding the DOM, but it often leaves out a lot of the details of what's going on.
jQuery is just JavaScript! It was invented in 2005 and has made our lives as developers better ever since.
We use jQuery because it's:
- Convenient: solves problems developers commonly face.
- Less Buggy: ensures javascript DOM manipulation works the same, cross-browser.
- Modern: brings javascript DOM manipulation into the 21st century.
- Popular: 15.3% of all sites and 70.4% of the top 100k sites use jQuery! (see Builtwith.com).
Sites like: github.com, css-tricks.com, and jquery.com (!) all include the jQuery library on their page. This means all you have to do is open up your Chrome Developer Console on one of those sites, and you can start playing with jQuery on the page!
You can only use jQuery if it's included in your page.
To do this, we have two options:
The quickest way to include jQuery in your project is to grab the jQuery library using a "CDN" (a blazing fast "content delivery network") and dropping it into a script tag in the head of your html (just google "jQuery cdn" and copy paste!):
Any script tags for your own JavaScript files must come after the script tag for jQuery.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<!-- Nothing here yet! -->
</body>
</html>CDNJS, Google Hosted Libraries, and the jQuery site will all allow you to download a copy of jQuery to include in your projects. This means that the whole source code is in your project. If there are updates on that source code, you will need to make sure to update the version you have downloaded (kind of a pain).
You know you're working with jQuery any time you see a $() in your code. $ is an abbreviation for using the function name jQuery all over your code.
As you're working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. Memorize this pattern:
$("CSS Selector").someJqueryMethodName()- getting a value$("CSS Selector").someJqueryMethodName(setterValue)- setting a value
For example, if you head over to this Reuters article, then you can try the following in your Chrome Developer Console:
$('#articleText').text()-- get the text of the article (it lives inside of a few span tags)$('#articleText').text("Boo!")-- set the text of the article to "Boo!"
Wowza!
Let's try another:
$('img')-- get get an array of all images on the site$('img)[1]-- get the actual article image$('img')[1].src-- get the image url$('img')[1].src= 'http://i.giphy.com/fylZTgiKh6clq.gif' -- set the image to one of our own! mwahahahahha!
Check out the .text() and .css() methods in the jQuery API Documentation: text, css.
- Pay close attention in the documentation: there's one section that talks about how to "get" text, and there's another section that talks about how to "set" text.
.text()and.css()are not native javascript methods! They only work on jQuery-wrapped DOM Elements (that's what that$is doing).
For more cool DOM manipulation tricks, you'll need to hit the docs:
The more you struggle with this kind of documentation, the stronger your coding-chops will become!
Everything you do in jQuery can be done in pure/vanilla javascript.
Take a look at the raw jquery library (it's just a bunch of javascript!).
jQuery often saves you a bunch of time. Because it's just JavaScript under the hood, some argue you might not need jQuery. It's always less efficient for the computer to execute jQuery (this often doesn't matter though) and it sometimes can be overkill, depending on what you're doing.
Take a look at this Comparison of jQuery and Vanilla JS . Here are some of the basic differences:
Selecting Elements
Note: the jQuery variables below are named with $ at the beginning in order to indicate that they're jQuery created objects. This is a convention, not required syntax.
// jquery
var $divs = $('div');
// vanilla js
var divs = document.querySelectorAll('div');Selecting Elements by Class
// jquery
var $content = $('.content');
// vanilla js
var content = document.getElementsByClassName('content');Selecting Elements by Id
// jquery
var $about = $('#about');
// vanilla js
var about = document.getElementById('about');Creating Elements
// jquery
var $newDiv = $('<div></div>');
$('body').append($newDiv);
// vanilla js
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
