Chapter 7: jQuery

Question 1

What is JQuery?

Answer 1

It’s a javascript file that you include in your web pages. It let’s you find elements using cs style selectors and then do something with the selection using methods.

Question 2

What happens when you make a selection

Answer 2

It’s stored in a jQuery object.

Question 3

How do I make a jQuery seelction

Answer 3

$(‘css-slector’)

e.g. $(‘li.hot’);

Question 4

How do you use a jQuery method

Answer 4

Like an object methods, by do notation

e.g. $(‘li.hot’).addClass(‘complete’);

Question 5

Why use jQuery?

Answer 5

• Simple selectors
• common tasks in less code
• cross browser compatibility

Question 6

What are other ways of describing a jQuery object?

Answer 6

matched set

jQuery selection

Question 7

How can you access a specific item in a jQuery selection

Answer 7

Array notation

Question 8

Some jQuery methods get and set element contents. What needs to be kept in mind?

Answer 8

If a jquery object has multiple elements, and we a method, say .html(). only the content from the first element is returned

If we use the html() method to update contents of a jQuery selection it changes all elements in the jQuery selection.

Question 9

What can we do to make variables containing jQuery selections more easily recognised?

Answer 9

giver it a $sign at start of name

Question 10

What is implicit iteration?

Answer 10

jQuery’s ability to automatically update all matching nodes in a jQuery object (No need to loop through the results)

Question 11

What happens if we have an object that has a long list of chained methods and one of those methods is incorrectly spelt?

Answer 11

None will run.

If one does not run, none will.

Question 12

How do we check if DOM is ready to work with?

Answer 12

load event = once DOM and all resources and media loaded
.ready() = as soon as DOM loaded

$( document).ready(function(){
//Your script
});

or the shorthand
$(function(){
//Your script
});

Question 13

What do the .html() and .text() methods do?

Answer 13

Retrieve and update content of elements

Caution with .html() - XSS

.html() - retrieves only the html inside the first match

.text() - retirves text from all matching elements plus their decedents

Question 14

Why do we need to be careful using .replaceWith and .html() methods?

Answer 14

Same risks as innerHTML - XSS

Question 15

What are four methods to update content of a jQuery Object?

Answer 15

.html() - updates all elements html
.text() - updates all element text
.replaceWith() - adds new content and returns replaced content
.remove() - removes the matching elements

Question 16

How would use and amend content in a jQuery selection

Answer 16

Pass a function as a parameter

$(‘li.hot’).html(function(){
return ‘VemV>’ + $(this).text() + ‘V/emV’;
});

This would wrap the text of the selected elements in an em tag

$(this) here refers to the currently selected element

Question 17

What methods control inserting elements

Answer 17

Before() and after() - These will put insertion before/after a tag

prepend() and append() - These put the insertion inside the selected tag

Question 18

How can you add or remove:

an attribute
a class

Answer 18

attr() / removeAttr()

addClass() /removeClass()

Question 19

How do you get and set css properties

Answer 19

.css()

if you want to set multiple properties pass it css rules as a js object literal

$(‘li’).css({
‘background-color’: ‘grey’,
‘font-family’: ‘Georgia’
});

Question 20

What does the each method do?

Answer 20

It allows you to loop through a selection and make changes to it. Things you can’t do through implicit iteration.

This includes getting information from each element in the set
Perform a series of actions on elements

The each() method takes a function sa parameter

Question 21

What’s the difference between this and $(this)?

Answer 21

this - when using an each method, this accesses the current element that’s elected

$(this) - creates a jquaery object with the current selection. This allows you to use jQuery methods on it.

Question 22

When do we use the .on() method?

Answer 22

This is for events

The on method takes two parameters: an event and a function

$(‘li’).on(‘click’, function(){
$(this).addClass(‘complete’);
});

Question 23

What additional parameters can the on() method take

Answer 23

Filter the initial jQuery selection to respond to s upset of elements
Pass extra information into the event handler using object literal notation

the [ ] only indicate the parameter is optional

.on(events [, selector][, data], function(event object));

Question 24

What effects does jQuery provide

Answer 24

show()/hide()/toggle()

fadeIn()/fadeOut()/fadeTo()/fadeToggle()

slideUp()/slideDown()/slideToggle()

delay()/stop()/animate()

Question 25

What does the animate method do

Answer 25

It allows us to animate css property changes

You can animate a propperty whose value is a number

Write them in camecase e.g borderRadius

Properties are specified in object literal notation

Question 26

What are the three optional paramters for the animate method

Answer 26

speed, easing, complete

Question 27

What is a callback function?

Answer 27

a function that runs once a process is complete

Question 28

What do the find() and closest() methods have in common?

Answer 28

They both require a css selector.

find() -finds all elements within current selection that match selector

closest() - nearest ancestor (not just parent) that matches the selector

Question 29

What methods exist for traversing the dom in jQuery?

Answer 29

.parent()
.parents() - All parents of current selection
.children()
.siblings()
.next() - next sibling of current element
.nextAll() - All subsequent siblings of current element
.prev()
.prevAll() - All previous siblings of current element

Question 30

How can we add elements to a selection?

Answer 30

The add() method

Question 31

What methods exist to filter a selection

Answer 31

filter() - filters selection by a seccond selector
find()
.not() / :not()
.has() / :has()
:contains() - selects elements that contain specified text

Question 32

What does the .is() do?

Answer 32

It checks if current selection matches a condition.

It returns a boolean.

Question 33

How can we access items returned ina jQuery object?

Answer 33

Using array syntax

Some useful methods:
.eq() - element that matches the index number
:lt() - elements with an index number less than what’s specified
:gt() - elements with an index number greater than what’s specified