Dmitri Gaskin on jQuery (2008)

TL;DR: 12岁的Drupal核心开发者Dmitri Gaskin在2008年的TechTalk上演示了jQuery的基础用法，包括选择器、遍历、DOM操作和CSS操作，强调“写更少的代码，做更多的事”。 ## 引言 霍桑介绍这位年轻的演讲者Dmitri Gaskin，他是一名12岁的Drupal核心开发者。Gaskin先简单自我介绍，随后直接进入jQuery主题。他询问听众中多少人会写JavaScript，确认大部分都会后，跳过基础直接进入jQuery。 ## jQuery基础与$函数 jQuery的核心是美元符号函数`$()`。它有三种常见用法： - **传入CSS选择器**：如`$('table')`返回表格元素。 - **传入HTML字符串**：创建DOM元素（因时间有限未详细演示）。 - **传入DOM元素**：直接包装现有DOM节点。 基本用法演示：Gaskin打开一个包含开源项目列表的表格，在控制台输入`$('table')`返回表格，鼠标悬停会高亮。`$('tr')`返回所有表格行。`$('.project')`、`$('.project-name')`、`$('.project-ideas')`分别通过类名选取。通过ID选取：`$('#asf')`选中Apache Software Foundation行。 ## 遍历（Traversal） 遍历方法用于在DOM中导航，返回新的jQuery对象。 - **`.children([expr])`**：获取所有子元素，可用表达式过滤。 - **`.parent([expr])`**：获取直接父元素。 - **`.parents([expr])`**：获取所有祖先元素中匹配表达式的。 - **`.find(expr)`**：查找后代中匹配表达式的元素，等同于`.children(expr)`（但作用域更深）。 - **`.filter(expr)`**：从当前选择中过滤出匹配表达式的元素。也可传入函数，`this`指向当前元素，返回`true`保留。 - **`.eq(index)`**：获取第index个元素（从0开始）。 - **`.not(expr)`**：排除匹配表达式的元素。 - **`.add(expr)`**：将额外匹配表达式的元素加入当前选择。 - **`.next()`**：获取下一个兄弟元素。 - **`.nextAll()`**：获取之后所有兄弟元素。 - **`.prev()`**：获取前一个兄弟元素。 - **`.prevAll()`**：获取之前所有兄弟元素。 - **`.slice(start, end)`**：类似数组切片。 - **`.siblings()`**：获取所有兄弟元素。 - **`.end()`**：回退到前一个选择（.filter等破坏性操作前）。 - **`.addBack()`**：合并当前选择和上一个选择。 演示：`$('#adium').next()`得到下一行；`$('#adium').children()`得到两个单元格；`$('#adium').prevAll()`得到之前所有行。 ## DOM操作（Manipulation） - **`.html(val)`**：设置元素的innerHTML（不转义）。无参数时返回当前HTML。 - **`.text(val)`**：设置文本内容（自动转义HTML）。无参数时返回纯文本。 - **`.append(content)`**：在末尾追加内容。 - **`.appendTo(target)`**：将当前元素追加到目标元素末尾。 - **`.prepend(content)`**：在开头插入内容。 - **`.after(content)`**：在元素后面插入（兄弟级别）。 - **`.before(content)`**：在元素前面插入。 - **`.wrap(html)`**：用HTML包裹元素，自动找到最内层。 - **`.empty()`**：清空元素内容（包括子节点和文本）。 - **`.remove([expr])`**：从DOM中移除元素，可带表达式过滤（不过推荐先用.filter）。 演示：`$('#drupal').html('<b>Drupal</b>')`设置HTML；`.text()`会转义；`$('#adium').remove()`删除该行；`$('#wesnoth').empty()`清空内容但保留元素。 ## 选择器（Selectors） jQuery支持CSS3选择器，包括： - 基础：`#id`、`.class`、`元素名`。 - 伪类：`:first`、`:last`、`:even`、`:odd`、`:contains(text)`、`:empty`、`:hidden`、`:visible`。 - 关系：`parent > child`（直接子元素）。 - 否定：`:not(expr)`（可嵌套）。 - 属性选择器：`[attribute]`、`[attribute=value]`、`[attribute!=value]`。 演示：`$('tr:first')`取第一行；`$('tbody > tr:first')`取tbody下第一行；等等。 ## CSS属性与样式操作 - **`.attr(name)`**：获取属性值。设置时：`.attr(name, value)` 或 `.attr(map)`（多个属性）。 - **`.removeAttr(name)`**：移除属性。 - **`.val()`**：用于表单元素，获取或设置value。 - **`.css(name, value)`**：设置CSS样式。也可用对象，属性名用驼峰式（如`backgroundColor`）或带引号的连字符形式。 - **`.addClass(class)`**、**`.removeClass(class)`**、**`.toggleClass(class)`**：class操作。 演示：`$('#asf').css({backgroundColor: 'green', color: 'orange'})`设置背景和文字颜色（文字因a元素可能不生效）。`$('#asf').height()`返回高度等。 ## 其他有用方法 - **`.html()`**（无参数返回HTML内容） - **`.text()`**（返回纯文本） - **`.val()`**（返回输入值） - **`.height()`**（返回高度） 这些方法返回非jQuery对象的原生值。 演讲最后提到插件和高级jQuery，但因为时间有限未深入，Gaskin快速结束演示。整场演讲展示了jQuery如何让JavaScript开发更高效。 --- Source: [YouTube视频](https://www.youtube.com/watch?v=8mwKq7_JlS8)