JQuery Notes

I am using CSS Tricks to learn JQuery. This can be found here – CSS Tricks – Learn JQuery (Free – create an account to support CSS Tricks but not necessary)

Chris Coyier uses Chome Dev Tools to run through this series.  More on the Chrome Dev Tools can be found here – Discover Devtools (Free – requires CodeSchool account)

Codepen is also used to do live examples of JQuery – Codepen – New Pen

$ = JQuery

$ is used to initiate JQuery.  To add JQuery to a page you can add the script or cdn in script tags:

<script src="js/jquerylatest.js"></script>

A quick example of JQuery can be seen below:

$("h1").css("color", "red");

The example above changed h1’s color to red.

The JQuery API documentation will be used extensively.

JQuery can be thought of using Select and Do.  Select something and do something.  So for example you can select an element on the page and then alter that element with JQuery.

<h1>
 <span>Select</span>
 and
 <span>Do!</span>
</h1>
<div>I'm some text in a div!</div>
//Select!
$("h1 span")
//Do!
.css("color", "red");
//Select!
$("div")
//Do!
.addClass("callout");

In the above example, we are selecting the h1 span and applying the color red to it.  We are also adding a class of “callout” to the div.

The JQuery anatomy goes like this:

Selector – Method – Parameters

$("select element").method("parameter1", "parameter2");

If you omit the semicolon you can chain methods together

$("select element").method("parameter1", "parameter2") // first method
.method() //second method
.method() // third method until semicolon
.method(); // fourth and last method

Multiple css properties can be changed in an object, an object is represented by curly braces {}. You need to use a semicolon between each property and value and separate each declaration by a comma.

$("select element").css({
"property": "value",
"property": "value"
});