First look at the basics about the attr () method
The attr () method sets or returns the property value of the selected element.
According to the different parameters of the method, their working methods are also somewhat different.
Returns the property value $ (selector). attr (attribute)
Set property/value $ (selector). attr (Attribute,value)
attribute to specify the name of the property.
Value to specify the values of the property.
Instance
To change the width property of an image:
| The code is as follows |
Copy Code |
$ ("button"). Click (function () {
$ ("img"). attr ("width", "180");
});
|
Complex examples
| The code is as follows |
Copy Code |
| <script language= "JavaScript" >
$ (function () {
Global variables
var strtype;
Initializing variables
Strtype = $ (". So-tit ul Li:first"). attr ("desc")
Add the current effect style for the first so-tit ul Li
$ (". So-tit ul Li:first"). AddClass ("So-current");
$ (". So-tit ul li"). Click (function () {
Remove all. So-tit ul Li's style
$ (". So-tit ul li"). Removeclass ("So-current");
Current. So-tit ul Li's style
$ (this). addclass ("So-current");
Current DESC Property value
Strtype = $ (this). attr ("desc")
});
$ ("#so"). Click (function () {
var Url = window.location.href;
alert (strtype);
});
});
</script>
<div id= "Top" >
<div class= "logo fl" ></div>
<div class= "so FL" >
<div class= "So-tit" >
<ul>
<li desc= "Product" > Find products </li>
<li desc= "Shopping" > Find merchants </li>
<li desc= "News" > Find information </li>
<li desc= "Job" > Find talent </li>
</ul>
</div>
<div class= "So-index" >
<input type= "text" class= "TXT"/>
<select id= "Product" >
<option selected= "selected" > All Products </option>
</select>
</div>
</div>
</div> |
Dynamically modifying connections
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Dynamic Modify Connection </title>
<script src= "Jquery-1.4.2.min.js" type= "Text/javascript" ></script>
<!--replace your jquery path-->
<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 ' >";//declaring a variable
var link2 = "<a href= ' http://www.qq.com ' target= ' _blank ' >";
var link3 = "<a href= ' http://www.sina.com.cn ' target= ' _blank ' >";
var Linkr = "</a>";//End of connection
$ (function () {
$ ("#link1"). Hover (function () {
$ ("#test"). HTML (link1+ "Connection text" +LINKR);//modify connection to point
})
$ ("#link2"). Hover (function () {
$ ("#test"). HTML (link2+ "Connection Text 2" +LINKR);
})
$ ("#link3"). Hover (function () {
$ ("#test"). HTML (link3+ "Connection text 3" +LINKR);
})
})
</script>
<body>
<span id= "Link1" >1</span> <span id= "Link2" >2</span> <span id= "Link3" >3</span> <div id= "Test" ></div>
</body>
|
After the above method was found to be a bit more complicated, and later found that it can be done directly
Html
| The code is as follows |
Copy Code |
<a href= "javascript:void (0);" target= "_blank" id= "title" >xxxxx</a> |
Jquery
| code is as follows |
copy code |
| $ (' #sy '). Click (function () {
$ (' #title '). attr (', ' http://www.111cn.net ');
}) |
