JQuery

Notes taken from JavaScript and JQuery: The Missing Manual

Create a new HTML5 project called Day17JQuery01.

JQuery

JQuery( is a JavaScript library. It was written to make writing JavaScript easier and faster. Some other jQuery libraries:

  • Yahoo User Interface:
  • Dojo Toolkit:
  • Mootools:
  • Prototype:

Advantages of jQuery:

  • Small file size
  • Friendly to web designers
  • Well-tested
  • Free
  • Large developer community

Using jQuery

Method 1

You can put a link to an external jQuery library in your HTML file.

Example

This links to Microsoft's copy:

<script src="

The "cdn" stands for Content Distribution Network. There are other sites you can link to as well. Search for JavaScript CDN.

Method 2

You can download a copy of jQuery to your web site and link to it. To download:

  1. Go to Note that this file name is case-sensitive (must be on a Linux server).
  2. Right-click on Download the compressed, production jQuery 1.9.1. (Current version as of March, 2013).
  3. Click on Save Link As…
  4. Create a folder named JS in your project and save the file there.
  5. Add the following to the end (after any CSS) of thehead element of your HTML file:

<script src="../js/jquery-1.9.1.min.js"</script>

Using jQuery

Add the following below the existing <script> tag:

<script>

$(document).ready(function()

{

alert("Page loaded!");

});

</script>

The (document).ready() function is a built-in jQuery function that waits until the HTML for the page has been downloaded before it executes.

A lot of JavaScript will be used for adding content to a page on the fly, changing the HTML content of a page, or changing the CSS rules for a page. In general, you will (1) select an HTML element on the page, and then (2) modify the element in some way (change its content, change its style, etc.).

The Document Object Model

The elements of an HTML document are represented as a tree. This tree is the Document Object Model(DOM).

Selectors

JQuery uses selectors, just as CSS does.

Element Selectors

To select every <a> element on a page:

var links = $('a');

To select every <h1> element on a page:

var headings = $('h1');

ID Selectors

ID selectors in jQuery use the same format as CSS selectors. If an HTML element has an ID attribute, it can be selected using the # syntax. If the HTML looks like this:

<p id="stuff">Stuff </p>

You can select this element using jQuery like this:

varmyStuff = $('#stuff');

Class Selectors

If you have HTML elements that have the class attribute, you can select every element in the class. If the HTML looks like this:

a class="button" href="

<a class="button" href="

You can select all elements that belong to the class button like this:

varmyButtons = $('button');

Descendent Selectors: space

This is the same as CSS. Give the top-level selector followed by a space, followed by the lower-level selector. To select all list items in an unordered list:

$('ul li')

Child Selectors: >

This is the same as CSS. Give the top-level selector followed by a greater-than sign (>), followed by the child selector. The difference between a child and a descendent is that a child is on the next lower level in the DOM tree. A descendent is an element that is at a lower level in the DOM tree. To select all <p> tags that are children of the <body> tag:

$('body > p')

Adjacent Sibling Selectors: +

An adjacent sibling is one that immediately follows an element. To create an adjacent selector, put a plus sign between the element and its adjacent sibling. To select the adjacent sibling of a heading (<h1>) that is immediately followed by a paragraph (<p>):

$('h1 + p')

Attribute Selectors: [ ]

An attribute selector is one that selects elements based on whether the element has a particular attribute, or whether it has a particular attribute that has a particular value. To create an attribute selector, give the tag name followed by the attribute name in square brackets. To select all <img> tags that have an alt attribute:

$('img[alt]')

Attribute Selectors with a specific value

To find all text boxes, you would select all <input> tags that have a type attribute whose value is text:

$('input[type="text"]')

Attribute Selectors whose value begins with a specific string: ^=

If you want to find an attribute value that begins with a specific string, use "^=". To find all links that point outside of your site:

$('a[href^="

The ^ indicates that jQuery is to match only those href attributes that begin with "

Attribute Selectors whose value contains a specific string: *=

If you want to find an attribute value that has a specific string anywhere in the value, use "*=". To find all hyperlinks that point to edu sites:

$('a[href*=".edu"]')

jQuery Filters

JQuery also lets you select elements based on certain characteristics (rather than a specific value as above).

:even and :odd

The :even and :odd selectors allow you to select the even-numbered elements or the odd-numbered elements. Remember that all lists are 0-based in JavaScript, so choosing :even will select every other element beginning with the first element (which is element number 0!). And :odd will select every other element beginning with the second element. To select the even numbered rows in every table:

$('tr:even')

:first and :last

The :first and :last selectors allow you to select the first or last element in a group. For example, to select the first paragraph on a page:

$('p:first')

:not

You can also select elements that do not match the selector. For example, to select all anchor elements that are not elements of a class named navList:

$('a:not(.navList)')

:has

The :has selector selects elements that contain another selector. For example, to select all <li> tags that have an <a> element inside of them:

$('li:has(a)')

:contains

The :contains selector selects elements that contain specific text. For example, to select all links that have the text "Click me!":

$('a:contains("Click me!")')

:hidden

The :hidden selector selects elements that are hidden. These include elements whose CSS display property is set to none, elements that have been hidden by jQuery, elements with a width or height of 0, and hidden form fields. To select all paragraphs that are hidden:

$('p:hidden')

:visible

The :visible selector is the opposite of the :hidden selector. It selects all elements that are not hidden. To select all paragraphs that are visible:

$ ('p:visible')

jQuery Automatic Loops and Chained Functions

To make the JavaScript programmer's job easier, jQuery does two things: (1) automatic loops, and (2) chained functions.

Automatic loops

Normally when you select more than one element on a page, JavaScript provides a list of those elements and the programmer is responsible for looping through every element in that list. JQuery performs that looping for you! For example, to hide every image in the class slideshow:

$('.slideshow').hide();

Chained functions

You may want to perform several operations on a selection (list) of elements. JQuery allows you to chain those operations (functions) using the dot notation.For example, if you want to set the width and height of a <div> tag with an ID of stuff:

$('#stuff').width(200).height(200);

This is easier than:

$('#stuff').width(200);

$('#stuff').height(200);

Day17-JQuery01.docx11/26/2019