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.