15. JQuery

Course's Objectives 1. The learners can identify how JQuery is so useful by the easiness it provides for certain tasks. 2. The learners know how to use CSS selectors within the JQuery object in order to select every html element they want. 3. The learners can attach single or multiple events to the specified elements. 4. The learners can change html content dynamically by using the html(), text() and val() functions. 5. The learners can get or set either single or multiple attributes to html elements. 6. The learners make use of existing JQuery effect functions like .fadeIn() and more. 7. The learners are capable of traversing the DOM and navigating relatively from one element to the other, understanding the DOM's hierarchy, children, parent elements etc. 8. The learners learn all the different function that allow them to insert elements on the fly into specific places in DOM. 9. The learners learn more about all the necessary functions that can use in order to fetch data from an external service and perform AJAX requests.  

JQuery Selectors JQuery uses CSS selectors in order to grab DOM elements. So anything from the examples below is a valid JQuery selector. $('nav') => Grabs all nav elements $('nav > li') => Grabs all List items that are direct children of a nav $('nav > li:last-of-type') => The last list item of a nav  etc. Any valid css selector can be used inside the $() as a selector.    Find all possible JQuery selectors here!

JQuery Events Events in Jquery are exactly like vanillaJS, though the syntax is a bit different. There is no addEventListener function. The event is attached to the selected element directly. Inside as always we define the callback function. Find all types of events here!

Working with HTML Exactly like vanillaJS, there are mainly three functions that do the same thing (instead of vanillaJS, who has properties). .text() =>Returns the innerText, or sets it if a string is passed as an argument .html() => Returns the innerHTML, or sets it if a string is passed as  an argument .val() => Returns the value of an input field, or sets it if a string is passed as an argument Find more here! And here!  

Attaching multiple events If you want to attach multiple events into a specific element, you can also do that with the .on function. This function accepts an object, and each property of this object is an event. As shown in the picture the callback function is the value!  

JQ-1 Insert mouseenter and mouseleave Implement double event listeners into a same element of your choice.  Create a button that contains some text.  When the user enters it's mouse, the text of the button changes to 'Welcome! Stay here forever!', in addition when the user leaves changes the text again to 'Dont go please!'. Visit end result here:

JQuery Attributes We can have access to a selector's attribute exactly like in vanillaJS. The only difference is that there is no getAttribute and setAttribute to be attached to the specified HTML element, but only one function named .attr(). If 2 arguments are passed to this function, then JQuery sets a new value (the second argument) to the specific attribute (passed as a string as a first argument) of the selected element.  Example:  $('button').attr('type', 'reset') // This changes the type attribute of all buttons in the page to reset. If only one argument is passed then JQuery returns the value of the attribute that was passed as a string argument.  example: $('button').attr() // Returns 'reset' in this case. We can modify many attributes of a selected element in one place by passing a key-value pair object, with keys as attributes and values as their corresponding values as the image from w3schools above suggests. Learn more about chaning html attributes to elements from JQuery here:

Working with CSS The .css() function allows us either to take the value of a css property or to set it from the beginning. That depends on the number of the arguments that are going to be passed: $(selector).css('property') => Returns the value of this css property. $(selector).css('property', 'value') => Sets the css property of a selector to the specified value. If you want to specify more than one properties and give values to them you can do so by passing an object as a parameter. Inside the Object you can have your key-value pairs as normally. $(selector).css({'firstProp': 'firstValue', 'secondProp': 'secondValue', 'thirdProp':'thirdValue'}); Additonally if we want to work with classes, there 3 possible functions exactly like in vanillaJS: $(selector).addClass('classToAdd'); => Adds a new class to the selector element $(selector).removeClass('classToRemove'); => Removes this class from the selector element $(selector).toggleClass('classToToggle'); => Adds the class if not there, removes it if present.

JQuery effects JQuery comes with some built-in effects like: $(element).show() => Shows the element. $(element).hide() => Hides the element  $(element).toggle() => Hides the element if visible, shows it if hidden. $(element).fadeIn() => Changes the opacity of the element gradually. $(element).fadeOut() => Same as above, other way around $(element).fadeToggle() => Toggles between fadeIn, fadeOut $(element).slideUp() => Changes the height from none, to some $(element).slideDown() => Same as above, the other way $(element).slideToggle() => Toggles between slideUp, slideDown. $(element).animate() => animates css properties. Accepts an object. Check full documentation for effects here

Accessing Parents, children, sibling You can access any time the parent element, the children elements or sibling elements by using these JQuery functions. For example: $(element).parent() => return the parent element of the selected element. $(element).children() => returns all direct children nodes of the element. $(element).siblings() => returns all siblings elements of the element. $(element).find('p') => returns all paragraphs that are descendants of the element. Docs for accessing ancestors Docs for accessing descendants Docs for accessing siblings

JQ-2 Refactor the dropdown nav menu Rewrite the dropdown navigation menu, the JQuery way. Bonus: Make this fully-responsive.  Full result is the same with the DOM-6 exercise. Have a reference there.

Create Content on the fly! If you want to create content on the fly, you will have to use these functions most of the time. $(element).append(anotherElement) => equivalent to appendChild $(element).prepend(anotherElement) => Puts the child at the beginning of the element. $(element).after(anotherElement) => Equivalent to insertAdjacentElement(); $(element).before(anotherElement) => Adds a sibling exactly before the element. Inserting multiple html elements also possible! $(element).append(firstElement, secondElement, thirdElement) => appends firstElement, secondElement, thirdElement);   Bear in mind: Still you have to create somehow the element from the beginning (with the createElement() function probably).

JQ-3 Create a todo App JQuery Rewrite this todo app below, by using JQuery instead of JS whenever possible. You can have access to the original vanillaJS code whenever you want, in order to take a look or to compare. Full result is the same with the DOM-8 exercise. Check it out there.    

Making  JQuery AJAX requests  JQuery also provides some functions that deal with asynchronous operations and make asynchronous requests (exactly like the fetch api does). Some of the most common ways to perform such requests by using JQuery is:  $('selector').load(url) => Gets the data from the specified url and loads the response to selector element. Docs here! $.get(url) => Performs a get request to the server. Requests data from the source. Docs  $.post(url) => Submits data to the specified resource. Find more about $get / $post methods here! $.ajax(url, objectSettings) => Performs any type of request in the specific url. Accepts also an object of parameters as a second argument.  Returns a promise, that can be chained either through the .done() functions (see image above), or as the async /await method. Official $.ajax method documentation here:    

JQ-4 Rewrite the weather app Rewrite the weather application, with promises and async/await the JQuery way.  Use JQuery's Asynchronous operations instead. Additionally make every box fade-in. Find the final result here: