jQuery的屬性&CSS操作

屬性相關操作

val()方法

設置或返回表單字段的值蔫浆。
這是一個讀寫雙用的方法疗垛,用來處理input的value,當方法沒有參數(shù)的時候返回input的value值纹份,當傳遞了一個參數(shù)的時候孝常,方法修改input的value值為參數(shù)值旗们。

$('input').val()
$('input').val('newValue');

attr()方法

用于獲取屬性值。

$("button").click(function(){
  alert($("#dialog").attr("href"));
});   獲得鏈接中 href 屬性的值

也用于設置/改變屬性值构灸。

$("button").click(function(){
  $("#dialog").attr("href","http://www.runoob.com/jquery");
});   改變(設置)鏈接中 href 屬性的值

也允許您同時設置多個屬性上渴。

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});     同時設置 href 和 title 屬性

removeAttr()方法

從被選元素移除一個或多個屬性。

$("button").click(function(){
    $("p").removeAttr("style");
});   從所有的 <p> 元素移除樣式屬性

prop()/removeProp()方法

prop()方法設置或返回被選元素的屬性和值冻押。
當該方法用于返回屬性值時驰贷,則返回第一個匹配元素的值。
當該方法用于設置屬性值時洛巢,則為匹配元素集合設置一個或多個屬性/值對。
(如需檢索 HTML 屬性次兆,請使用 attr() 方法代替稿茉。如需移除屬性,請使用 removeProp()方法芥炭。)

removeProp() 方法移除由 prop() 方法設置的屬性
(不要使用該方法來移除諸如 style漓库、id 或 checked 之類的 HTML 屬性。請使用 removeAttr()方法代替园蝠。)

$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 屬性: " + $x.prop("color"));
    $x.removeProp("color");
});   添加并移除名為 "color" 的屬性

CSS相關操作

css()方法

設置或返回被選元素的一個或多個樣式屬性渺蒿。
返回CSS屬性

$("p").css("background-color");   返回首個匹配元素的 background-color 值

設置CSS屬性

$("p").css("background-color","yellow");   為所有匹配元素設置 background-color 值
$("p").css({"background-color":"yellow","font-size":"200%"});   為所有匹配元素設置 background-color 和 font-size(設置多個CSS屬性)

addClass()方法

向被選元素添加一個或多個class(不是覆蓋原class,是追加彪薛,也不會檢查重復).

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});   向不同的元素添加 class 屬性茂装。在添加類時,也可以選取多個元素

$("button").click(function(){
  $("body div:first").addClass("important blue");
});   也可以在 addClass() 方法中規(guī)定多個類

removeClass()方法

從被選元素刪除一個或多個class.

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});   在不同的元素中刪除指定的 class 屬性

hasClass()方法

檢查被選元素是否包含指定的類名稱,返回true/false善延。

$("button").click(function(){
    alert($("p").hasClass("intro"));
});   檢查 <p> 元素是否包含 "intro" 類

toggleClass()方法

對被選元素進行添加/刪除類的切換操作少态。

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});   對被選元素進行添加/刪除類的切換操作
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市易遣,隨后出現(xiàn)的幾起案子彼妻,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,835評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侨歉,死亡現(xiàn)場離奇詭異屋摇,居然都是意外死亡,警方通過查閱死者的電腦和手機幽邓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,900評論 2 383
  • 文/潘曉璐 我一進店門炮温,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人颊艳,你說我怎么就攤上這事茅特。” “怎么了棋枕?”我有些...
    開封第一講書人閱讀 156,481評論 0 345
  • 文/不壞的土叔 我叫張陵白修,是天一觀的道長。 經(jīng)常有香客問我重斑,道長兵睛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,303評論 1 282
  • 正文 為了忘掉前任窥浪,我火速辦了婚禮祖很,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘漾脂。我一直安慰自己假颇,他們只是感情好,可當我...
    茶點故事閱讀 65,375評論 5 384
  • 文/花漫 我一把揭開白布骨稿。 她就那樣靜靜地躺著笨鸡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪坦冠。 梳的紋絲不亂的頭發(fā)上形耗,一...
    開封第一講書人閱讀 49,729評論 1 289
  • 那天,我揣著相機與錄音辙浑,去河邊找鬼激涤。 笑死,一個胖子當著我的面吹牛判呕,可吹牛的內(nèi)容都是我干的倦踢。 我是一名探鬼主播,決...
    沈念sama閱讀 38,877評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼佛玄,長吁一口氣:“原來是場噩夢啊……” “哼硼一!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起梦抢,我...
    開封第一講書人閱讀 37,633評論 0 266
  • 序言:老撾萬榮一對情侶失蹤般贼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哼蛆,經(jīng)...
    沈念sama閱讀 44,088評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡蕊梧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,443評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了腮介。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肥矢。...
    茶點故事閱讀 38,563評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖叠洗,靈堂內(nèi)的尸體忽然破棺而出甘改,到底是詐尸還是另有隱情,我是刑警寧澤灭抑,帶...
    沈念sama閱讀 34,251評論 4 328
  • 正文 年R本政府宣布十艾,位于F島的核電站,受9級特大地震影響腾节,放射性物質(zhì)發(fā)生泄漏忘嫉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,827評論 3 312
  • 文/蒙蒙 一案腺、第九天 我趴在偏房一處隱蔽的房頂上張望庆冕。 院中可真熱鬧,春花似錦劈榨、人聲如沸访递。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽力九。三九已至,卻和暖如春邑闺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背棕兼。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評論 1 264
  • 我被黑心中介騙來泰國打工陡舅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人伴挚。 一個月前我還...
    沈念sama閱讀 46,240評論 2 360
  • 正文 我出身青樓靶衍,卻偏偏與公主長得像,于是被迫代替她去往敵國和親茎芋。 傳聞我的和親對象是個殘疾皇子颅眶,可洞房花燭夜當晚...
    茶點故事閱讀 43,435評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,124評論 0 3
  • jQuery的屬性與樣式之.attr()與.removeAttr() 每個元素都有一個或者多個特性,這些特性的用途...
    阿r阿r閱讀 653評論 0 6
  • 一:認識jquery jquery是javascript的類庫田弥,具有輕量級涛酗,完善的文檔,豐富的插件支持,完善的Aj...
    xuguibin閱讀 1,706評論 1 7
  • 一商叹、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,358評論 0 44
  • jQuery基礎(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗 $(docume...
    croyance0601閱讀 1,078評論 0 8