通过 id 获取元素，如 jQuery - TypeScript

在前端开发中，我们常常需要通过页面上的元素来实现各种功能。其中，最基础的一步就是通过元素的 id 获取该元素。这个流程在 jQuery 中非常方便，可以通过 $ 函数直接传入 id 获取元素。在 TypeScript 中，我们也可以用类似的方式完成这个操作。

使用 jQuery 获取元素

jQuery 是一个非常流行的 JavaScript 库，可以极大地简化页面操作的代码。通过 jQuery 获取元素的方式也是前端开发中的常用操作。下面是一个例子：

// 获取 id 为 "example" 的元素
const exampleElement = $('#example');

// 修改元素的文本内容
exampleElement.text('new text');

// 修改元素的背景颜色
exampleElement.css('background-color', 'red');

在这个例子中，我们使用了 $ 函数来获取元素。$ 函数接收一个字符串参数，这个参数是 CSS 选择器，使用类似于 CSS 选择器的语法来定位元素。在这个例子中，我们传入了 #example，代表我们要获取 id 为 example 的元素。

获取到元素后，我们可以使用 jQuery 的内置函数来修改元素的内容和样式。

使用 TypeScript 获取元素

TypeScript 是一个由 Microsoft 推出的 JavaScript 的超集，可以为 JavaScript 提供更好的开发体验。在 TypeScript 中，我们可以通过 DOM 的内置函数来获取元素。下面是一个例子：

// 获取 id 为 "example" 的元素
const exampleElement = document.getElementById('example');

// 修改元素的文本内容
exampleElement.textContent = 'new text';

// 修改元素的背景颜色
exampleElement.style.backgroundColor = 'red';

在这个例子中，我们使用了 document.getElementById 函数来获取元素。这个函数接收一个字符串参数，这个参数是元素的 id。获取到元素后，我们可以直接修改元素的文本内容和样式。

总结

无论是使用 jQuery 还是 TypeScript，通过 id 获取元素都是前端开发中非常基础的操作。熟练掌握这个操作可以大大简化我们的代码，提高开发效率。