Freecodecamp jQuery Summary - Evanto/qna GitHub Wiki

Target HTML Elements with Selectors

  • To add JS to your HTML, you need a script tag. Your browser will run any JS inside a script element, including jQuery.
  • Code that you put inside the document ready function will run as soon as your browser has loaded your page:
$(document).ready(function() {
    ......
  });
  • Without the document ready function your code may run before your HTML is rendered, which would cause bugs
  • Put your inside the script tags:
<script>
  $(document).ready(function() {
});
</script>

Target HTML Elements by Class

  • .addClass() function adds classes to html elements
  • To make all buttons bounce, select them with $("button") and add give them some CSS classes with .addClass("animated bounce"); (assuming you have <button></button> on your page):
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>
  • Always use . before the class's name, just like with CSS declarations
  • Target your div elements with the class well by using the $(".well") selector. Then use jQuery's .addClass() function to add the classes animated and shake:
$(".well").addClass("animated shake");

Target Elements by ID Using jQuery

  • You can also target elements by their id attributes. Type # before the id's name, just like with CSS declarations
  • target your button element with the id target3 by using the $("#target3") selector. Then use .addClass() function to add the classes animated and fadeOut:
$('#target3').addClass('animated fadeOut');

Target the same element with multiple jQuery Selectors

  • So, 3 ways of targeting elements are:
  • by type: $("button")
  • by class: $(".btn")
  • by id $("#target1")
  • It's possible to add multiple classes in a single .addClass() call, but let's add them to the same element in 3 separate ways:
    $('#target1').addClass('btn-primary');
    $('#target1').addClass('animated');
    $('#target1').addClass('shake');

Remove Classes from an element

  • removeClass() function removes classes. Example:
    $("#target2").removeClass("btn-default");
  • To remove the btn-default class from all of your button elements:
    your button:
    <button class="btn btn-default target" id="target1">#target1</button> remove class:
    $('button').removeClass('btn-default');

Change the CSS of an Element

  • .css() function changes the CSS of an element
  • To change an elements color to blue:
    $("#target1").css("color", "blue");
    Syntax a bit differs from a normal CSS declaration: the CSS property 'color' and its value 'blue' are in separate quotes, separated with a comma instead of a colon.

Disable an Element

  • You can change the non-CSS properties of HTML elements with jQuery (for example, disable buttons). When you disable a button, it becomes grayed-out and can no longer be clicked.
  • .prop() function adjusts the properties of elements. To disable all buttons with .prop():
    $("button").prop("disabled", true);
  • To disable only the target1 button: $("#target1").prop("disabled", "true");

Change Text Inside an Element

  • You can change the text between the start and end tags of an element and even change HTML markup
  • .html() replaces content within an element with the content you provide (HTML tags and text)
  • To rewrite and emphasize the text of a heading:
    $("h3").html("<em>jQuery Playground</em>");
  • .text() only alters text without adding tags. In doesn't evaluate any HTML tags passed to it, but instead treats it as the text you want to replace the existing content with.
  • To replace $('#target4').html('<em>#target4</em>');

Remove an Element

  • .remove() removes an HTML element entirely
  • To remove element target4 from the page:
    $('#target4').remove();

Moving Elements With appendTo

  • You can move elements from one div to another
  • appendTo() selects HTML elements and appends them to another element
  • To move target4 from the right well to the left well: $("#target4").appendTo("#left-well");
  • To move your target2 from left-well to right-well:
    $("#target2").appendTo('#right-well');

Clone an Element

  • You can copy elements from one place to another
  • clone() copies an element. It is used with other function, that tells what to do with the cloned element. This is called function chaining and it's a convenient way to get things done with jQuery.
  • To copy target2 from left-well to right-well:
    $("#target2").clone().appendTo("#right-well");

Target the Parent of an Element

  • Each HTML element has a parent element from which it inherits properties
  • parent() allows to access the parent of the selected element. Use in chain with a function that tells what to do with the parent element.
  • To give the parent element of the left-well element a background color of blue:
    $("#left-well").parent().css("background-color", "blue")
  • To give the parent of the #target1 element a background-color of red:
    $('#target1').parent().css('background-color', 'red');

Target the Children of an Element

  • HTML elements can have children which inherit their properties from their parent HTML elements
  • children() accesses the children of the selected element
  • To give the children of your left-well element the color of blue:
    $("#left-well").children().css("color", "blue")
  • to give all the children of your #right-well element a color of orange:
    $('#right-well').children().css('color', 'orange');

Target a Specific Child of an Element

  • Sometimes you won't have ids to target elements by with jQuery selectors. In these cases, use CSS Selectors to target elements.
  • target:nth-child(n) css selector selects all the nth elements with the target class or element type
  • to give the 3rd element in each well the bounce class:
    $(".target:nth-child(3)").addClass("animated bounce");
  • to make the 2nd child in each of your well elements bounce, targeting children with the target class:
    $(".target:nth-child(2)").addClass("animated bounce");

Target Even Numbered Elements

  • .target:odd targets odd-numbered elements. Use in chain with a function determining what to do with the seleted odd elements.
  • to target all the odd-numbered elements (with class target) and give them classes:
    $(".target:odd").addClass("animated shake");
  • Note: counter-intuitively, :odd selects the 2nd element, 4th, 6th and so on. This is because jQuery is zero-indexed.
  • to select all the even-numbered elements and give them the classes of animated and shake:
    $(".target:even").addClass("animated shake");

Modify the Entire Page

  • jQuery can target the whole body element:
  • to make the entire body fade out:
    $("body").addClass("animated fadeOut");

Other (not from freecodecamp) useful jQuery

  • .data() attaches data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.
⚠️ **GitHub.com Fallback** ⚠️