Language

jQuery控制Dom元素

skyroxas1521

2017年3月15日 • 7 min read

前言

CMS系統(drupal,joomla,wordpress…)在網站開發上,與傳統的開發上有著極大的差異,html架構並不是單純就前端這邊來刻出自己想要的html架構,絕大部分是由後端php產生出來的!
如果你剛好跟小弟一樣!是從CMS開始進入到網頁前端(web frontend)這個大家庭,那你一定要參考這篇文章,可以讓你不會像過去的我走上許多CSS亂拼亂湊的冤妄路!!

jQuery

再開始說明之前,你必須要先知道jQuery(一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作)他是此篇文章的主角和關鍵!
另外假設你與我當時一樣對jQuery與javascript完全無知卻想立刻得到成果的門外漢也可以繼續往下看!可以從下面簡單且實用的jQuery對html物件操作的應用!來慢慢深入jQuery與javascript相心會對你前台開發上會有不錯的幫助!

正篇開始~

以此架構為例

<div class="content">
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>
</div>

1.加入自己想要的html元素:

.append()：加入於指定元素內的最後一個項目

語法:

$('指定元素Id或class').append('想加入的html架構');

範例:

$('.content').append('<p>jquery產生元素</p>');

html demo:

<div class="content">
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>
 <p>jquery產生元素</p>
</div>

.prepend()：加入於指定元素內的第一個項目

語法:

$('指定元素Id或class').prepend('想加入的html架構');

範例:

$('.content').prepend('<p>jquery產生元素</p>');

html demo:

<div class="content">
  <p>jquery產生元素</p>
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>

</div>

.before()：於指定元素同層級的上方加入html元素

語法:

$('指定元素Id或class').before('想加入的html架構');

範例:

$('.item2').before('<p>jquery產生元素</p>');

html demo:

<div class="content">
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <p>jquery產生元素</p>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>
</div>

.after()：於指定元素同層級的下方加入html元素

語法:

$('指定元素Id或class').after('想加入的html架構');

範例:

$('.item2').after('<p>jquery產生元素</p>');

html demo:

<div class="content">
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>
  <p>jquery產生元素</p>
</div>

2.移動html元素到指定的位置:

其實這部分與剛說的加入自己想要的html元素做法與函數是完全一樣的,唯一的差別只有把想要加入的html參數,改為jquery選擇自己想搬移的元素

.append()：將想移動html元素移動於指定元素內的最後一個項目

語法:

$('指定元素Id或class').append($('想要搬移的元素Id或class'));

範例:

$('.item2').append($('.item1 p'));

html demo:

<div class="content">
  <div class="item1 inner"></div>
  <div class="item2 inner">
      <p>Goodbye1</p>
      <p>Goodbye1</p>
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
</div>

.prepend()：將想移動html元素移動於指定元素內的第一個項目

語法:

$('指定元素Id或class').prepend($('想要搬移的元素Id或class'));

範例:

$('.item2').prepend($('.item1 p'));

html demo:

<div class="content">
  <div class="item1 inner"></div>
  <div class="item2 inner">
      <p>Hello1</p>
      <p>Hello2</p>
      <p>Goodbye1</p>
      <p>Goodbye1</p>
  </div>
</div>

.before()：指定要移動的html元素於指定元素同層級的上方

語法:

$('指定元素Id或class').before($('想要搬移的元素Id或class'));

範例:

$('.item1').before($('.item2 p'));

html demo:

<div class="content">
  <p>Goodbye1</p>
  <p>Goodbye1</p>
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <div class="item2 inner"></div>
</div>

.after()：指定要移動的html元素於指定元素同層級的下方

語法:

$('指定元素Id或class').after($('想要搬移的元素Id或class'));

範例:

$('.item1').after($('.item2 p'));

html demo:

<div class="content">
  <div class="item1 inner">
      <p>Hello1</p>
      <p>Hello2</p>
  </div>
  <p>Goodbye1</p>
  <p>Goodbye1</p>
  <div class="item2 inner"></div>
</div>

3.加入wrapper

wrapper在前台開發上，我只能說它佔了非常重要的角色,適當的wrapper能使我們前台css更加的整潔與完整!能大幅減少在前台上亂拚亂湊的可能性,這就需要慢慢體會了XD

.wrap()：針對指定的html元素前後加上對應的html標籤(個別加)

語法:

$('指定元素Id或class').wrap('互相相對的html標籤');

範例:

$('.item1 p').wrap('<div class ="front-wrapper"></div>');

html demo:

<div class="content">
  <div class="item1 inner">
      <div class ="front-wrapper"><p>Hello1</p></div>
      <div class ="front-wrapper"><p>Hello2</p></div>
  </div>
  <div class="item2 inner">
     <p>Goodbye1</p>
     <p>Goodbye1</p>
  </div>
</div>

.wrapAll()：對指定的html元素前後加上對應的html標籤(針對多個元素一次加入)

語法:

$('指定元素Id或class').wraAll('互相相對的html標籤');

範例1:

$('.item1 p').wrapAll('<div class ="front-wrapper"></div>');

html demo:

<div class="content">
  <div class="item1 inner">
      <div class ="front-wrapper">
        <p>Hello1</p>
        <p>Hello2</p>
      </div>
  </div>
  <div class="item2 inner">
     <p>Goodbye1</p>
     <p>Goodbye1</p>
  </div>
</div>

範例2:

$('.item1,item2').wrapAll('<div class ="wrapper"></div>');

html demo:

<div class="content">
  <div class ="wrapper">
    <div class="item1 inner">
        <p>Hello1</p>
        <p>Hello2</p>
    </div>
    <div class="item2 inner">
       <p>Goodbye1</p>
       <p>Goodbye1</p>
    </div>
  </div>
</div>

.wrapInner()：對指定的html元素的下一層的所有元素進行wrapper,前後加上對應的html標籤

語法:

$('指定元素Id或class').wrapInner('互相相對的html標籤');

範例:

$('.item1 p').wrapInner('<div class ="front-wrapper"></div>');

html demo:

<div class="content">
  <div class="item1 inner">
      <div class ="front-wrapper">
        <p>Hello1</p>
        <p>Hello2</p>
      </div>
  </div>
  <div class="item2 inner">
     <p>Goodbye1</p>
     <p>Goodbye1</p>
  </div>
</div>

結語

以上的方法已經足夠你在CMS上產生你在開發前端中想要的html物件或是架構,可以讓你在撰寫樣式時更加的輕鬆!可以讓自己在架構上感到唯我獨尊的成就,不過我後面要補充下:你用來操作html元素的這些jquery方法,在CMS中大致上的情境都是會等到後台php跑完後才會執行,所以可能會在網站loading時,畫面會有瞬間的跑版的情況發生,所以如何使用這些工具還是得要自己拿捏!! 前後端完整的配合,架構上的物件能在後端就完整呈現才是上策XD
ps:如內容有誤!或有相關的疑問! 歡迎指正與討論
感謝大大們收看