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

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 >

输出如下：
之前单击按钮：

文章图片
单击按钮后：

文章图片
示例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 >

输出如下：
之前单击按钮：

文章图片
单击按钮后：

文章图片
示例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 >

输出如下：
之前单击按钮：

文章图片
单击按钮后：

文章图片
示例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 >

输出如下：
之前单击按钮：