jQuery

Question 1

What is jQuery?

Answer 1

The most popular JS library
Takes the traditional DOM manipulation methods, and makes it easier and efficient in fewer lines of code
Example:
Traditional
document.querySelector(“h1”)
JQuery
$(“h1”)

Question 2

How to incorporate jQuery into Websites

Answer 2

Easiest way is to use a CDN method
CDN is basically a network of connected servers. CDN then finds the easiest and fastest method to retrieve files.
Place the jQuery CDN script above the javascript at directly above the ending body tag

Question 3

Selecting Elements with jQuery

Answer 3

jQuery(“ < CSS Selector > ”)
OR
$(“ < CSS Selector > ”)
$() == jQuery()
There is no difference between selecting all elements vs one element

Question 4

Manipulating Styles with…

Answer 4

jQuery

Question 5

To set the style

Answer 5

.css(< Attribute to change>, )
Example
$(“h1”).css(“color”, “red”);

Question 6

To get the style

Answer 6

.css(< Attribute to get >);

Question 7

Separate concerns

Answer 7

jQuery is implemented in the .js file, and we can also use it to style the page
But styling the page in a .js file is bad practice
So the correct thing to do is create a css class inside the styles.css, and use jQuery to set the style to that class in the styles.css via .addClass()

Question 8

Add/Remove class

Answer 8

.addClass(< CSS class to change style to, can be multiple classes which are separated by a single space>);
.removeClass(< CSS class to change style to, can be multiple classes which are separated by a single space >);

Question 9

Check if an element has a class

Answer 9

.hasClass( < class to check if exists > )

Question 10

Manipulating Text with jQuery

Answer 10

2 Methods

1. .text( < New Text> );
2. .html(< New HTML >);

Question 11

Manipulating Attributes with…

Answer 11

jQuery

Question 12

Set Attribute

Answer 12

.attr(< Attribute to change>, < New Attribute Value>)

Question 13

Get Attribute

Answer 13

.attr(< Attribute to check>)

Question 14

Adding Event Listeners with…

Answer 14

…jQuery

Question 15

Click Listener

Answer 15

.click( < Callback function> );

Question 16

Key Press Listener

Answer 16

.keypress( < Callback function> );

Question 17

General/Flexible Method

Answer 17

.on( < Event > ,< Callback function> );

Question 18

Adding and Removing Elements with…

Answer 18

jQuery

Question 19

Adding an Element

Answer 19

Adding a new element before a selected element

.before(< HTML of New Element >);

Question 20

Adding a new element after a selected element

Answer 20

.after(< HTML of New Element >);

Question 21

Prepend a new element inside of a selected element

Answer 21

.prepend(< HTML of New Element >);

Question 22

Append a new element inside of a selected element

Answer 22

.append(< HTML of New Element >);

Question 23

Web Animations with….

Answer 23

jQuery

Question 24

Hiding an element

Answer 24

.hide();

Element gets removed from the flow of the HTML structure of the web page

Question 25

Show an element

Answer 25

.show();

Question 26

Toggle hide and show

Answer 26

.toggle();

Question 27

FadeOut

Answer 27

Hides the element but in a less sudden way

.fadeOut();

Question 28

FadeIn

Answer 28

Shows the element but in a less sudden way

.fadeIn();

Question 29

Toggle fade in and fade out

Answer 29

.fadeToggle();

Question 30

Slide Up

Answer 30

Collapses an element

.slideUp();

Question 31

Slide Down

Answer 31

Uncollapse an element

.slideDown();

Question 32

Toggle Slide In and Slide Out

Answer 32

.slideToggle();

Question 33

Method for more Control Over Animations

Answer 33

.animate( { < New CSS Rule to Animate>});

Can only add CSS rules that have a numeric value

Question 34

Can also chain animation methods back to back

Answer 34

Example:

$(“h1”).slideUp().slideDown().animate({opacity: 0.5});