[Cheat Sheet] All you need to know about jQuery

[Cheat Sheet] All you need to know about jQuery

Note: This is part of Javascript learning roadmap.

jQuery is by far to most popular Javascript library and for good reasons. It’s reliable, feature-rich and easy to use. I compiled a list with the most important features of it. You can keep it handy for later use.


Usage

  • a single js file which will be referenced in html app

Screen Shot 2017-09-12 at 8.58.24 PM

  • syntax: $(selector).action()
  • all jQuery methods are inside a document ready event – this makes sure that all the elements on the DOM are loaded
    $(document).ready(function(){
       // jQuery methods go here...
    });

or a shorter version

$(function(){
   // jQuery methods go here...
});

Traversing

  • means “move through” – used to find/select DOM elements based on their relation to the specified element
  • starts with one selection and moves to other elements until the desired element is reached
  • move up (ancestors) – ancestor is a parent, grandparent, great-grandparend and so on
  • move down (descendants) – descendant is a child, grandchild, great-grandchild and so on
  • move  sideways (siblings) – siblings share the same parent

74FD5A5C-6320-4214-830C-365D487684BF

llustration explained:
    • The < div> element is the parent of < ul>, and an ancestor of everything inside of it
    • The < ul> element is the parent of both < li> elements, and a child of
    • The left < li> element is the parent of < span>, child of < ul> and a descendant of < div>
    • The < span> element is a child of the left < li> and a descendant of < ul> and < div>
    • The two < li> elements are siblings (they share the same parent)
    • The right < li> element is the parent of < b>, child of < ul> and a descendant of < div>
    • The < b> element is a child of the right < li> and a descendant of < ul> and < div>

Ancestors

Three useful jQuery methods for traversing up the DOM tree are:
      • parent()
        • returns the direct parent
        • traverse a single level up the DOM tree
      • parents() – returns all ancestors, all the way up to the document’s root
      • parentsUntil([selector]) – returns all ancestors of the current set the matched elements, up to but not including the element matched by [selector]

Descendants

Two useful jQuery methods for traversing down the DOM tree are:
      • children()
        • returns all direct children of the selected element
        • traverse a single level down the DOM tree
        • optional parameter – selector that filters the search
      • find() – returns all descendants elements of the selected element, all the way down to the last descendant

Siblings

 There are many useful jQuery methods for traversing sideways in the DOM tree:
      • siblings() – returns all siblings elements of the selected element
      • next() – returns the next sibling of the selected element
      • nextAll() – returns all the next siblings elements of the selected element
      • nextUntil([selector]) – returns all next sibling elements until an element that matches the selector is find
      • prev() 
      • prevAll()
      • prevUntil()

Filtering

      •  selects an element or a subset of elements
      • first(), last(), eq(index) – allows the selection of a specific element based on its position in a group of elements
      • filter(‘selector’) – returns subset of elements that matches the criteria
      • not(‘selector’) – returns subset of elements that didn’t match the criteria

Add/Remove elements in DOM

      • append() – Inserts content at the end of the selected elements
      • prepend() – Inserts content at the beginning of the selected elements
      • after() – Inserts content after the selected elements
      • before() – Inserts content before the selected elements
      • remove() – Removes the selected element (and its child elements)
      • empty() – Removes the child elements from the selected element

Try them here.

 


Alter HTML

      • text() – Sets or returns the text content of selected elements
      • html() – Sets or returns the content of selected elements (including HTML markup)
      • val() – Sets or returns the value of form fields

Try them here.

      • all functions above html() val() text() – have callbacks where you return the desired value and have access to the old value and the index of the current element (from the params) – try it here
      • attr(“name”)
        • gets the specific attribute
        • can have a callback where you return the new value and have access to the old value and the index of the element
        • example here

 


Manipulate CSS Classes

      • addClass() – Adds one or more classes to the selected elements
      • removeClass() – Removes one or more classes from the selected elements
      • toggleClass() – Toggles between adding/removing classes from the selected elements
      • css() – Sets or returns the style attribute

 


Dimensions

jQuery has several important methods for working with dimensions:
      • width()
      • height()
      • innerWidth()
      • innerHeight()
      • outerWidth()
      • outerHeight()

62B5318D-372C-424B-B2C6-32908B5ACC9F

