jQuery操作元素属性
jQuery操作元素属性
我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性".
在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性:
当使用id选择器时常常返回只有一个对象的jQuery包装集, 这个时侯常使用attr(name)函数获得它的元素属性:
function testAttr1(event) {
alert($("#hibiscus").attr("class"));
}注意attr(name)函数只返回第一个匹配元素的特定元素属性值. 而attr(key, name)会设置所有包装集中的元素属性:
//修改所有img元素的alt属性
$("img").attr("alt", "修改后的alt属性");而 attr( properties ) 可以一次修改多个元素属性:
$("img").attr({title:"修改后的title", alt: "同时修改alt属性"});另外虽然我们可以使用removeAttr( name ) 删除元素属性, 但是对应的DOM属性是不会被删除的, 只会影响DOM属性的值.
比如将一个input元素的readonly元素属性去掉,会导致对应的DOM属性变成false(即input变成可编辑状态):
$("#inputTest").removeAttr("readonly");<!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=utf-8" />
<title>Jquery 动态修改连接</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--上面更换您的jquery 路径-->
</head>
<style>
span{display:block; width:100px; margin:0 20px 15px 0; text-align:center; height:20px; line-height:20px; display:block; float:left; background:#CCC;}
div{border:#000 solid 1px; height:30px; clear:left; width:300px; line-height:30px; text-align:center;}
</style>
<script>
var link1 = "<a href='http://www.baidu.com' target='_blank'>";//声明一个变量
var link2 = "<a href='http://www.qq.com' target='_blank'>";
var link3 = "<a href='http://www.sina.com.cn' target='_blank'>";
var linkR = "</a>";//连接结束
$(function(){
$("#link1").hover(function(){
$("#test").html(link1+"连接文字"+linkR);//修改指向时的连接
})
$("#link2").hover(function(){
$("#test").html(link2+"连接文字2"+linkR);
})
$("#link3").hover(function(){
$("#test").html(link3+"连接文字3"+linkR);
})
})
</script>
<body>
<span id="link1">1</span>
<span id="link2">2</span>
<span id="link3">3</span>
<div id="test"></div>
</body>
</html>
