jQuery attr()方法改变元素属性实例说明

来源:互联网 时间:1970-01-01

attr() 方法可以动态的改变html各种元素的属性,今天我们由于要动态修改a标签的连接,所以就深入的了解了attr()方法,下面我给大家整理一下,希望给各位有所帮助。

先看最基本的关于attr()方法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。

返回属性值 $(selector).attr(attribute)

设置属性/值 $(selector).attr(attribute,value)

attribute 规定属性的名称。

value 规定属性的值。

实例

改变图像的 width 属性:

 代码如下 复制代码 $("button").click(function(){

  $("img").attr("width","180");

});

 

复杂例子

 代码如下 复制代码

<script language="javascript">

$(function(){

 //全局变量

 var strType;

 //初始化变量

 strType = $(".so-tit ul li:first").attr("desc")

 //为第一个so-tit ul li添加当前效果样式 $(".so-tit ul li:first").addClass("so-current");
 $(".so-tit ul li").click(function() {
  //去掉所有.so-tit ul li的样式
  $(".so-tit ul li").removeClass("so-current");
  //当前.so-tit ul li的样式
  $(this).addClass("so-current");
  //当前desc属性值
  strType = $(this).attr("desc") 
 });
 $("#so").click(function() {
  var Url = window.location.href;
  alert(strType);
 });
});
</script>
<div id="top">
 <div class="logo fl"><img src="/Images/bcl-logo.gif" alt="" /></div>
 <div class="so fl">
     <div class="so-tit">
      <ul>
       <li desc="product">找产品</li>
    <li desc="shopping">找商家</li>
    <li desc="news">找资讯</li>
    <li desc="job">找人才</li>
   </ul>
  </div>
  <div class="so-index">
  <input type="text" class="txt" />&nbsp;&nbsp;
  <select id="product">
      <option selected="selected">所有产品</option>
  </select>
  <img src="/Images/so-but.gif" id="so" alt="搜索" align="absmiddle" />  </div>
 </div>
</div>

动态修改连接

 代码如下 复制代码

<!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="jquery-1.4.2.min.js" type="text/javascript"></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>

结过上面的方法之后发现有点复杂,后来发现可直接这样操作

html

 代码如下 复制代码

<a href="javascript:void(0);" target="_blank" id="title">xxxxx</a>

jquery

 代码如下 复制代码

$('#sy').click(function(){
 $('#title').attr('','http://www.php100.com');
})




相关阅读:
Top