jQuery Introduction

The essence of jQuery($)

jQuery is a Javascript Library, it is in essence a Javascript object or a function. The commonly seen $(dollar sign) is equivalent to the keyword jQuery, as depicted below. You can try it out in your browser console.

< jQuery
> function(e, t) {return new x.fn.init(e, t, r)}
< $
> function(e, t) {return new x.fn.init(e, t, r)}

jQuery($) returns a jQuery collection(an object like an array but with additional methods), you can also find these attributes in a browser console.

  • $(string)
  • $(function)
  • $(DOM Element)
  • $.ajax()

How to include jQuery

<!-- local file-->
<script src="js/jquery.min.js"></script>

<!-- jQuery official -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- Content Delivery Network (like google) -->
<script src='ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

JQuery Selectors

  • (selector).action()
    • $: define/access JQuery
    • (selector): to query and find HTML elements
    • action(): action to be performed on the elements
    • e.g., $("p").hide(), $("#mycarousel").carousel(‘pause’)

JQuery Selectors

Following are some examples,

  • $(‘tag’)
  • $(‘.class’)
  • $(‘#id’)

or more generally,

  • Any HTML element like "p", "button"
  • #id
  • class, ".btn", ".btn.btn-default"
  • Attribute, "[href]", ["data-toggle=’tooltip’]"
  • Current element: $(this)

JQuery DOM Filter

  • .parent(): one level up
  • .parents(): all the ancestors
  • .children(): 1 level
  • .find(): many levels
  • .siblings()

find all the children


toggle a class toggleClass changes the attribute to the opposite state, just like a switch


jQuery Events

User’s interactions on a web page causing DOM events:

  • Mouse: click, dblclick, mouseenter, mouseleave
  • Keyboard: keypress, keydown, keyup
  • Form: submit, change, focus, blur
  • Document, Window: load, resize, scroll, unload

Event Methods

  • ready()
  • click()
  • dblclick()
  • mousedown()
  • on()