Freecodecamp jQuery

Freecodecamp jQuery

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.