jQuery基础 - 如何处理HTML标签属性

当我们对页面进行操作的时候，常常需要对HTML标签属性(tag attribute)进行处理，这包括获取某个标签属性的值，或者对某个标签属性的值进行设置。在jQuery里我们可以通过.attr()的方法来实现。

1. 获取标签属性的值 (演示)

• 语法：$('选定目标').attr('属性名')
• 例子如下：(如果你对如何选定目标不了解，请查看前面的文章：jQuery基础 - 选择器)

<p id="b6_a">点击获取本段落的ID</p>

<button>查看ID</button>

<p id="b6_a">点击查看链接的URL</p>

<ul>

  <li><a href="http://www.61dh.com/blog">网站开发日志</a></li>

  <li><a href="http://www.61dh.com/blog/categories/">日志分类</a></li>

</ul>

//使用下面的jQuery代码，来获取ID和HREF

$(document).ready(function() {

  $('button:eq(0)').click(function(){

    alert("ID:" +$('p:eq(0)').attr("id"));

  });

  

  $("ul>li>a").click(function(){

    alert("URL:"+$(this).attr('href'));

    return false;

  });

});

2. 设置标签属性的值 (演示)

• 语法：$('选定目标').attr('属性名', '值')
• 例子如下：

<p id="b6_c">点击设置本段落的ID，</p>

<button>设置ID</button>

//通过下面的jQuery代码，点击按钮后，p的'id'将被设置为"b6_cc"

$("button").click(function(){

  $('#b6_c').attr("id", "b6_cc");

});

3. 使用jQuery设置标签属性值的功能，我们可以对表单的提交的目的地进行修改，这在实际运用中还是挺有用。例如：用户可以通过点击某个链接，让表单提交给不同的php文件做不同的处理。

$('a').click(function(){

  $("#myform").attr("action", "custom1.php");

});

4. 上面介绍的设置标签属性值的方法都只有对一个属性进行修改，其实jQuery的.attr()方法也可以对某个标签的多个属性进行修改，例子如下：

$("#myimg").attr({

  src : "newimage.gif",

  title : "New Image",

  alt : "New Image",

  border : 1

});