.remove() 刪除現存的元素（整個刪除）

1
2
3

$(function() {
  $('#banner').remove();
})

1
2
3
4
5
6
7
8
9
10

<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>
<p id='banner'>banner</p>

<!-- 執行後 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

Read More

.wrap() 包覆各個元素

1
2
3

$(function() {
  $('p').wrap('<div class="wp"></div>')
})

1
2
3
4
5
6
7
8
9

<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

<!-- 執行後 -->
<div class="wp"><p>蛋糕</p></div>
<div class="wp"><p>泡芙</p></div>
<div class="wp"><p>布丁</p></div>

Read More

$('代表插入位置的選擇器').方法名稱('插入元素')
這幾個和這篇 jQuery 動態插入元素 （insertBefore、insertAfter、prependTo、appendTo）類似，差別在於物件與參數之間的關係是顛倒的

這邊就直接上程式碼，不另外多說

1
2
3
4
5
6

$(function() {
  $('#puff').before('<p>蛋糕_N</p>');
  $('#puff').after('<p>布丁_N</p>');
  $('#puff').prepend('<li>餅乾_N</li>');
  $('#puff').append('<li>蘋果派_N</li>');
})

1
2
3
4
5
6
7

<p>蛋糕_N</p>
<ul id="puff">
  <li>餅乾_N</li>
  <li>泡芙</li>
  <li>蘋果派_N</li>
</ul>
<p>布丁_N</p>

Read More

$('插入元素').方法名稱('代表插入位置的選擇器')

.insertBefore() 在元素之前插入元素

1
2
3

$(function() {
  $('<p>蛋糕_N</p>').insertBefore('#puff');
})

1
2
3
4
5
6
7
8
9
10

<!-- 執行前 -->
<ul id="puff">
  <li>泡芙</li>
</ul>

<!-- 執行後，<p>元素 插在 #puff 之前-->
<p>蛋糕_N</p>         
<ul id="puff">
  <li>泡芙</li>
</ul>

Read More

將CSS樣式應用到一群有關連的元素上

前代元素名稱合併子後代元素名稱{屬性名稱：屬性數值;}

後代選取器（合併子是一個 空白字元）

後代元素包含在前代元素之內

1
2
3

ul li em {color: red;}  

h1 em, h2 em {color: green;}

1
2
3
4
5
6
7

<ul>
  <li>cake</li>
  <li><em>chocolate</em></li> // chocolate 會變成 red
</ul>

<h1><em>cake</em></h1>        // cake 會變成 green
<h2><em>chocolate</em></h2>   // chocolate 會變成 green

Read More

用來指定HTML元素屬性的CSS樣式
對於不包含 class 與 id 屬性的 XML文件 特別有用

E[attr]

elemen[attribute]{ properties }

1

img[title] { border: 1px solid red; }

1
2

<img src="first.jpg" alt="" title='first'>  // 會應用到css樣式
<img src="second.jpg" alt="">

Read More

CSS樣式是由 選取器＋樣式宣告 所組成

元素選取器

元素名稱{屬性名稱：屬性數值;}

1
2
3
4

p {color: red;}           
h1, h2, p {color: pink;}
/* 萬用選取器 */
* {color: red;}

Read More

頁碼 p.16 ~ p.22

for迴圈（重複陣列）

可遍歷整個陣列或類似陣列的物件

1
2
3
4
5
6
7
8
9

// 這個寫法，每次都要存取陣列的長度，這會拖慢你的程式
for(var i = 0; i < myArray.length; i++) {
  // do something ...
}

// 這個寫法，只需計算一次length，用於整個迴圈中 👍
for(var i = 0, max = myArray.length; i < max ; i++) {
  // do something ...
}

迴圈模式的變形。優化效能

• 可少用一個變數（這邊指 max）👍
• 遞減至0，通常比較快 👍

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  // 第一種 var i, myArray = []; for(i = myArray.length; i--;) { // do something ... } // 第二種 var myArray = [], i = myArray.length; while(i--) { // do something ... }

for-in迴圈（重複物件）

用來歷整整個非陣列物件，又稱「列舉 enumeration」

• 使用 hasOwnProperty() 過濾掉來自原型鏈的屬性

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

  // 1. 建立一個物件 var family = { sisters: 2, brothers: 1, father: 1 } // 2. 將clone方法，加到所有物件中。用擴充Object原型 if(typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function() {} } // 3. 使用 for-in，並搭配 hasOwnProperty()，來印出屬性 for(var i in family) { if (family.hasOwnProperty(i)) { // 過濾掉原型鏈的屬性 console.log(i, ":" , family[i]) } } /* 會印出這些： sisters : 2 brothers : 1 father : 1 */ // 4. 使用 for-in，直接印出屬性 for(var i in family) { console.log(i, ":" , family[i]) } /* 會印出這些： sisters : 2 brothers : 1 father : 1 clone : ƒ () {} // 多了這個 */

• 也可使用，Object.prototype呼叫 hasOwnProperty()

  • 避免命名衝突
  • 若嫌這句話太長，可以用一個區域變數快取它

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    // 使用 Object.prototype 呼叫 for(var i in family) { if (Object.prototype.hasOwnProperty.call(family, i)) { console.log(i, ":" , family[i]) } } // 使用變數快取 var i, hasOwn = Object.prototype.hasOwnProperty; for(var i in family) { if (hasOwn.call(family, i)) { console.log(i, ":" , family[i]) } } // 上述兩個結果都跟上面，用 hasOwnProperty() 判斷的一樣

不要擴充內建型別的原型

switch

下面模式提升可讀性和穩健性

1
2
3
4
5
6
7
8
9
10
11
12
13

var inspect_me = 0,
    result = '';

switch(inspect_me) {
case 0:
  result = 'zero';
  break;
case 1:
  result = 'one';
  break;
default:
  result = 'unknow';
}

• 將每個 case 與 switch 並排

• 每個 case 內的程式碼縮排

• 用 break; 結束每個 case

• 用 default; 結束 switch，即使沒有任何一個 case 符合

  同系列下篇：JavaScript-Patterns-2012-介紹[1-3]

記錄閱讀 JavaScript-Patterns 2012 書籍（雖然有點舊，但還是值得來看一下～ 🤔
頁碼 p.10 ~ p.15

JavaScript重要觀念

1. JavaScript是個物件導向語言：在JavaScript看到的程式碼，極可能都是個物件。主要有兩種物件：
   • Native（原生物件）
   • Host（宿主物件）
2. 沒有Class
3. 原型：是一個物件，當你建立的每個函式，都會自動取得一個prototype屬性指向一個新的空白物件。每個函式都有prototype屬性

Read More

注意！window.onresize只能在專案中一處進行引用觸發，觸發後通過元件間通訊進行觸發。

1. 在 data 定義一個記錄寬度的屬性

1
2
3
4
5

data () {
  return {
    myWidth: window.innerWidth + 'px'
  }
}

2. 將reisze事件，在mounted()時去掛載

1
2
3
4
5
6
7
8

mounted() {
  const self = this
  window.onresize = () => {
    return (() => {
      self.myWidth = window.innerWidth + 'px'
    })()
  }
}