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

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

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

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

jquery attr()方法

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

當(dāng)該方法用于返回屬性值，則返回第一個(gè)匹配元素的值。

當(dāng)該方法用于設(shè)置屬性值，則為匹配元素設(shè)置一個(gè)或多個(gè)屬性/值對(duì)。

語法

返回屬性的值：

$(selector).attr(attribute)

設(shè)置屬性和值：

$(selector).attr(attribute,value)

attribute：規(guī)定屬性的名稱。

value：規(guī)定屬性的值。

jquery css()方法

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

返回第一個(gè)匹配元素的 CSS 屬性值。

注釋：當(dāng)用于返回一個(gè)值時(shí)，不支持簡(jiǎn)寫的 CSS 屬性（比如 "background" 和 "border"）。

$(selector).css(name)

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

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

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

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

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

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

所以，后者是前者的子集，只是對(duì) style這個(gè)特定的屬性進(jìn)行操作。

示例：

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"); //只有一個(gè)參數(shù)時(shí)，是獲取div#a的color，返回red
$("#a").css("color", "blue"); //兩個(gè)參數(shù)時(shí),是設(shè)置對(duì)應(yīng)的 樣式屬性，這里是這只文本color為blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持對(duì)象形式進(jìn)行設(shè)置樣式
//attr()
//獲取div#a上面的data-id屬性的值；當(dāng)然，style,class,id這三個(gè)都可以獲取到，因?yàn)檫@些都是Html元素的 屬性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//設(shè)置div#a上面的data-id屬性為2，
                //假如是一個(gè)不存在的屬性，使用這個(gè)代碼，就會(huì)添加這個(gè)屬性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用這個(gè)，div#aHtml元素上面就會(huì)新增一個(gè)data-width的屬性
});
</script>

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

關(guān)于jquery中css()和attr()有什么區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。