1. CS5220 Advanced Topics in Web Programming More jQuery
Chengyu Sun
California State University, Los Angeles

2. Attribute Selectors Exists Value match Value not match Prefix match
$(“[name]”)
Value match
$(“[name=‘a’]”)
Value not match
$(“[name!=‘a’]”)
Prefix match
$(“[name|=‘a’]”)
Contains word ~=
Contains substring *=
Starts with ^=
Ends with $=
All comparisons are case-sensitive.

3. Form Selectors
:input – all input, textarea, select and button elements
:button, :checkbox, :file, :image, :password, :radio, :reset, :submit, :text
:checked for checkboxes and radio buttons
:selected for <option>
:enabled
:disabled
:focused

4. Hierarchical Selectors
Children
$(“parent > children”)
Descendants
$(“ancestor descendants”)
Next sibling
$(“prev + next”)
Next siblings
$(“prev ~ siblings”)
There is no parent or ancestor selector.

5. Filters Applied to selectors to further refine the selection Examples:
$(“table:last”)
$(“p:contains(‘hello’)”)
$(“*:hidden”)
$(“:hidden”)

6. Index-Based Filters :first, :last, :even, :odd :eq(n) – nth elements
:gt(n) – all elements after the nth element
:lt(n) – all elements before the nth elements
Index starts from 0.

7. Child Filters
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><th>a</th><td>b</td><td>c</td></tr>
</table>
$(“td:first”)
$(“td:eq(1)”)
$(“td:first-child”)
$(“td:first-of-type”)
$(“td:nth-child(1)”)
$(“td:nth-of-type(1)”)

8. Other Filters Contains text Contains element Has child Has no child
:has(selector)
Has child
:parent
Has no child
:empty
No matching
:not(selector)
State-based filters
:focused
:animated
:hidden
:visible

9. Access Selected Elements
.each(function) iterate through the selected elements
function(index, element)
index: the index of the current element
element: current element
this: current element
The difference between element, this, and $(this)??
.get(index) and .get() retrieve one or all of the selected elements (as an array)

10. Traversing From selected elements to more (or less) elements Examples:
$(“#cell”).closest(“tr”)
$(“#row”).find(“td[name=‘foo’]”)
$(“div”).filter(“.foo”)

11. Tree Traversal Find one or more siblings Find children Find parent
Find descendants
.find()
Find Ancestors
.parents()
Find closet ancestor
.closest()
Find one or more siblings
.prev()
.prevAll()
.next()
.nextAll()
.siblings()
All methods take an optional selector argument.

12. Filtering
“Filter” is part of selector; “filtering” applies to the selected elements
.first(), .last()
.eq(), .slice()
.has(), not()
.filter() – filter by selector, function, or elements

13. Effects .hide(), .show(), .toggle() Sliding effects Fading effects
Custom effects

14. Example: Taking Attendance
j4.html
Absence
Week 1
Week 2
Week 3
John 1
Jane 2
Tom

15. jQuery UI http://jqueryui.com/ Widgets Effects Interactions Utilities
Themes

16. jQuery UI on CDN https://code.jquery.com/
Need the JavaScript code and one of the themes

17. Draggable http://api.jqueryui.com/draggable/ .draggable({ options })
revert: false (default), true, invalid (not dropped on a droppable), valid
helper: original (default), clone
disabled: false (default), true

18. Droppable http://api.jqueryui.com/droppable/ .droppable({ options })
accept: selector
classes: { “ui-droppable-hover” : CSS class }
disabled: false (default), true
drop: function(event, ui)
ui.draggable represents the draggable element
ui.helper represents the helper object

19. Sortable Reorder elements with drag&drop .sortable({ options })
update: function(event, ui)
ui.item represents the moved element
ui.helper represents the helper object
Use ui.item.index() to get the new position of the item

20. Example: Drag & Drop
j5.html - match programming languages with web frameworks
Web Framework
Programming Language
Spring
ASP.NET
Django
Zend
Express
Rails C#
Ruby
Python
PHP
JavaScript
Java