JQUERY (Part-1)
The jQuery library makes it easy to manipulate a page of HTML after it's displayed by the browser. It also provides tools that help you listen for a user to interact with your page, tools that help you create animations in your page, and tools that let you communicate with a server without reloading the page. We'll get to those in a bit. First, let's look at some jQuery basics, and at how we can use jQuery to perform its core functionality: getting some elements and doing something with them.
$(document).ready()
Before you can safely use jQuery to do anything to your page, you need to ensure that the page is in a state where it's ready to be manipulated. With jQuery, we accomplish this by putting our code in a function, and then passing that function to $(document).ready(). As you can see here, the function we pass can just be an anonymous function.
$( document ).ready(function() {
console.log( 'ready!' );
});
This will run the function that we pass to .ready() once the document is ready. What's going on here? We're using $(document) to create a jQuery object from our page's document, and then calling the .ready() function on that object, passing it the function we want to execute.
Get some elements
The simplest thing we can do with jQuery is get some elements and do something with them. If you understand CSS selectors, getting some elements is very straightforward: you simply pass the appropriate selector to $().
$( '#header' ); // select the element with an ID of 'header'
$( 'li' ); // select all list items on the page
$( 'ul li' ); // select list items that are in unordered lists
$( '.person' ); // select all elements with a class of 'person'
