jquery中css()和attr()有什么區別

這篇文章給大家介紹jquery中css()和attr()有什么區別，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

jquery中有attr()和css()兩種方法：

attr是attribute的縮寫，意思是標簽屬性。css是，樣式，意思是元素的style樣式的。

jquery attr()方法

attr() 方法設置或返回被選元素的屬性和值。

當該方法用于返回屬性值，則返回第一個匹配元素的值。

當該方法用于設置屬性值，則為匹配元素設置一個或多個屬性/值對。

語法

返回屬性的值：

$(selector).attr(attribute)

設置屬性和值：

$(selector).attr(attribute,value)

attribute：規定屬性的名稱。

value：規定屬性的值。

jquery css()方法

css() 方法返回或設置匹配的元素的一個或多個樣式屬性。

返回第一個匹配元素的 CSS 屬性值。

注釋：當用于返回一個值時，不支持簡寫的 CSS 屬性（比如 "background" 和 "border"）。

$(selector).css(name)

name：必需。規定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性。比如 "color"。

jquery中attr()與css()的區別

jquery中attr()是獲取/修改元素的屬性和值(和Html標簽有關)；css()是獲取/修改元素的樣式屬性(和style有關)。

attr()主要是針對元素的屬性進行操作，如img的src屬性和alt屬性，a鏈接的href屬性等等；

css()修改的是樣式里面的屬性，即是style里面的屬性。

前者可以修改<img>的src屬性，可以修改<a>的href屬性， 可以修改<input>的title屬性。然而后者卻不行，他它只能修改樣式相關的特征。

所以，后者是前者的子集，只是對 style這個特定的屬性進行操作。

示例：

HTML

<div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>

Javascript

<script type="text/javascript">
$(function() {
//css()
var color = $("#a").css("color"); //只有一個參數時，是獲取div#a的color，返回red
$("#a").css("color", "blue"); //兩個參數時,是設置對應的 樣式屬性，這里是這只文本color為blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持對象形式進行設置樣式
//attr()
//獲取div#a上面的data-id屬性的值；當然，style,class,id這三個都可以獲取到，因為這些都是Html元素的 屬性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//設置div#a上面的data-id屬性為2，
                //假如是一個不存在的屬性，使用這個代碼，就會添加這個屬性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用這個，div#aHtml元素上面就會新增一個data-width的屬性
});
</script>

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

關于jquery中css()和attr()有什么區別就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。