02-jQuery屬性操作

jQuery內(nèi)容選擇器

  • :empty 找到既沒(méi)有文本內(nèi)容也沒(méi)有子元素的指定元素
  • :parent 找到有文本內(nèi)容或者有子元素的指定元素
  • :contains(text) 找到包含指定文本內(nèi)容的指定元素
  • :has(selector) 找到包含指定子元素的指定元素

屬性和屬性節(jié)點(diǎn)

  • 對(duì)象身上保存的變量就是屬性
  • 操作屬性
    • 對(duì)象.屬性名稱 = 值;
    • 對(duì)象.屬性名稱;
    • 對(duì)象["屬性名稱"] = 值;
    • 對(duì)象["屬性名稱"];
  • 在編寫(xiě)HTML代碼時(shí),在HTML標(biāo)簽中添加的屬性就是屬性節(jié)點(diǎn)
  • 在瀏覽器中找到DOM元素之后,展開(kāi)看到的都是屬性
  • 在attributes屬性中保存的所有內(nèi)容屬性節(jié)點(diǎn)
  • 操作屬性節(jié)點(diǎn)
    • DOM元素.setAttribute("屬性名稱","值");
    • DOM元素.getAttribute("屬性名稱");
  • 屬性和屬性節(jié)點(diǎn)區(qū)別
    • 任何對(duì)象都有屬性,但是只有DOM對(duì)象才有屬性節(jié)點(diǎn)

jQuery屬性和屬性節(jié)點(diǎn)方法

  • attr
    • 獲取或者設(shè)置屬性節(jié)點(diǎn)的值
    • 可以傳遞一個(gè)參數(shù),也可以傳遞兩個(gè)參數(shù)
    • 如果傳遞一個(gè)參數(shù),代表獲取屬性節(jié)點(diǎn)的值,無(wú)論找到多少個(gè)元素,都只會(huì)返回第一個(gè)元素指定的屬性節(jié)點(diǎn)的值
    • 如果傳遞兩個(gè)參數(shù),代表設(shè)置屬性節(jié)點(diǎn)的值,找到多少個(gè)元素就會(huì)設(shè)置多少個(gè)元素,如果設(shè)置的屬性節(jié)點(diǎn)不存在,那么系統(tǒng)會(huì)新增
  • removeAttr
    • 刪除所有找到元素指定的屬性節(jié)點(diǎn)
    • 如果要?jiǎng)h除多個(gè)屬性節(jié)點(diǎn) 屬性名稱用空格隔開(kāi)
  • prop
    • 特點(diǎn)和attr方法一致
  • removeProp
    • 特點(diǎn)和removeAttr方法一致
  • 注意點(diǎn)
    • prop方法不僅能夠操作屬性,還能操作屬性節(jié)點(diǎn)
    • 官方推薦在操作屬性節(jié)點(diǎn)時(shí),具有true和false兩個(gè)屬性的屬性節(jié)點(diǎn),如checked,selected或者disable使用prop(),其他的使用attr()

CSS類(lèi)

  • addClass 添加一個(gè)類(lèi),如果要添加多個(gè),多個(gè)類(lèi)名之間用空格隔開(kāi)即可
  • removeClass 刪除一個(gè)類(lèi),如果要?jiǎng)h除多個(gè),多個(gè)類(lèi)名之間用空格隔開(kāi)即可
  • toggleClass 切換類(lèi),有就刪除,沒(méi)有就添加

jQuery文本操作

  • html 和原生JS中的innerHTML一樣
  • text 和原生JS中的innerText一樣
  • val 和原生JS的value屬性差不多

CSS樣式

  • 逐個(gè)設(shè)置

    $("div").css("width","100px");
    $("div").css("height","100px");
    $("div").css("background","red");
    
  • 鏈?zhǔn)皆O(shè)置(鏈?zhǔn)讲僮魅绻笥?步,建議分開(kāi))

    $("div").css("width","200px").css("height","200px").css("background","blue");
    
  • 批量設(shè)置(推薦)

    $("div").css({
                     width:"100px",
                     height:"100px",
                     background:"pink",
    })
    

jQuery位置和尺寸

  • width/height:設(shè)置的width/height

  • innerWidth/innerHeight:width/height + padding

  • outerWidth/outerHeight:width/height + padding + 邊框

  • offset:獲取或者設(shè)置元素距離窗口的偏移位

  • position:獲取元素距離定位元素的偏移位,不能設(shè)置

  • scrollTop:獲取或者設(shè)置滾動(dòng)的偏移位

    //為了保證瀏覽器的兼容,獲取網(wǎng)頁(yè)滾動(dòng)的偏移位需要按如下寫(xiě)法
    console.log($("html").scrollTop() +$("body").scrollTop());
    
    //為了保證瀏覽器的兼容,設(shè)置網(wǎng)頁(yè)滾動(dòng)的偏移位需要按如下寫(xiě)法
    $("html,body").scrollTop(300);
    
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市儿捧,隨后出現(xiàn)的幾起案子抄邀,更是在濱河造成了極大的恐慌妄迁,老刑警劉巖诀黍,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異倘核,居然都是意外死亡谷浅,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)局雄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)甥啄,“玉大人,你說(shuō)我怎么就攤上這事炬搭◎诶欤” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵宫盔,是天一觀的道長(zhǎng)融虽。 經(jīng)常有香客問(wèn)我,道長(zhǎng)灼芭,這世上最難降的妖魔是什么有额? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮彼绷,結(jié)果婚禮上巍佑,老公的妹妹穿的比我還像新娘。我一直安慰自己苛预,他們只是感情好句狼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著热某,像睡著了一般腻菇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昔馋,一...
    開(kāi)封第一講書(shū)人閱讀 51,562評(píng)論 1 305
  • 那天筹吐,我揣著相機(jī)與錄音,去河邊找鬼秘遏。 笑死丘薛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的邦危。 我是一名探鬼主播洋侨,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼舍扰,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了希坚?” 一聲冷哼從身側(cè)響起边苹,我...
    開(kāi)封第一講書(shū)人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎裁僧,沒(méi)想到半個(gè)月后个束,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡聊疲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年茬底,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片获洲。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡阱表,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出昌妹,到底是詐尸還是另有隱情捶枢,我是刑警寧澤握截,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布飞崖,位于F島的核電站,受9級(jí)特大地震影響谨胞,放射性物質(zhì)發(fā)生泄漏固歪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一胯努、第九天 我趴在偏房一處隱蔽的房頂上張望牢裳。 院中可真熱鬧,春花似錦叶沛、人聲如沸蒲讯。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)判帮。三九已至,卻和暖如春溉箕,著一層夾襖步出監(jiān)牢的瞬間晦墙,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工肴茄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晌畅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓寡痰,卻偏偏與公主長(zhǎng)得像抗楔,于是被迫代替她去往敵國(guó)和親棋凳。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

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

  • JQ操作DOM屬性節(jié)點(diǎn)相關(guān)方法(包含類(lèi)的操作) 屬性節(jié)點(diǎn)就是指dom元素的屬性 一般如果是標(biāo)簽自身自帶的屬性连躏,我們...
    Lins7閱讀 443評(píng)論 0 0
  • ??DOM 1 級(jí)主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)反粥。 ??DOM2 和 DOM3 級(jí)則在這個(gè)結(jié)構(gòu)...
    霜天曉閱讀 1,440評(píng)論 1 3
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color卢肃,font,text-align才顿,li...
    love2013閱讀 2,314評(píng)論 0 11
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,197評(píng)論 0 3
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中莫湘,你是如何考慮他的UI、安全性郑气、高性能幅垮、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,160評(píng)論 0 1