Jquery下attr和removeAttr的使用方法
  更新時間:2010年12月28日 13:26:07   作者:   
                        jquery提供一種操作DOM元素屬性的方法: attr(修改和增加DOM元素的屬性) 和 removeAttr(移除屬性)。
                        
                            下面我們來具體看一下attr的用法: 
一、attr(name):取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應(yīng)屬性,則返回 undefined 。其中name為string.下面我用一個img元素演示一下這種用法:
 
//html文件中 <img src="a.gif" />
//我們可以用attr獲得img元素的src屬性,具體用法如下:
$(function(){
var imgSrc = $("img").attr('src');
alert(imgSrc); //顯示 a.gif
})
 
二、attr(key,value):為所有匹配的元素設(shè)置一個屬性值。key為string屬性名,value為object屬性值,用法演示:
 
//html文件中 <img />
//使用此方法設(shè)置img的src屬性
$(function(){
$("img").attr('src', 'a.gif'); //文件中顯示 <img src="a.gif" />
})
 
三、attr(properties):這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意,如果你要設(shè)置對象的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è)置一個計算的屬性值。不提供值,而是提供一個函數(shù),由這個函數(shù)計算的值作為屬性值。
 
//文件中 <img src="a.gif" />
$(function(){
$("img").attr('title', function(){ return this.src }); //顯示 <img src="a.gif" title="a.gif" />
})
 
以上介紹的是attr的一些用法,下面是removeAttr的用法 remove故明思意就是移除的意思,從每一個匹配的元素中刪除一個屬性。它的具體用法就是:
 
//文檔中 <img src="a.gif" title="this is a image" ?>
$(function(){
$("img").removeAttr('title'); //顯示 <img src="a.gif" />
})
 
以上介紹了attr和removeAttr的基本用法,在實際的工作中還會遇到一些更為復(fù)雜的應(yīng)用,這就需要我們掌握基本用法的同時,多多總結(jié)和嘗試其他用法。
                        
                        一、attr(name):取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應(yīng)屬性,則返回 undefined 。其中name為string.下面我用一個img元素演示一下這種用法:
復(fù)制代碼 代碼如下:
//html文件中 <img src="a.gif" />
//我們可以用attr獲得img元素的src屬性,具體用法如下:
$(function(){
var imgSrc = $("img").attr('src');
alert(imgSrc); //顯示 a.gif
})
二、attr(key,value):為所有匹配的元素設(shè)置一個屬性值。key為string屬性名,value為object屬性值,用法演示:
復(fù)制代碼 代碼如下:
//html文件中 <img />
//使用此方法設(shè)置img的src屬性
$(function(){
$("img").attr('src', 'a.gif'); //文件中顯示 <img src="a.gif" />
})
三、attr(properties):這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意,如果你要設(shè)置對象的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è)置一個計算的屬性值。不提供值,而是提供一個函數(shù),由這個函數(shù)計算的值作為屬性值。
復(fù)制代碼 代碼如下:
//文件中 <img src="a.gif" />
$(function(){
$("img").attr('title', function(){ return this.src }); //顯示 <img src="a.gif" title="a.gif" />
})
以上介紹的是attr的一些用法,下面是removeAttr的用法 remove故明思意就是移除的意思,從每一個匹配的元素中刪除一個屬性。它的具體用法就是:
復(fù)制代碼 代碼如下:
//文檔中 <img src="a.gif" title="this is a image" ?>
$(function(){
$("img").removeAttr('title'); //顯示 <img src="a.gif" />
})
以上介紹了attr和removeAttr的基本用法,在實際的工作中還會遇到一些更為復(fù)雜的應(yīng)用,這就需要我們掌握基本用法的同時,多多總結(jié)和嘗試其他用法。
                                您可能感興趣的文章:
                        - jquery中prop()方法和attr()方法的區(qū)別淺析
 - jquery獲取自定義屬性(attr和prop)實例介紹
 - jQuery .attr()和.removeAttr()方法操作元素屬性示例
 - jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
 - jquery attr方法獲取input的checked屬性問題
 - 用JQuery 判斷某個屬性是否存在hasAttr的解決方法
 - Jquery attr("checked") 返回checked或undefined 獲取選中失效
 - jquery $(this).attr $(this).val方法使用介紹
 - jquery 獲取自定義屬性(attr和prop)的實現(xiàn)代碼
 - jquery attr()設(shè)置和獲取屬性值實例教程
 
相關(guān)文章
 jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面(包括jquery頁面加載完畢才執(zhí)行方法)2011-01-01
 淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
本文結(jié)合W3School的文檔,分析了jQuery中 wrap() wrapAll() 與 wrapInner()的差異,并給出了圖文對比教程,非常的簡單實用,有需要的朋友可以參考下2014-11-11
 jQuery.Uploadify插件實現(xiàn)帶進(jìn)度條的批量上傳功能
這篇文章主要介紹了jQuery.Uploadify插件實現(xiàn)帶進(jìn)度條的批量上傳功能,還具有取消上傳及刪除等功能,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06

