jQuery – 記下來 https://noter.tw 一路上踩到的坑、遇到的問題，一點一滴記下來，希望能幫助到需要的人~ Wed, 04 Dec 2019 01:23:05 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.6.3 https://noter.tw/wp-content/uploads/cropped-old-1130742_1920-1-32x32.jpg jQuery – 記下來 https://noter.tw 32 32 jQuery $(document).ready() https://noter.tw/2301/jquery-document-ready/ https://noter.tw/2301/jquery-document-ready/#respond Tue, 25 Sep 2012 14:05:22 +0000 http://wazai.net/?p=2301 前陣子跟新同事聊天的時候聊到，$(document).ready(function(){}});的問題，有同事就舉了個例子來說明，其實小蛙沒有真正去研究過為什麼要寫這個，只知道「寫了比較保險」，聽過例...

這篇文章 jQuery $(document).ready() 最早出現於 記下來。

]]> 前陣子跟新同事聊天的時候聊到，$(document).ready(function(){}});的問題，有同事就舉了個例子來說明，其實小蛙沒有真正去研究過為什麼要寫這個，只知道「寫了比較保險」，聽過例子之後恍然大悟，原來有這麼一層原因在。 

$(document).ready(function(){}});
用最最白話的方式來說，就是說當整個HTML元素都被載入之後，才開始做以下動作。咦？還是覺得不重要？同事舉了一個簡單的例子 
<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      alert($('#mydiv').text());
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

上面的例子執行後會發現，alert出來空白的東西，並不符合我們的預期，預期應該要印出mydiv的字樣。如果把alert包在$(function(){}});裡面試試 

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(function(){alert($('#mydiv').text());});
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

就如同預期的印出 mydiv 字樣了！會造成這個結果的原因是，head部分的JS程式碼在整個網頁還沒完整載入前就已經先執行，因此找不到 mydiv 這個 DOM 元素，而將alert程式碼放在 $(function(){}); 之中，等到整個網頁元素載入完成後才執行，自然就可以找到 mydiv 這個元素而印出當中的值了。其實這部分應該算是JavaScript基礎班，小蛙真是覺得不太好意思。

附帶一提，小蛙為什麼有時候忘記加$(function(){});也還是可以正常執行呢？是因為小蛙習慣把JavaScript寫在網頁的最後，如果沒有”意外”的話，會是可以正常執行的(寫$(function(){});是好習慣！記下來吧！)。例如： 

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>
<script type="text/javascript">
  alert($('#mydiv').text());
</script>

另外在 jQuery官網 中提到

All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

也就是說$(document).ready(function(){}); 可以縮寫成 $(function(){}});，這兩個是一樣的意思(既然一樣，為什麼不選短的來用呢 @@?)

更多內容可參考 jQuery 官網 或 此討論串。

這篇文章 jQuery $(document).ready() 最早出現於 記下來。

]]> https://noter.tw/2301/jquery-document-ready/feed/ 0 Javascript用RegExp達成trim() https://noter.tw/2475/javascript%e7%94%a8regexp%e9%81%94%e6%88%90trim/ https://noter.tw/2475/javascript%e7%94%a8regexp%e9%81%94%e6%88%90trim/#respond Mon, 14 Mar 2011 07:33:47 +0000 http://wazai.net/?p=2475 Java 中有個功能叫做 trim()，當字串中前後可能會有空白字元的時候，可以透過 trim() 來去除，小蛙使用 JavaScript 的時候發現沒有這個功能，Google 一下找到一篇文章講解怎...

這篇文章 Javascript用RegExp達成trim() 最早出現於 記下來。

]]> Java 中有個功能叫做 trim()，當字串中前後可能會有空白字元的時候，可以透過 trim() 來去除，小蛙使用 JavaScript 的時候發現沒有這個功能，Google 一下找到一篇文章講解怎麼實作一個 JavaScript trim 功能，後來同事說：「為什麼不用 jQuery.trim(str) 就好了？」@_@ 小蛙開發 web 都會使用到 jQuery，不過這篇文章既然打好了，就還是留下來囉！

直接上程式碼，下面分成清除左邊空白、清除右邊空白，在合併成清除左右空白。

// 去除左邊空白
function lelftrim ( terms ) {
    return terms.replace ( /^[\s]*/gi, "" );
}
// 去除右邊空白
function righttrim ( terms ) {
    return terms.replace ( /[\s]*$/gi, "" );
}
// 去除左右空白
function trim ( terms ) {
    terms = lefttrim ( terms );
    terms = righttrim ( terms );
    return terms;
}

Regex 說明

/^[\s]*/gi
\s：會產生空白的字元，ex. ” “(空白)、”\t”、”\n”、”\x0B”、”\f”、”\r”
^[\s]：空白字元開頭的字串 (意思同於左邊有空白字元)
^[\s]*：0 個以上空白字元開頭的字串
g：global
i：case insensitive
/[\s]*$/gi
[\s]*$：0 個以上空白字元結尾的字串 (意思同於右邊有空白字元)
參考資料 Javascript function : trim() – 自訂
更多正則表示式可參考 Java Regular Expression的學習筆記 [精華] 很詳細唷！如果開發上都會直接使用 jQuery 的話，就直接使用 jQuery.trim(str) 方法就好囉！
參考資料：

  1. jQuery.trim() @ jQuery
    http://api.jquery.com/jQuery.trim/
  2. Java Regular Expression的學習筆記 [精華] @ JWorld@TW
    http://www.javaworld.com.tw/jute/post/view?bid=20&id=130126&sty=1&tpg=1&age=0
  3. Javascript function : trim() – 自訂 @ Rox
    http://www.dotblogs.com.tw/rox/archive/2008/04/10/2753.aspx

這篇文章 Javascript用RegExp達成trim() 最早出現於 記下來。

]]> https://noter.tw/2475/javascript%e7%94%a8regexp%e9%81%94%e6%88%90trim/feed/ 0