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

.find(*)

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

$('.featured').toggleClass('featured');

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()