JavaScript Tutorial/jQuery/attr

Материал из Web эксперт
Перейти к: навигация, поиск

Add attribute and clear attribute

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("div").hover(
     function() {
       $(this).attr("id", "justAdd");
       $(this).text("This element\"s ID is: " + $(this).attr("id"));
     },
     function() {
       $(this).attr("id", "");
       $(this).text("This element\"s ID has been removed.");
     }
   );
 }

); $("a").removeAttr("title");

   </script>
   <style type="text/css">

div {

   width: 350px;
   padding: 10px;
   border: 1px solid rgb(200, 200, 200);
   background: #93cdf9;
   margin: 5px;

} div#justAdd {

   background: #6faddd;

}

   </style>
 </head>
 <body>
Mouse over to change this element"s id.
 </body>

</html></source>


attr(key, fn)

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("div").attr("id", function (arr) {
                 return "div-id" + arr;
                })
               .each(function () {
                 $("span", this).html("(ID = "" + this.id + "")");
            });
       });
   </script>
 </head>
 <body>
   <body>
A
B
C
   </body>

</html></source>


attr(key, value) set a single property to a value, on all matched elements.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("button:gt(1)").attr("disabled","disabled");
     
       });
   </script>
 </head>
 <body>
   <body>
     <button>0th Button</button>
     <button>1st Button</button>
     <button>2nd Button</button>
   </body>

</html></source>


attr(name): access a property on the first matched element.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           var title = $("em").attr("title");
           $("div").text(title);
     
       });
   </script>
 </head>
 <body>
   <body>
     
     
   </body>

</html></source>


Disable all form input controls

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("input").attr("disabled", "disabled");
       });
   </script>
 </head>
 <body>
   <body>
       <input type="checkbox" name="a" />
   
       A
       <input type="checkbox" name="b" />
       B
       <input type="checkbox" name="c" checked="checked" />
   
       C
   </body>

</html></source>


Disable input control

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
     $("input").attr("disabled", "disabled");
     
 });
   </script>
 </head>
 <body>
  <form>
   <input type="checkbox" name="a" />
   A
   <input type="checkbox" name="b" />
   B
   <input type="checkbox" name="c" checked="checked" />
   C
 </form>
 </body>

</html></source>


Finds the title attribute of the first in the page.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           var title = $("em").attr("title");
           $("div").text(title);
     
       });
   </script>
 </head>
 <body>
   <body>
     
     
   </body>

</html></source>


Get attribute from tag

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           var title = $("em").attr("title");
           $("div").text(title);
       });
   </script>
 </head>
 <body>
   em
 </body>

</html></source>


Get input control type

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("#exampleTable").find("td").each(function(i, el) {
       var inputEl = $(el).children().get(0);
       $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");
   })
       
   });
   </script>
 </head>
 <body>
    <form>
           Type
           Element
           <input type="button" value="Input Button"/>
           <input type="checkbox" />
   </form>
 </body>

</html></source>


Set attribute with the returned function value

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("li").attr(
     "id",
     function() {
       return "tmp" + $(this).text();
     }
   );
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   padding: 0;
   margin: 0;

} ul li {

   margin: 3px;
   padding: 3px;

} li#tmpA {

   background: #d7b05b;

} li#tmpB {

   background: #d3988a;

} li#tmpC {

   background: #8ad3a6;

} li#tmpD {

   background: #8aa9d3;

}

   </style>
 </head>
 <body>
  • A
  • B
  • C
  • D
 </body>

</html></source>


Set Image URL title alt

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("img").attr({ 
                src: "http://wbex.ru/style/logo.png",
                title: "wbex.ru",
                alt: "Logo"
            });
            $("div").text($("img").attr("alt"));
       });
   </script>
 </head>
 <body>
   <body>
     <img />
 </body>

</html></source>


Sets src attribute from title attribute on the image.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("img").attr("src", function() { 
                 return "/images/" + this.title; 
               });
       });
   </script>
 </head>
 <body>
   <body>
     <img title="a.gif"/>
   </body>

</html></source>