jQuery attr()方法用法介绍和代码示例

2021年3月17日14:24:03 发表评论 921 次浏览

attr()方法在jQuery中习惯于组or返回所选元素的属性和值。

语法如下:

  • 要返回属性的值:
    $(selector).attr(attribute)
  • 设置属性和值:
    $(selector).attr(attribute, value)
  • 要使用函数设置属性和值:
    $(selector).attr(attribute, function(index, currentvalue))
  • 设置多个属性和值:
    $(selector).attr({attribute:value, attribute:value, ...})

参数

  • 属性:此参数用于指定属性的名称
  • 值:用于指定属性的值
  • 函数(索引, 当前值):它用于指定一个函数, 该函数返回要设置的属性值
  • 指数:借助此参数接收到的元素的索引位置。
  • 当前值:它用于接收所选元素的当前属性值。

示例1:

<!DOCTYPE html>
< html >
  
< head >
     < title >jQuery attr() Method
   </ title >
    
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
</ head >
  
< body >
     < center >
         < h1 style = "color:green;" >  
             lsbin</ h1 >
         < h2 > jQuery attr() Method</ h2 >
         < h3 style = "color:lightgreen;" >
       </ h3 >
         < img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132-120x300.png"
              alt = "" 
              width = "120" 
              height = "300" 
              class = "alignnone size-medium wp-image-915678" />
         < br >
         < br >
         < button >Click</ button >
         < script >
             $(document).ready(function() {
                 $("button").click(function() {
                     $("img").attr("width", "300");
                 });
             });
         </ script >
     </ center >
</ body >
  
</ html >

输出如下:

之前单击按钮:

jQuery | attr()方法1

单击按钮后:

jQuery | attr()方法2

示例2:

<!DOCTYPE html>
< html >
  
< head >
     < title >jQuery attr() Method</ title >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
</ head >
  
< body >
     < center >
         < h1 style = "color:green;" >  
             lsbin</ h1 >
         < h2 > jQuery attr() Method</ h2 >
         < h3 style = "color:lightgreen;" ></ h3 >
         < img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132-120x300.png"
              alt = ""
              width = "120"
              height = "300" 
              class =
              "alignnone size-medium wp-image-915678" />
         < br >
         < br >
         < button >Click</ button >
         < script >
             $(document).ready(function() {
              $("button").click(function() {
                alert("Image width: " + 
                      $("img").attr("width"));
                 });
             });
         </ script >
     </ center >
</ body >
  
</ html >

输出如下:

之前单击按钮:

jQuery | attr()方法3

单击按钮后:

jQuery | attr()方法4

示例3:

<!DOCTYPE html>
< html >
  
< head >
     < title >jQuery attr() Method</ title >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
</ head >
  
< body >
     < center >
         < h1 style = "color:green;" >  
             lsbin</ h1 >
         < h2 > jQuery attr() Method</ h2 >
         < h3 style = "color:lightgreen;" >
       </ h3 >
         < img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132.png" 
              alt = "" 
              width = "120"
              height = "300" 
              class =
              "alignnone size-medium wp-image-915678" />
         < br >
         < br >
         < button >Click</ button >
         < script >
             $(document).ready(function() {
              $("button").click(function() {
               $("img").attr("width", function(n, v) {
                 return v - 50;
                     });
                 });
             });
         </ script >
     </ center >
</ body >
  
</ html >

输出如下:

之前单击按钮:

jQuery | attr()方法5

单击按钮后:

jQuery | attr()方法6

示例4:

<!DOCTYPE html>
< html >
  
< head >
     < title >jQuery attr() Method
   </ title >
    
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
</ head >
  
< body >
     < center >
         < h1 style =
             "color:green;" >  
             lsbin</ h1 >
        
         < h2 > jQuery attr() Method</ h2 >
         < h3 style = "color:lightgreen;" ></ h3 >
         < img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132.png" 
              alt = "" 
              width = "120"
              height = "300" 
              class =
              "alignnone size-medium wp-image-915678" />
         < br >
         < br >
         < button >Click</ button >
        
         < script >
             $(document).ready(function() {
              $("button").click(function() {
               $("img").attr({
                    width: "150", height: "100"
                     });
                 });
             });
         </ script >
     </ center >
</ body >
  
</ html >

输出如下:

之前单击按钮:

jQuery | attr()方法7

单击按钮后:

jQuery | attr()方法8

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: