Jquery下attr和removeAttr的使用方法
更新時(shí)間：2010年12月28日 13:26:07 作者：
jquery提供一種操作DOM元素屬性的方法: attr(修改和增加DOM元素的屬性) 和 removeAttr(移除屬性)。
下面我們來具體看一下attr的用法：
一、attr(name):取得第一個(gè)匹配元素的屬性值。通過這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined 。其中name為string.下面我用一個(gè)img元素演示一下這種用法:
//html文件中 <img src="a.gif" />
//我們可以用attr獲得img元素的src屬性,具體用法如下：
$(function(){
var imgSrc = $("img").attr('src');
alert(imgSrc); //顯示 a.gif
})
二、attr(key,value):為所有匹配的元素設(shè)置一個(gè)屬性值。key為string屬性名,value為object屬性值,用法演示：
//html文件中 <img />
//使用此方法設(shè)置img的src屬性
$(function(){
$("img").attr('src', 'a.gif'); //文件中顯示 <img src="a.gif" />
})
三、attr(properties):這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意，如果你要設(shè)置對(duì)象的class屬性，你必須使用'className' 作為屬性名?；蛘吣憧梢灾苯邮褂?addClass( class ) 和 .removeClass( class ).
//文件中 <img />
$(function(){
$("img").attr({src:'a.gif', title:'this is a image', className: 'filter'});
})
// 顯示為<img src="a.gif" title="this is a image" class="filter">
四、attr(key, fn):為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值。
//文件中 <img src="a.gif" />
$(function(){
$("img").attr('title', function(){ return this.src }); //顯示 <img src="a.gif" title="a.gif" />
})
以上介紹的是attr的一些用法，下面是removeAttr的用法 remove故明思意就是移除的意思，從每一個(gè)匹配的元素中刪除一個(gè)屬性。它的具體用法就是：
//文檔中 <img src="a.gif" title="this is a image" ?>
$(function(){
$("img").removeAttr('title'); //顯示 <img src="a.gif" />
})
以上介紹了attr和removeAttr的基本用法，在實(shí)際的工作中還會(huì)遇到一些更為復(fù)雜的應(yīng)用，這就需要我們掌握基本用法的同時(shí)，多多總結(jié)和嘗試其他用法。
一、attr(name):取得第一個(gè)匹配元素的屬性值。通過這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined 。其中name為string.下面我用一個(gè)img元素演示一下這種用法:
復(fù)制代碼 代碼如下:
//html文件中 <img src="a.gif" />
//我們可以用attr獲得img元素的src屬性,具體用法如下：
$(function(){
var imgSrc = $("img").attr('src');
alert(imgSrc); //顯示 a.gif
})
二、attr(key,value):為所有匹配的元素設(shè)置一個(gè)屬性值。key為string屬性名,value為object屬性值,用法演示：
復(fù)制代碼 代碼如下:
//html文件中 <img />
//使用此方法設(shè)置img的src屬性
$(function(){
$("img").attr('src', 'a.gif'); //文件中顯示 <img src="a.gif" />
})
三、attr(properties):這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意，如果你要設(shè)置對(duì)象的class屬性，你必須使用'className' 作為屬性名?；蛘吣憧梢灾苯邮褂?addClass( class ) 和 .removeClass( class ).
復(fù)制代碼 代碼如下:
//文件中 <img />
$(function(){
$("img").attr({src:'a.gif', title:'this is a image', className: 'filter'});
})
// 顯示為<img src="a.gif" title="this is a image" class="filter">
四、attr(key, fn):為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值。
復(fù)制代碼 代碼如下:
//文件中 <img src="a.gif" />
$(function(){
$("img").attr('title', function(){ return this.src }); //顯示 <img src="a.gif" title="a.gif" />
})
以上介紹的是attr的一些用法，下面是removeAttr的用法 remove故明思意就是移除的意思，從每一個(gè)匹配的元素中刪除一個(gè)屬性。它的具體用法就是：
復(fù)制代碼 代碼如下:
//文檔中 <img src="a.gif" title="this is a image" ?>
$(function(){
$("img").removeAttr('title'); //顯示 <img src="a.gif" />
})
以上介紹了attr和removeAttr的基本用法，在實(shí)際的工作中還會(huì)遇到一些更為復(fù)雜的應(yīng)用，這就需要我們掌握基本用法的同時(shí)，多多總結(jié)和嘗試其他用法。
您可能感興趣的文章:
- jquery中prop()方法和attr()方法的區(qū)別淺析
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
- jquery attr方法獲取input的checked屬性問題
- 用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法
- Jquery attr("checked") 返回checked或undefined 獲取選中失效
- jquery $(this).attr $(this).val方法使用介紹
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- jquery attr()設(shè)置和獲取屬性值實(shí)例教程
相關(guān)文章
基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式
JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式,使用Validate的朋友可以參考下。2011-09-09
用jquery實(shí)現(xiàn)動(dòng)畫跳到頂部和底部(這個(gè)比較簡(jiǎn)單)
用jquery實(shí)現(xiàn)動(dòng)畫的跳到頂部和底部，當(dāng)點(diǎn)擊頂部按鈕的時(shí)候，執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離2014-09-09
:first：獲取第一個(gè)元素，在一些特殊情況下還是蠻實(shí)用的，下面為大家詳細(xì)介紹下:first的具體使用，感興趣的朋友可以參考下2013-08-08
使用Jquery獲取帶特殊符號(hào)的ID 標(biāo)簽的方法
這篇文章主要介紹了使用Jquery如何獲取帶特殊符號(hào)的ID 標(biāo)簽，該怎么寫,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)默認(rèn)是閉合的FAQ展開效果菜單,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery驗(yàn)證Checkbox是否選中的代碼 推薦
jQuery驗(yàn)證Checkbox是否選中的代碼，需要的朋友可以參考下。建議大家看下腳本之家的相關(guān)文章。2011-09-09
jQuery Easyui datagrid/treegrid 清空數(shù)據(jù)
這篇文章主要介紹了jQuery Easyui datagrid/treegrid 清空數(shù)據(jù)的相關(guān)資料2016-07-07
jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery圓形統(tǒng)計(jì)圖開發(fā)實(shí)例
這篇文章主要介紹了jQuery圓形統(tǒng)計(jì)圖開發(fā)的方法,實(shí)例分析了circliful插件的用法與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01