Repetition av JS & jQuery syntax

If-statements

Utgör grunden i nästan all logik i koden.
Boolean operators cheat sheet

if (something || something_else) {
  //do one thing
} else {
  //else do another thing
}

For-loopar

En av de vanligaste sätten att ta sig igenom Arrayer och Objekt.

//regular for loop (for navigating arrays and counting purposes)
for(var i = 0; i < array.length; i++) {
  array[i]
}

//for in loop (for navigating objects)
for(var i in object) {
  object[i]
}

jQuery DOM Ready

Används för att vänta på att DOM laddat färdigt innan vi exekverar funktioner.

//with jQuery '$' alias (often seen in non-production environments)
$(function() {
  //execute functions here
});

//without jQuery '$' alias (often seen in production environments)
jQuery(function() {
  var $ = jQuery;
  //execute functions here
});

Vanliga jQuery funktioner [.append(), .html(), .click(), .each(), .submit()]

Används för att manipulera DOM (lägga till & ta bort DOM element, visa/dölja element, sök efter/hitta element) samt trigga, lyssna och agera på olika events (click och submit).
jQuery API documentation

/**
 * Add html do DOM
 *
 */
//jQuery append (adds new child to end of selected element)
$(".aCSSClass").append("

Some html

"); //jQuery prepend (adds new child to beginning of selected element) $(".aCSSClass").prepend("

Some html

"); //jQuery html (replaces inner HTML of selected element) $(".aCSSClass").html("

Some html

"); /** * Show/hide selected element in DOM * */ //jQuery show (displays selected element) $(".aCSSClass").show(); //can also take a numerical microsecond value to animate show() //jQuery show with 800 microsecond animation (from start to finish) $(".aCSSClass").show(800); //jQuery hide (displays selected element) $(".aCSSClass").hide(); //can also take a numerical microsecond value to animate hide() //jQuery hide with 800 microsecond animation (from start to finish) $(".aCSSClass").hide(800); //jQuery toggle (displays selected element) $(".aCSSClass").toggle(); //can also take a numerical microsecond value to animate toggle() //jQuery toggle with 800 microsecond animation (from start to finish) $(".aCSSClass").toggle(800); /** * Find selected element in DOM * */ //jQuery find (finds child matching criteria inside selected element) $(".aCSSClass").find(".aChildCSSClass"); /** * Remove selected element from DOM * */ //jQuery remove (removes selected element) $(".aCSSClass").remove(); /** * Click selected element in DOM * */ //jQuery click (clicks selected element) $(".aCSSClass").click(); //jQuery click (decides what happens when user clicks selected element) $(".aCSSClass").click(function() { //code here runs only when a user clicks the selected DOM element }); /** * Click selected element in DOM * */ //jQuery submit (submit selected element(
)) $(".aCSSClass").submit(); //jQuery submit (decides what happens when user submits selected element()) $(".aCSSClass").submit(function() { //code here runs only when a user submits the selected DOM element () });
0 votes