Dmitri Gaskin on jQuery (2008)

TL;DR: 12-year-old Drupal core developer Dmitri Gaskin demonstrated the basics of jQuery at a 2008 TechTalk, including selectors, traversal, DOM manipulation, and CSS manipulation, emphasizing "write less, do more." ## Introduction Hawthorne introduces the young speaker Dmitri Gaskin, a 12-year-old Drupal core developer. Gaskin briefly introduces himself and then dives straight into the jQuery topic. He asks the audience how many can write JavaScript, confirms most can, then skips the basics and goes into jQuery. ## jQuery Basics and the $ Function The core of jQuery is the dollar sign function `$()`. It has three common uses: - **Pass a CSS selector**: e.g., `$('table')` returns table elements. - **Pass an HTML string**: Creates DOM elements (not demonstrated due to time constraints). - **Pass a DOM element**: Directly wraps an existing DOM node. Basic usage demonstration: Gaskin opens a table containing a list of open source projects, types `$('table')` in the console, which returns the table, and hovering highlights it. `$('tr')` returns all table rows. `$('.project')`, `$('.project-name')`, `$('.project-ideas')` select by class. Selecting by ID: `$('#asf')` selects the Apache Software Foundation row. ## Traversal Traversal methods navigate the DOM and return new jQuery objects. - **`.children([expr])`**: Gets all child elements, optionally filtered by an expression. - **`.parent([expr])`**: Gets the direct parent element. - **`.parents([expr])`**: Gets all ancestors that match the expression. - **`.find(expr)`**: Finds descendants matching the expression, similar to `.children(expr)` but deeper scope. - **`.filter(expr)`**: Filters the current selection to elements matching the expression. Can also take a function where `this` refers to the current element, and returning `true` keeps it. - **`.eq(index)`**: Gets the element at the given index (0-based). - **`.not(expr)`**: Excludes elements matching the expression. - **`.add(expr)`**: Adds elements matching the expression to the current selection. - **`.next()`**: Gets the next sibling element. - **`.nextAll()`**: Gets all following siblings. - **`.prev()`**: Gets the previous sibling element. - **`.prevAll()`**: Gets all preceding siblings. - **`.slice(start, end)`**: Similar to array slicing. - **`.siblings()`**: Gets all siblings. - **`.end()`**: Reverts to the previous selection (before a destructive operation like `.filter`). - **`.addBack()`**: Merges the current selection with the previous one. Demo: `$('#adium').next()` gets the next row; `$('#adium').children()` gets its two cells; `$('#adium').prevAll()` gets all previous rows. ## DOM Manipulation - **`.html(val)`**: Sets the innerHTML of an element (unescaped). Without arguments, returns the current HTML. - **`.text(val)`**: Sets the text content (automatically escapes HTML). Without arguments, returns the plain text. - **`.append(content)`**: Appends content to the end. - **`.appendTo(target)`**: Appends the current element to the end of the target. - **`.prepend(content)`**: Inserts content at the beginning. - **`.after(content)`**: Inserts content after the element (as a sibling). - **`.before(content)`**: Inserts content before the element. - **`.wrap(html)`**: Wraps the element with HTML, automatically finding the innermost part. - **`.empty()`**: Empties the element's content (including child nodes and text). - **`.remove([expr])`**: Removes elements from the DOM, optionally filtered by an expression (though using `.filter` first is recommended). Demo: `$('#drupal').html('Drupal')` sets HTML; `.text()` escapes it; `$('#adium').remove()` deletes that row; `$('#wesnoth').empty()` clears content but keeps the element. ## Selectors jQuery supports CSS3 selectors, including: - Basic: `#id`, `.class`, `element`. - Pseudo-classes: `:first`, `:last`, `:even`, `:odd`, `:contains(text)`, `:empty`, `:hidden`, `:visible`. - Relationships: `parent > child` (direct child). - Negation: `:not(expr)` (can be nested). - Attribute selectors: `[attribute]`, `[attribute=value]`, `[attribute!=value]`. Demo: `$('tr:first')` selects the first row; `$('tbody > tr:first')` selects the first row under `tbody`; etc. ## CSS and Style Manipulation - **`.attr(name)`**: Gets an attribute value. To set: `.attr(name, value)` or `.attr(map)` (multiple attributes). - **`.removeAttr(name)`**: Removes an attribute. - **`.val()`**: For form elements, gets or sets the value. - **`.css(name, value)`**: Sets a CSS style. Can also use an object, with camelCase property names (e.g., `backgroundColor`) or quoted hyphenated forms. - **`.addClass(class)`**, **`.removeClass(class)`**, **`.toggleClass(class)`**: Class operations. Demo: `$('#asf').css({backgroundColor: 'green', color: 'orange'})` sets background and text color (text may not work due to `a` element). `$('#asf').height()` returns the height, etc. ## Other Useful Methods - **`.html()`** (without arguments returns the innerHTML) - **`.text()`** (returns plain text) - **`.val()`** (returns the input value) - **`.height()`** (returns the height) These methods return native values, not jQuery objects. The talk briefly mentions plugins and advanced jQuery, but due to time constraints, Gaskin quickly wraps up. The entire presentation demonstrates how jQuery makes JavaScript development more efficient. --- Source: YouTube video (https://www.youtube.com/watch?v=8mwKq7_JlS8)