jQuery属性、遍历、HTML操作方法详解

jQuery 是目前最流行的 JavaScript 库之一。它提供了许多方便的方法，使得我们可以更加轻松的操作网页。其中包括了属性、遍历、HTML 操作等方面，下面我们来逐一介绍。

jQuery属性

• attr()：获取或设置元素的属性，例如获取 <img> 元素的 alt 属性：

javascript
var altText = $('img').attr('alt');

或者设置 <img> 元素的 alt 属性：

javascript
$('img').attr('alt', 'This is an image');

• prop()：获取或设置元素的属性，例如获取 <input> 元素的 checked 属性：

javascript
var isChecked = $('input').prop('checked');

或者设置 <input> 元素的 checked 属性：

javascript
$('input').prop('checked', true);

• val()：获取或设置表单元素的值，例如获取 <input> 元素的值：

javascript
var inputValue = $('input').val();

或者设置 <input> 元素的值：

javascript
$('input').val('New value');

jQuery遍历

• each()：遍历元素集合，例如：

javascript
$('li').each(function() {
console.log($(this).text());
});

这个例子遍历了所有的 <li> 元素，并把它们的文本内容打印到了控制台中。

• find()：查找符合选择器条件的子元素，例如：

javascript
$('ul').find('li').addClass('active');

这个例子给 <ul> 元素中所有的 <li> 元素添加了 .active 类。

• eq()：选择元素集合中特定索引的元素，例如：

javascript
$('li').eq(2).addClass('active');

这个例子选择了 <li> 元素集合中索引为 2 的元素，并添加了 .active 类。

jQuery HTML操作

• html()：获取或设置元素的 HTML 内容，例如获取 <div> 元素的 HTML 内容：

javascript
var htmlContent = $('div').html();

或者设置 <div> 元素的 HTML 内容：

javascript
$('div').html('<p>New HTML content</p>');

• text()：获取或设置元素的文本内容，例如获取 <p> 元素的文本内容：

javascript
var textContent = $('p').text();

或者设置 <p> 元素的文本内容：

javascript
$('p').text('New text content');

示例1：当点击按钮时，在页面内增加一段代码。

$(document).ready(function() {
  $('.add-code').click(function() {
    $('body').append('<pre><code>console.log("Hello, World!");</code></pre>');
  });
});

这个例子会添加一个点击事件，当点击具有 .add-code 类的按钮时，在页面底部添加一段代码 <pre><code>console.log("Hello, World!");</code></pre>。

示例2：当点击按钮时，将输入框内的值添加到列表中。

$(document).ready(function() {
  $('.add-item').click(function() {
    var inputValue = $('input').val();
    $('ul').append('<li>' + inputValue + '</li>');
  });
});

这个例子会添加一个点击事件，当点击具有 .add-item 类的按钮时，获取输入框内的值，并添加到 <ul> 元素中作为新的列表项。