jQuery学习笔记 操作jQuery对象 文档处理

jQuery学习笔记 操作jQuery对象 文档处理

操作jQuery对象

在 jQuery 中，操作 DOM 对象往往是基于 jQuery 对象的操作，因此熟练掌握如何获取 jQuery 对象以及如何操作 jQuery 对象是非常重要的。获取 jQuery 对象可以使用选择器函数 jQuery() 或 $()，例如：

// 获取 ID 为 test 的元素并将其背景色设置为红色
$('#test').css('background-color', 'red');

上面的代码使用 $() 获取 ID 为 test 的元素，然后对其应用 .css() 方法，将其背景色设置为红色。需要注意的是，.css() 方法是 jQuery 提供的方法，用于操作 CSS 样式。

在操作 jQuery 对象时，我们可以使用链式调用，例如：

// 获取 ID 为 test1 的元素并在其中添加一个 <ul> 元素，然后向其中添加三个带有链接的列表项
$('#test1')
  .append('<ul></ul>')
  .find('ul')
  .append('<li><a href="#">Link 1</a></li>')
  .append('<li><a href="#">Link 2</a></li>')
  .append('<li><a href="#">Link 3</a></li>');

上面的代码使用了 .append() 方法将一个 <ul> 元素添加到 ID 为 test1 的元素内部，然后使用 .find() 方法查找该元素内部的 <ul> 元素，并将三个带有链接的列表项添加进去。需要注意的是，.append() 方法可以接收 HTML 字符串或者 DOM 对象，用于动态创建和添加元素。

文档处理

通过 jQuery，我们可以方便地处理文档中的元素，例如获取元素的属性值、修改 HTML 内容、添加或删除元素等。以下是一些常见的文档处理技巧：

获取元素属性值

使用 jQuery，可以方便地获取元素的属性值，例如：

// 获取 ID 为 test2 的元素的 href 属性值
var href = $('#test2').attr('href');

上面的代码使用 .attr() 方法获取 ID 为 test2 的元素的 href 属性值。需要注意的是，.attr() 方法可以用于获取或设置元素的属性值。

修改 HTML 内容

使用 jQuery，可以方便地修改 HTML 元素的内容，例如：

// 获取 ID 为 test3 的元素并修改其内容为 Hello World
$('#test3').html('Hello World');

上面的代码使用 .html() 方法获取 ID 为 test3 的元素，并将其内部的内容修改为 Hello World。需要注意的是，.html() 方法可以用于获取或设置元素内部的 HTML 内容。

添加或删除元素

使用 jQuery，可以方便地添加或删除元素，例如：

// 获取 ID 为 test4 的元素并在其后插入一个 <div> 元素
$('#test4').after('<div>After Test4</div>');

// 获取 ID 为 test5 的元素并将其删除
$('#test5').remove();

上面的代码使用 .after() 方法在 ID 为 test4 的元素后面插入一个 <div> 元素，使用 .remove() 方法将 ID 为 test5 的元素删除。需要注意的是，.after() 方法可以用于在元素之前或之后插入新元素，.remove() 方法可以用于删除元素及其所有子元素。

示例说明

示例1：使用链式调用创建列表并添加属性

在这个示例中，我们将使用链式调用创建一个新的列表并将其插入到文档中。然后，我们将使用 .attr() 方法向列表中的每个子元素添加属性。

<ul id="myList"></ul>

$('#myList')
  .append('<li>Item 1</li>')
  .append('<li>Item 2</li>')
  .append('<li>Item 3</li>')
  .find('li')
  .attr('title', 'Click me');

以上代码使用了 $('#myList') 获取 ID 为 myList 的元素，并使用 .append() 方法向其中添加三个子元素。然后，使用 .find() 方法在子元素内部查找所有 <li> 元素，并将其 title 属性设置为 "Click me"。

示例2：使用 .each() 方法遍历元素

在这个示例中，我们将使用 .each() 方法遍历所有 ID 前缀为 test- 的元素，并将它们的文本内容改为大写字母。

<div id="test-1">Hello World!</div>
<div id="test-2">Goodbye World!</div>
<div id="other">Other Element</div>

$('[id^=test-]').each(function() {
  $(this).text($(this).text().toUpperCase());
});

以上代码使用了 $('[id^=test-]') 获取所有 ID 前缀为 test- 的元素，并使用 .each() 方法遍历它们。在遍历的过程中，我们使用 $(this) 获取当前元素，并使用 .text() 方法获取和设置元素的文本内容，将其转换为大写字母。