• Skip to primary navigation
  • Skip to main content
  • Skip to footer

She's Gotta Develop It.com

Notes on web development and programming

  • About
  • Blog
  • Projects
  • code snippets

Code Reviews | Tuesday // April 19, 2016

FreeCodeCamp: jQuery – Review

FreeCodeCamp jQuery

0

Just wanted to record everything I learned, although I took physical notes (ha! yes in the digital age, there are people still handwriting notes).

The jQuery portion was a very high-level overview introducing functions and how they can be used to modify HTML/CSS and enhance the page.

jQuery notes:

All jQuery functions begin with $.

You can select certain elements with a “selector” and then use that selector to modify the element, for example:

$("button").addClass("btn");

This function would select the button element and add the class “btn” to every button element in the document.

You can also target preexisting CSS classes and IDs in jQuery using the same syntax: $(".classname") or $("#IDname")

You can select/access the parent of an element using .parent() and you can do the same for the child of an element using .children(). In HTML, there is a hierarchy in the document structure, which allows for children elements to inherit the properties of the parent element, unless declared otherwise via CSS.

For example, in the code below, the body element is the parent and everything contained within it is a child element, therefore it would inherit all the CSS properties, in this case, just the gray background-color. The only thing that wouldn’t inherit that background color is the div with the background color of green – that will override the inheritance.  In the second div element, we see there is a span element nested inside. That span element’s parent is the div. Span is the child of that div. Hope that wasn’t too confusing!!

<body class="background-color:gray">
<h1> Hello there! </h1>
<span> Welcome to my fake ass page </span>
<div class="background-color: green">
<p>This is a paragraph nested in a div </p>

<div>
<span>This is a child of the containing "div"</span>

<p>This is paragraph nested in a div</p>

</div>
</div>
<div> This is another div </div>
</body>

You can also select specific elements based on numbering. For example, you can select the nth class element using:

$(".classname:nth-child(3)").addClass("class");

This would select the 3rd element with that class name, not the 1st, 2nd, 4th, 5th, etc.

You can also select odd/even numbered elements using a similar format:

$(".classname:even").addClass("class");

Numbers in jQuery, as in many programming languages, are zero-indexed based. This just means that instead of starting your count at one, you start at zero.

Below is a list of the jQuery functions covered in the course:

  • .addClass(); enables you to add a class to an element
  • .removeClass(); enables you to remove a class from an element
  • .html(); allows you to replace content in an element, as well as HTML tags
  • .text(); allows you to replace text content in an element but not HTML tags
  • .remove(); allows you to remove an element
  • .appendTo(); allows you to select an HTML element and append it to another element
  • .clone(); allows you to clone an element

The concept of “function chaining” was explained which allows you to combine two or more jQuery functions together. For example:

$("button").clone().appendTo("div");

I’m not sure when we’ll revisit jQuery and how I’ll be able to implement it moving forward, likely through one of the more advance coding challenges.

Post navigation

Previous:
This Week in Coding: #002
Next:
FreeCodeCamp: Basic Front End Development Projects – Review – Part 1

Reader Interactions

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Archives

  • April 2019
  • March 2019
  • January 2019
  • December 2018
  • November 2018
  • June 2017
  • May 2017
  • December 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016

Categories

  • @snippets
  • ~/notes
  • Code Reviews
  • Meetups & Events
  • Starter Packs
  • Weekly Updates
  • What I Learned Series

Github

shesgottadevelopit (shesgottadevelopit)

shesgottadevelopit

shesgottadevelopit
washington, dc via chicago
https://shesgottadevelopit.com
Joined on Feb 06, 2016
16 Public Repositories
dev-log
fit-connect-app
global-content-blocks
iheartcode
JS-DC-Lab-01
JS-DC-Lab-02
lemonade-wp
npm-link-dev
nunjucks-starter
pixartJSdeploy
practicalJS-TodoList
sans-static
virtualhost
W3C_HTML5.1x
wamp-vhost
_s
3 Public Gists
Copyright 2021 ❤ She's Gotta Develop It.com