需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。
2、在index.html中的<script>标签，输入jquery代码：
$('body').append($('div:first').text())
$('body').append($('div:last').text())
3、浏览器运行index.html页面，此时通过jquery获取了第一个div和最后一个div并打印了其内容。
D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3.select 和 d3.selectAll 。
这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 div.item ， #my-chart 或 g:first-child ）。
[//]: .classed 是一个 boolean.
除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text ， .html 您还可以传入一个函数。例如：
该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。
此方法有两个参数：第一个是指定事件类型的字符串第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。
最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：
在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下操作：
[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3.select(this) .
.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。
.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。
.insert 类似于 .append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。
.remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：
大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如：
该 .each 方法允许您为 选择的每个元素 调用一个函数。
回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。
这是一个示例， .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：
该 .call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。
.call 在您想要对选择进行操作的可重用函数时很有用。
例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：
您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。
在此示例中，您过滤偶数元素并将它们着色为橙色：
通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。
