JQuery常用語句整理(二)

參考資料:菜鳥教程
JQuery HTML
===
JQuery除了可以對HTML內(nèi)容進(jìn)行修改之外,還能進(jìn)行添加刪除。

添加元素

  $("p").append("aa") - 在被選元素的結(jié)尾插入內(nèi)容
  $("p").prepend() - 在被選元素的開頭插入內(nèi)容
  注意上下這倆個(gè)的區(qū)別
  $("p").after() - 在被選元素之后插入內(nèi)容
  $("p").before() - 在被選元素之前插入內(nèi)容

這四個(gè)方法都可以接收無限數(shù)量的新元素

  $("p").append("aa",''bb","cc");

append與after方法的不同
append方法在被選元素的結(jié)尾添加文本text1墙杯,text1還是屬于該元素內(nèi)。
after方法在被選元素之后添加文本text1光酣,text1不屬于該元素了。
比如:

  <ol>
  <li>List item 1</li>
  <li>List item 2</li>
  </ol>
  $("ol").append("<li>追加列表項(xiàng)</li>");
  $("ol").after("<li>追加列表項(xiàng)</li>");

結(jié)果就是(感受一下兩者的不同)
1.List item 1
2.List item 2
3.追加列表項(xiàng)

  • 追加列表項(xiàng)

使用append時(shí)要注意:由于添加的元素屬于被選元素脉课,所以添加的內(nèi)容要與被選相符救军。比如在 $("img").append("< p>無法添加</ p>") ;是無法加入的,因?yàn)閠ext與img不一致倘零。

刪除元素

  $("#div1").remove();刪除被選元素(及其子元素)
  $("#div1").empty();刪除被選元素的子元素
  $("p").remove(".italic");刪除class="italic" 的所有 <p> 元素唱遭,
  remove的參數(shù)可以是任何 jQuery 選擇器的語法。

添加刪除CSS類

  $("h1,h2,p").addClass("class1 class2") - 向被選元素添加一個(gè)或多個(gè)類
  removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
  toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作

獲取并設(shè)置CSS樣式

  $("p").css("background-color");返回首個(gè)匹配元素的 background-color 值
  $("p").css("background-color","yellow");為所有匹配元素設(shè)置background-color 值
  $("p").css({"background-color":"yellow","font-size":"200%"});同時(shí)設(shè)置多個(gè)樣式

處理窗口尺寸

<img src="http://www.runoob.com/images/img_jquerydim.gif">
在上面這張圖中的八個(gè)尺寸都可以獲取和設(shè)置
就拿width來說(其他都一樣呈驶,就是名稱換了)

  txt=$("#div1").width();獲取該尺寸
  $("#div1").width("300px");設(shè)置該元素的尺寸

JQuery 遍歷

在使用它的方法之前首先知道什么叫遍歷以及它的使用方法拷泽。以及掌握DOM文檔樹

遍歷用于根據(jù)其相對于其他元素的關(guān)系來"查找"(或選刃湔啊)HTML 元素
就是通過某一項(xiàng)開始司致,選擇向上移動(祖先),向下移動(子孫)聋迎,水平移動(同胞)的方式來找到想要的元素脂矫。

祖先(向上移動)

  $("span").parent();返回每個(gè) <span> 元素的的直接父元素(只在上一級遍歷)
  $("span").parents();返回所有 <span> 元素的所有祖先(誰叫它是復(fù)數(shù)呢)
  $("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
  $("span").parentsUntil("div");返回介于 <span> 與 <div> 元素之間的所有祖先元素

后代(向下移動)

  $("div").children();返回每個(gè) <div> 元素的所有直接子元素,可以使用可
   選參數(shù)來過濾對子元素的搜索
  $("div").children("p.1");返回類名為 "1" 的所有 <p> 元素
  $("div").children("p#a");返回id為 "1" 的所有 <p> 元素

  $("div").find("*");返回被選元素的所有后代元素霉晕,一路向下直到最后一個(gè)后代
  $("div").find("span");返回屬于 <div> 后代的所有 <span> 元素

同胞(左右移動)

  $("h2").siblings("p");返回 <h2> 的所有<p> 元素羹唠,如果不加參數(shù)則是所有元素
  $("h2").next();返回 <h2> 的下一個(gè)同胞元素
  $("h2").nextAll();返回 <h2> 的所有跟隨的同胞元素
  $("h2").nextUntil("h6");返回介于 <h2> 與 <h6> 元素之間的所有同胞元素
  prev(), prevAll() & prevUntil()方法與上面相同只是方向相反。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娄昆,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子缝彬,更是在濱河造成了極大的恐慌萌焰,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谷浅,死亡現(xiàn)場離奇詭異扒俯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)一疯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門撼玄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人墩邀,你說我怎么就攤上這事掌猛。” “怎么了眉睹?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵荔茬,是天一觀的道長废膘。 經(jīng)常有香客問我,道長慕蔚,這世上最難降的妖魔是什么丐黄? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮孔飒,結(jié)果婚禮上灌闺,老公的妹妹穿的比我還像新娘。我一直安慰自己坏瞄,他們只是感情好桂对,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惦积,像睡著了一般接校。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上狮崩,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天蛛勉,我揣著相機(jī)與錄音,去河邊找鬼睦柴。 笑死诽凌,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的坦敌。 我是一名探鬼主播侣诵,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼狱窘!你這毒婦竟也來了杜顺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蘸炸,失蹤者是張志新(化名)和其女友劉穎躬络,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搭儒,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡穷当,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了淹禾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片馁菜。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖铃岔,靈堂內(nèi)的尸體忽然破棺而出汪疮,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布铲咨,位于F島的核電站躲胳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纤勒。R本人自食惡果不足惜坯苹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望摇天。 院中可真熱鬧粹湃,春花似錦、人聲如沸泉坐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽腕让。三九已至孤钦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間纯丸,已是汗流浹背偏形。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留觉鼻,地道東北人俊扭。 一個(gè)月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像坠陈,于是被迫代替她去往敵國和親萨惑。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

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

  • 通過jQuery仇矾,您可以選扔拱(查詢,query)HTML元素贮匕,并對它們執(zhí)行“操作”(actions)姐仅。 jQuer...
    枇杷樹8824閱讀 657評論 0 3
  • DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 通過JavaScript可以很方便的獲取DOM節(jié)點(diǎn),從而進(jìn)行一系列的DOM操作粗合。但實(shí)際上...
    阿r阿r閱讀 1,020評論 0 9
  • 請記得在進(jìn)行JQuery類庫的運(yùn)用時(shí),加入JQuery類庫乌昔,并且要保證先寫文檔就緒函數(shù) $(document).r...
    Sunshinemm閱讀 2,911評論 1 40
  • 第1章 簡介 第2章 DOM節(jié)點(diǎn)的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 816評論 0 8
  • 生活對于一個(gè)人來說是什么隙疚?時(shí)間組成,社會關(guān)系構(gòu)成磕道,事件構(gòu)成供屉,當(dāng)然還有個(gè)人的情感和情緒填充。生活被某些關(guān)鍵的節(jié)...
    鮫小爻閱讀 480評論 2 2