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.