jQuery

Notes Home

jQuery is a JavaScript library that simplifies scripting for HTML pages using DOM element selectors and a set of animations, transitions and other manipulations based on CSS and HTML. jQuery was released in 2006 and has become extremely popular in front end web development. One of the features of jQuery is that it is compatible with all major browsers.

You can download jQuery from their site and attach the file to your HTML pages with a script tag.

Google also hosts versions of jQuery and other libraries that can be added with a script tag found here.

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

For your JavaScript to use the jQuery object, it must come after jQuery is loaded into your document.

jQuery uses a $ to define and access the library. The basic syntax of a jQuery function looks like this: $('selector').action().

Like in CSS, the selector refers to an HTML element. The action refers to the script that will be executed on that element.

See the Pen wKzKxO by Owen Roberts (@owenroberts) on CodePen.

this

This is a special keyword used in JavaScript (as well as other languages) to refer to the current object.

$('#this').on('click', function() {
  console.log(this);
  console.log(this.innerHTML);
});

See the Pen ojzbvd by Owen Roberts (@owenroberts) on CodePen.

See the Pen merezG by Owen Roberts (@owenroberts) on CodePen.

See the Pen NGRxGP by Owen Roberts (@owenroberts) on CodePen.

See the Pen rOMxOm by Owen Roberts (@owenroberts) on CodePen.

See the Pen LpRGpm by Owen Roberts (@owenroberts) on CodePen.

See the Pen KdgVzM by Owen Roberts (@owenroberts) on CodePen.

See the Pen LpRGNr by Owen Roberts (@owenroberts) on CodePen.

See the Pen PPGZGM by Owen Roberts (@owenroberts) on CodePen.

See the Pen bVwEgd by Owen Roberts (@owenroberts) on CodePen.

See the Pen xwEwML by Owen Roberts (@owenroberts) on CodePen.