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
});
摘自：http://www.61dh.com/blog/2009/01/jquery-html.html
Jquery实现控件得隐藏和显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery</title>
<script type="text/javascript" src="jquery-1[1].3.2.min.js"></script>
<style type="text/css">
.big{ font-size:30px; color:#FF0000;}
</style>
<script type="text/javascript">
$(function(){
$('#click_event').click(function(){
$('#click_event').html('');
if($('#hidden_enent').is(':hidden'))
{
$('#hidden_enent').show();
$('#click_event').html('隐藏');
}
else
{
$('#hidden_enent').hide();
$('#click_event').html('显示');
}
})
})
</script>
</head>
<body>
<div id="click_event" style="cursor:pointer">隐藏</div>
<div id="hidden_enent">测试隐藏</div>
</body>
</html>
浙公网安备 33010602011771号