jQuery DOM 操作 - 1
jQuery DOM 操作
jQuery DOM 操作 - 1 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
方法简介
您好，
到目前为止，我们已经了解了 jQuery 的用途以及选择器的使用方法。
现在，让我们看看可以操作 DOM 的方法。
text 方法
text() 方法
我们使用 text() 方法访问 HTML 元素的内容。
使用 $ (selector).text() 读取元素的内容。
此外，text 方法还可以用于更新元素的内容。只需将新内容作为参数传递给 text 方法即可。
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
问题
html 方法
html() 方法
接下来要学习的方法是 html()。
顾名思义，它返回整个元素，而不只是我们所选元素的内容。
让我们在下面定义一个示例 HTML 元素。
我们定义了两个 HTML 元素，分别具有 base 和 target id。然后，在 DOM 加载完成后，
base 元素的全部 HTML 内容都会被复制，并添加到具有 target id 的元素中
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>属性选择器
attr() 方法
我们使用属性为 HTML 元素定义额外的行为。
编写 JavaScript 代码时，我们经常需要访问这些属性的值。
在这些情况下，可以使用 attr 方法。
让我们通过下面的示例学习这个方法。
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>属性
设置新属性的过程与我们之前学习的 text() 和 html() 方法类似。
通过向读取属性时使用的 attr() 方法传递参数，我们可以为目标元素定义新属性。
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
我们已经学习了如何添加属性；
现在，让我们看看如何删除已有属性。
为此，我们将使用 removeAttr() 方法。
让我们看看示例。
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));val 方法
val() 方法
表单是现代 Web 应用不可或缺的一部分。我们将使用 val() 方法读取用户在表单元素中输入的数据。
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>警告
在事件管理课程中，我们将学习如何监听每次输入的数据，并将其反映到 span 元素中。
额外信息
要更新 input 的值，正如您可能猜到的那样，我们将参数传递给 val 方法。
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')恭喜
恭喜您 🎉
我们已经开始学习 DOM 操作
在下一部分中，我们将继续学习 jQuery 中的 DOM 操作。
常见问题解答
「jQuery DOM 操作 - 1」课时是免费的吗？
是的 — 「jQuery DOM 操作 - 1」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「jQuery DOM 操作 - 1」这节课中我会学到什么？
jQuery DOM 操作 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「jQuery DOM 操作 - 1」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。