You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 lines
2.6 KiB
20 lines
2.6 KiB
3 months ago
|
import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
|
||
|
|
import { local_menu } from '/scripts/webdev.js';
|
||
|
|
|
||
|
|
const heading = document.querySelector(".heading");
|
||
|
|
const global = document.querySelector(".global_menu");
|
||
|
|
const local = document.querySelector(".local_menu");
|
||
|
|
const sidebar = document.querySelector(".sidebar");
|
||
|
|
const main = document.querySelector(".main_content");
|
||
|
|
|
||
|
|
heading.append(addTitle("jQuery Essential Training"));
|
||
|
|
heading.append(addParagraph("Joe Marini - LinkedIn Learning - September 2016"));
|
||
|
|
heading.append(addParagraph("Chapter 2 - Working with Page Content"));
|
||
|
|
|
||
|
|
main.append(addHeader("Overview of Selectors and Filters"));
|
||
|
|
main.append(addParagraph("One of the strengths of jQuery is that it makes it easier to accomplish some of the more common tasks for a web developer and one of those is accessing an element from a page. The key to doing that successfully is to correctly identify that element and we will do that using selectors and filters. You might think of this as a way of interacting with the DOM which it kind of is, but that is accurate."));
|
||
|
|
main.append(addParagraph("The whole point is that you can use a selector to et a DOM element but what you are actually getting is an array of jQuery objects. Each of these jQuery objects is wrapped around a DOM elemrnt and provides a kind of interface with that element in that you can operate on that element using some functions and properties that are provided with a jQuery object. It is possible to bypass that and just grab a DOM element but that really defeats the purpose which is to make it as easy as possible to work with these elements without having to work directly with the DOM."));
|
||
|
|
main.append(addParagraph("To make this clearer, consider an example where we have a collection of photos and we want to perform some processing on them. If we briefly take a step back and consider how this works with CSS. We might use img as our selector and this does in gact return an array of DOM elements and we can use this to set a variety of CSS properties such as height, width, border and so on."));
|
||
|
|
main.append(addParagraph("With jQuery, we can use the selector to return the same array of DOM elements where each is wrapped in a jQuery object and this is what allows us to manipulate these elements more easily. Hopefully, this will be much clear if we see some examples of exactly how it works."));
|
||
|
|
|
||
|
|
addSidebar("webdev");
|