What is this thing? Why is it useful? How do you put it into action? Put together a short demo (less than 3 minutes). How can it affect your development process? Are there any downsides to using it? Where can a person go to learn more about it? Any resources seem better than others? https://api.jquery.com/category/traversing/
- One of the most important aspects of JavaScript and thereby jQuery, is manipulation of the DOM. DOM stands for Document Object Model and is a mechanism for representing and interacting with your HTML, XHTML or XML documents. DOM navigation and manipulation using standard JavaScript can be pretty cumbersome, but fortunately for us, jQuery comes with a bunch of DOM related methods, making it all much easier.
- jQuery lets us "traverse" — or move through — the HTML elements that make up our page. First, we make an initial selection, and then move through the DOM relative to that selection. As we move through the DOM, we're altering our original selection; in some cases, we're replacing the original selection with the new selection, while in other cases, we're adding to or subtracting from the original selection.
-
Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts.
-
.parent() finds the parent element or elements ( .parents() )of a selection -parents jQuery
-
.siblings() finds the siblings elements of a selection. There is no singular .sibling() method -siblings jQuery
-
.children() find the child elements from a selection -children jQuery
-
The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).
-
[append jQuery] (https://api.jquery.com/append/#append-content-content)
- The parent() is an inbuilt method in jQuery which is used to find the parent element related to the selected element. This parent() method in jQuery traverse a single level up the selected element and return that element
- The parents() is an inbuilt method in jQuery which is used to find all the parent elements related to the selected element. This parents() method in jQuery traverse all the levels up the selected element and return that all elements. -[more parent vs parents methods] (https://www.geeksforgeeks.org/jquery-parent-parents-with-examples/)
- closest(): Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. https://api.jquery.com/closest/#closest-selector -find(): Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. https://api.jquery.com/find/#find-selector
Create a couple demos (in CodePen) using DOM traversal methods.
Where do you go to find the official jQuery docs? On the parents() method doc page it says the return value is a jQuery object (Returns: jQuery near the top right of the page). On the text() method doc page, what is the return value, and why is this important? On the text() doc page it says "The result of the .text() method is a string containing the combined text of all matched elements. As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes." This is important because "The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method"