jQuery操作元素节点

jQuery操作元素节点攻略

前置知识

在学习jQuery操作元素节点之前，需要具备以下前置知识：

• HTML基础知识
• CSS基础知识
• JavaScript基础知识

同时，需要熟悉jQuery的基本语法和API。

操作元素节点

1.选择器

选择器是jQuery操作元素节点的重要工具，可以通过选择器定位到需要操作的元素节点。jQuery选择器类似于CSS选择器，可以根据元素的标签名、类名、ID等属性来选择元素。

例如，通过标签名选择元素：

$("p") //选择所有<p>元素

通过类名选择元素：

$(".my-class") //选择所有class为my-class的元素

通过ID选择元素：

$("#my-id") //选择ID为my-id的元素

2.获取和设置元素节点的属性

使用.attr()方法可以获取或设置元素节点的属性，其中，第一个参数为需要获取或设置的属性名，第二个参数为属性值。

例如，获取元素的src属性：

$("img").attr("src")

设置元素的src属性：

$("img").attr("src", "new-src.jpg")

3.获取和设置元素节点的内容

使用.text()方法可以获取或设置元素节点的文本内容，使用.html()方法可以获取或设置元素节点的HTML内容。

例如，获取元素的文本内容：

$("p").text()

设置元素的文本内容：

$("p").text("new text")

获取元素的HTML内容：

$("div").html()

设置元素的HTML内容：

$("div").html("<p>new html content</p>")

示例说明

示例一：通过选择器选择元素

HTML代码：

<ul>
  <li>item 1</li>
  <li class="special">item 2</li>
  <li>item 3</li>
</ul>

选择class为special的元素，并改变其文本内容：

$(".special").text("new text")

示例二：获取表单元素的值

HTML代码：

<input type="text" id="my-input" value="original value">

获取输入框的值：

$("#my-input").val()