jQuery

Adam

Lesson 2: Selectors

Lesson 2

jQuery Selectors

Target and manipulate HTML elements

The selector is a crucial part of the jQuery statement. Selectors find and manipulate HTML elements. Luckily, these selectors are based off of CSS Selectors. Now that you’ve linked the jQuery library to index.html, you can start choosing some HTML elements to alter. Let’s begin with all of the <p> elements. Select all <p> elements by starting your code with:

$("p")

Great job so far! To recap, a selector is a reference to an HTML element that you put between the quotations. Now that we’ve singled out all paragraph elements, let’s add an action. Finish the statement by adding the .hide() action to the selector. The full phrase should look like this:

$("p").hide()

#id Selectors

Remember using the id tag in index.html? You can also point jQuery to id selectors just as you would in a CSS document.

$("#intro")

.class selectors

In addition to #id, the .class selector finds a specific class element within the HTML document.

$(".mast")

 

Tools

Check out this complete list of selectors by W3.

Back to Lesson 1: Syntax

Forward to Lesson 3

Adam

Lesson 1: Syntax

Lesson 1

jQuery Syntax

jQuery adds exciting events to websites

jQuery syntax selects certain HTML elements and assigns an action to those HTML elements.

$(selector).action()

Start the jQuery phrase with a $ symbol to tell the browser to access the jQuery library. Specify the HTML element in the (selector) portion. Then, choose a jQuery .action() to be associated with the HTML element.

For example, the following code will employ jQuery and hide all H1 elements in your HTML document.

$("h1").hide()

It’s that easy, and fun. There are many other things you can do with the HTML elements other than hiding them. We will explore some practical uses of jQuery events in another lesson.

Before we can move further, let’s get more comfortable with selectors and events.

 

Back to Intro to jQuery

Forward to Lesson 2: Selectors

Intro to jQuery Banner Image
Adam

Learning jQuery: 1.0

Who Should Learn jQuery?

If you already have a basic understanding of CSS and HTML, then it’s time to learn JavaScript. jQuery, in particular, is one of the most popular JavaScript libraries in the world.

You should learn jQuery in order to marry all three primary languages: HTML + CSS + jQuery = great web development.

How to Get Started

  1. Download jQuery and store the .js file in the same folder as index.html (with your website files).
  2. Open up your index.html file in a text editor, such as Sublime Text 2 or Atom, and refer to the jQuery file in your index.html document by adding a link to the .js file:
    1. Open up the index.html document and scroll down to the area just before your closing </body> tag: http://jquery.js
    2. It should look like this
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="jquery.js"></script>
</body>
</html>

Alternatively, if you do not want to download the jQuery library, you can use the following code to reference the library hosted on a CDN by Google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

 

Customize the jQuery code

Underneath the link to your jQuery file, open up another <tag> and a </closing tag> and type your custom jQuery code here. It should look like this:


<!doctype html>
<head>
</head>
<body>

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

/* custom jQuery will go here */

</script>
</body>
</html>

The $ Sign

You use the $ sign to reference jQuery.

Start Your jQuery Code

<!doctype html>

<head>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {

});
</script>
</body>
</html>

Shorthand

You can also use a shorter version:


$(function() {

});

Two Parts to jQuery Actions


$("#button1").hide(300);

The Selector

The selector works just like CSS, it is used to select a certain part of your HTML document. You can use single or double quotes.

The Method

The method comes directly after the selector. jQuery is chainable, meaning you can attach multiple methods to the selector. You might do this if you want an object to have two or more effects.


$("#button1").hide(300).show(1000);

In Practice


$(function() {
$("#button1").hide(300).show(1000);
});