this
- If you want to refer to the element getting the interaction, you don't have to duplicate the classname.
- Use
thisinstead.
this boilerplate
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function() {
$('.picture').click(function() {
$(this).addClass('active');
});
});
</script>
Tree traversal
- jQuery makes it easy to start at one element and go up or down the DOM tree to find any element or elements you want.
- The full list of available options are up at http://api.jquery.com/category/traversing/tree-traversal/
Useful traversal options
.closest()or.closest('.foo')lets you select the closest ancestor that matches the selector you pass..find()or.find('.foo')does the opposite: selects the closest descendent that matches the selector you pass..siblings()or.siblings('.foo')does what it sounds like: selects all the sibilings that match the selector you pass.
Chaining
- You can chain jQuery commands together to do multiple things at once.
- This will apply a class of
activeto alllielements that contain animgelement:
$('img').closest('li').addClass('active');
jQuery UI
- A library of UI interactions
- Well-documenated at http://api.jqueryui.com
- Accordion example at http://jsbin.com/ufaXEkaF/3/edit
jQuery plugins
- There are tons of easy-to-use, plug-and-play jQuery plugins
- Most have really simple instructions that take just seconds to implement
Some popular, easy plugins
Photo portfolio
Design and code a photography showcase website.
Requirements
- Use one jQuery plugin (from above, or elsewhere)
- Use some jQuery of your own devising
- One page or multiple pages, your choice
- Captions are required
- Mobile first
- Wireframe site first. For interactions, describe what will happen and show both states
- Use Prepros + Sass. Use scaffold.
- THINK SIMPLE