Learn jQuery Flashcards
JQUERY SETUP
jQuery Library
We are going to use jQuery to add some interactivity to the MOVE Gear site, an online marketplace for athletic apparel.
To use the jQuery library, index.html must load it with the other dependencies. Take a look at the attached diagram to see where various dependencies load in an HTML document.
The document is loaded from top to bottom. So the style dependencies in the <head> will load first, then the structural elements in the <body> will load next. It has become common practice to link the main JavaScript file at the bottom of the HTML document because a good deal of the content of the script will require that the dependencies, style sheets and elements exist before the browser can run the JavaScript that uses and references those things.
When you add the jQuery library to your project in the next exercise, you will do so on the line before the </body> tag. Because HTML files load from top to bottom, adding the jQuery library at the bottom of your project will ensure that it will not affect the HTML (structure) and CSS (style) load times.
JQUERY SETUP
.ready()
The jQuery library makes it quick and easy to add visual effects and interactivity to your web page. However, a web page must be rendered in a user’s browser before it’s possible to have any dynamic behavior. To solve this problem, we will use our first jQuery method.
The jQuery .ready() method waits until the HTML page’s DOM is ready to manipulate. You should wrap all JavaScript behavior inside of the .ready() method. This will make sure the web page is rendered in the browser before any jQuery code executes.
$(document).ready(() => {
});
JQUERY SETUP
Targeting by Class
$(document).ready(() => {
});
In the example above, document is a special keyword that we use to target the HTML document and create a jQuery object.
We can use the same $() syntax to create jQuery objects for elements on a web page. Typically, we pass a string into $() to target elements by id, class, or tag. Once targeted, we can use . notation to attach a handler method that triggers a callback function.
Let’s consider how we can target elements by class. We can reference elements by class name with the following syntax:
$('.someClass').handlerMethod();
In the example above, every element with a class of ‘someClass’ is targeted. Note, we prepend the class name with a period (.someClass). Then, we call the .handlerMethod() on all of the referenced items.
JQUery setup
class=roduct-photo的element在css里面的dispay=none,如何用JQuery修改让其显示？
$(document).ready(() => {
$('.product-photo').show()；
});JQery Setup
Targeting by id
To select by id, we prepend the element’s id name with the # symbol.
$(document).ready(() => {
$('#nav-dropdown').hide();
});
