Chapter 7: jQuery Flashcards
What is JQuery?
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.
What happens when you make a selection
It’s stored in a jQuery object.
How do I make a jQuery seelction
$(‘css-slector’)
e.g. $(‘li.hot’);
How do you use a jQuery method
Like an object methods, by do notation
e.g. $(‘li.hot’).addClass(‘complete’);
Why use jQuery?
- Simple selectors
- common tasks in less code
- cross browser compatibility
What are other ways of describing a jQuery object?
matched set
jQuery selection
How can you access a specific item in a jQuery selection
Array notation
Some jQuery methods get and set element contents. What needs to be kept in mind?
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.
What can we do to make variables containing jQuery selections more easily recognised?
giver it a $sign at start of name
What is implicit iteration?
jQuery’s ability to automatically update all matching nodes in a jQuery object (No need to loop through the results)
What happens if we have an object that has a long list of chained methods and one of those methods is incorrectly spelt?
None will run.
If one does not run, none will.
How do we check if DOM is ready to work with?
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
});
What do the .html() and .text() methods do?
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
Why do we need to be careful using .replaceWith and .html() methods?
Same risks as innerHTML - XSS
What are four methods to update content of a jQuery Object?
.html() - updates all elements html
.text() - updates all element text
.replaceWith() - adds new content and returns replaced content
.remove() - removes the matching elements
How would use and amend content in a jQuery selection
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
What methods control inserting elements
Before() and after() - These will put insertion before/after a tag
prepend() and append() - These put the insertion inside the selected tag
How can you add or remove:
an attribute
a class
attr() / removeAttr()
addClass() /removeClass()
How do you get and set css properties
.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’
});
What does the each method do?
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
What’s the difference between this and $(this)?
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.
When do we use the .on() method?
This is for events
The on method takes two parameters: an event and a function
$(‘li’).on(‘click’, function(){
$(this).addClass(‘complete’);
});
What additional parameters can the on() method take
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));
What effects does jQuery provide
show()/hide()/toggle()
fadeIn()/fadeOut()/fadeTo()/fadeToggle()
slideUp()/slideDown()/slideToggle()
delay()/stop()/animate()
What does the animate method do
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
What are the three optional paramters for the animate method
speed, easing, complete
What is a callback function?
a function that runs once a process is complete
What do the find() and closest() methods have in common?
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
What methods exist for traversing the dom in jQuery?
.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
How can we add elements to a selection?
The add() method
What methods exist to filter a selection
filter() - filters selection by a seccond selector
find()
.not() / :not()
.has() / :has()
:contains() - selects elements that contain specified text
What does the .is() do?
It checks if current selection matches a condition.
It returns a boolean.
How can we access items returned ina jQuery object?
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
