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

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.

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

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

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

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.

Child Filters http://api.jquery.com/category/selectors/child-filter-selectors/ <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)”)

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

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)

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

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.

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

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

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

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

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

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

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

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

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