$(“#div1”).css(“height”)   = outerHeight() if box-sizing: border-box
                                             = height() – default
height()
      • will always return the content height, regardless of the value of the CSS box-sizing property
      • if box-sizing: border-box, height() will return the same value, but in these case the css height property will be different (will include padding + border)

 


Selectors and Events

      • we can use any CSS selectors to address elements from the DOM + other custom selectors
      • custom selectors:
        • $(this) – selects the current html document
        • $(class1, class2) – all elements with class1 or class2
        • $(el1, el2, el3) – all elements of type el1, el2 or el3

Events

      • any action of the end user on the page
      • event callback is executed precisely when the respective event occurs
      • common events:

Screen Shot 2017-03-23 at 9.02.56 AM

      • other examples
        • mousedown() – The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element
        • mouseup() – he function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element
        • hover()
          • The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods
          • gets 2 functions as parameters – one executed when entering the element and one when leaving
        • focus() / blur() – when element gets/loses focus
        • on() – attaches one or more event handlers for the selected element
        • hide() / show() / toggle()
          • hides an element (display:none) / show an element (display:initial) / switch between these 2
          • param optional is speed and 2nd a callback for when execution is completed
          • if speed is selected: animate decrease height -> display:none (not very aesthetic)
        • fadeIn() / fadeOut() / fadeToggle()
          • same as above but opacity animation -> display:none (instead of decreasing height)
          • more aesthetic than show/hide/toggle

 


Animations

Syntax:

Screen Shot 2017-03-23 at 9.26.50 AM

{params} – {property: “new_value”, property2: “new_value2″, …}

      • all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
      • almost every css property can be animated – except colors which require a plugin
      • default speed is 400ms

Relative values

      • the result value at the end of the animation can be express relative to the initial value (using -= and +=)

Screen Shot 2017-03-23 at 9.31.16 AM.png

Pre-defined values

      •  a property’s animation value can be specify as show, hide, or toggle (ex: height: “toggle” will alternate between decreasing the height to 0 and display:none to increase the height to original value)

Queue functionality

      • is default in jQuery
      • if multiple animate() calls are made, JQuery creates an “internal” queue with the method calls -> the animation run ONE by ONE

Stop Animations

stop() – stop an animation or effect before it is finished

Screen Shot 2017-03-23 at 9.43.47 AM

      • stopAll 
        • optional – specifies whether also the animation queue should be cleared or not
        • default: false – only the current animation is stopped and the other queued animation are allowed to be performed
      • goToEnd
        • optional – specifies whether or not to set the to complete the current animation immediately (set the end values)
        • default: false

 


Chaining

      • actions/methods can be chain together
      • allows running multiple jQuery methods (on the same element) within a single statement
      • this way, browsers do not have to find the same element(s) more than once

An example here.


AJAX

      • Asynchronous Javascript And XML
      • client-side script that communicated to and from a server/database without the need for a postback or a complete page refresh
      • simple definition:  “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.”
      • stands as the core of SPA – Single Page Applications – (used by modern frameworks like Angular or React)

Ajax Call – asynchronous request initiated in the browser

Methods

Load()

      • loads data from a server and puts the returned data into the selected element

Screen Shot 2017-03-23 at 11.20.15 AM

      • URL – required
        • URL you wish to load
        • it is possible to add a jQuery selector to the URL (ex $(“#div1”).load(“demo_test.txt #p1”);) – loads the content of the element with id=“p1”, inside the demo_text.txt, into a specific
          element
      • data – optional
        • specifies a set of querystring key/value pairs to send along with the request
      • callback – optional
        • is the name of a function to be executed after the load() method is completed
        • can have 3 params
          • responseTxt – contains the resulting content if the call succeeds
          • statusTxt – contains the status of the call
          • xhr – contains the XMLHttpRequest object

Get()

      • request data from specified source
      • may return cached data
      • $.get()

Screen Shot 2017-03-23 at 11.27.39 AM

Post()

      •  requests data from the server using a HTTP POST request

Screen Shot 2017-03-23 at 11.27.45 AM

    • 3 params:
      • URL – mandatory
      • data – optional
      • callback – optional

Thank you for your time! Please subscribe for more weekly web wisdom!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s