jQuery中对节点进行操作的相关介绍

当我们使用 jQuery 处理 DOM 元素时，我们需要知道如何选择元素并对它们应用各种操作。

1. 选择元素

我们可以使用以下方法来选择元素:

• 根据标签名选择元素:

$("tagname")

• 根据class选择元素：

$(".classname")

• 根据id选择元素：

$("#idname")

• 层次选择：

$("elementA elementB") //选择 elementB 元素，只要它是 elementA 元素的后代
$("elementA>elementB") //选择元素B作为元素A的直接子元素

下面是代码示例：

<div id="myDiv">
    <p class="myParagraph">This is a paragraph</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

我们可以使用以下代码选择相应元素

var myDiv = $("#myDiv") //根据id选择div元素
var myParagraphs = $(".myParagraph") //根据class选择p元素
var myUL = $("ul", myDiv) //选择div元素下的ul元素

2. 操作元素

操作 DOM 元素是 jQuery 最常见的用途之一。下面是一些常见的元素操作方法：

• 获取和设置元素内容：

• 获取元素内容：

javascript
var myParagraph = $(".myParagraph");
var text = myParagraph.text(); // 获取元素文本
var html = myParagraph.html(); // 获取元素的 HTML 内容

• 设置元素内容：

javascript
var myParagraph = $(".myParagraph");
myParagraph.text("New text"); // 设置文本
myParagraph.html("<strong>New HTML</strong>"); // 设置 HTML

• 获取和设置元素属性值：

• 获取元素属性值：

javascript
var myLink = $("#myLink");
var href = myLink.attr("href"); // 获取 href 属性值

• 设置元素属性值：

javascript
var myLink = $("#myLink");
myLink.attr("href", "http://www.example.com"); // 设置 href 属性值

下面是代码示例：

<div id="myDiv">
    <p class="myParagraph">This is a paragraph</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <a href="#">Link</a>
</div>

我们可以使用以下代码操作相应元素：

var myParagraph = $(".myParagraph");
// 获取 p 元素文本
var text = myParagraph.text();
console.log(text); // 输出：This is a paragraph

// 设置 p 元素文本
myParagraph.text("New text");

var myLink = $("#myLink");
// 获取链接 href 属性值
var href = myLink.attr("href");
console.log(href); // 输出：#

// 设置链接 href 属性值
myLink.attr("href", "http://www.example.com");