jQuery学习3：操作元素属性和特性

《jQuery学习3：操作元素属性和特性》是一篇介绍如何使用jQuery操作HTML元素的属性和特性的教程。该教程的学习内容主要分为以下几个方面：

获取/设置属性和特性

当我们需要获取或设置一个元素的属性或特性时，可以通过jQuery中的attr方法实现。attr方法的用法如下：

// 获取一个元素的属性或特性
var value = $('selector').attr('attribute');
// 设置一个元素的属性或特性
$('selector').attr('attribute', value);

其中selector指选择器，可以是任何CSS选择器；attribute指要获取或设置的属性或特性名称；value指要设置的属性或特性值。

示例1：获取图片元素的src属性并在控制台输出

var src = $('img').attr('src');
console.log('图片地址是：' + src);

示例2：将所有checkbox元素的checked属性设置为true

$('input[type="checkbox"]').attr('checked', true);

删除属性和特性

当我们需要删除一个元素的属性或特性时，可以通过jQuery中的removeAttr方法实现。removeAttr方法的用法如下：

// 删除一个元素的属性或特性
$('selector').removeAttr('attribute');

其中selector和attribute的含义与attr方法中相同。

示例3：删除一个图片元素的alt属性

$('img').removeAttr('alt');

操作类名

当我们需要添加、删除或切换元素的类名时，可以通过jQuery中的addClass、removeClass和toggleClass方法实现。这三个方法的用法如下：

// 添加类名
$('selector').addClass('class');
// 删除类名
$('selector').removeClass('class');
// 切换类名
$('selector').toggleClass('class');

其中selector是需要添加、删除或切换类名的元素选择器；class是需要添加、删除或切换的类名。

示例4：点击按钮添加类名

<button id="btn">点击添加类名</button>
<div id="box">这是一个盒子</div>
<script>
  $('#btn').click(function() {
    $('#box').addClass('red');
  });
</script>
<style>
  .red {
    background-color: red;
  }
</style>

示例5：鼠标移入切换类名

<div id="box2">这是另一个盒子</div>
<script>
  $('#box2').mouseover(function() {
    $(this).toggleClass('blue');
  });
</script>
<style>
  .blue {
    background-color: blue;
  }
</style>

以上就是《jQuery学习3：操作元素属性和特性》的完整攻略。通过学习该教程，你可以掌握使用jQuery操作HTML元素的属性和特性的基本方法，以及如何操作元素的类名。