[JQuery] jQuery 基本語法

• trim - 去除字串前後的空白
  

  先取得 input name=test 的值,利用 trim 將值的前後空白刪除,然後把值丟給 name=test1 的欄位.

  
  

  
  

  var str=$(\':input[name=test]\').val();
  
  str=jQuert.trim(str);
  
  $(\':input[name=test1]\').val(str);

  
  

• attr - 取得物件中某個成員的值或寫入值
  

  attr(name)：取得值。
  
  attr(properties)：將值寫入符合定義的物件。

  
  

  
  

  $(\'#test\').attr(\'id\')      //取得 id (結果:test)
  
  $(\'.test\').attr(\'class\')   //取得 class (結果:test)
  
  $(\'.test\').attr(\'href\')   //取得 class=test 的連結

  
  

  
  

  attr(key,fn)：在符合定義的物件加入 key 與經過 function 後得到的值
  
  將每個圖檔加入 title：

  
  

  
  

  $(document).ready(function(){
  
      $(\"#check\").click(function () {
  
  		$(\"img\").each(function(){
  
  		$(this).attr(\"title\",function(){
  
  		var isrc=$(this).attr(\'src\');
  
  		var iname=dosplit(isrc);
  
  		var e=$(iname).size();
  
  		return (\"圖檔名稱 \"+iname[e-1]);
  
  		});
  
  		});
  
      });
  
    function dosplit(isrc){
  
    var ss;
  
    ss=isrc.split(\'/\');
  
    return (ss);
  
    }
  
  });

  
  



• val - 取得或寫入表單中某個欄位的值

  
  

  $(\':input[name=test]\').val()   //取得 input name=test 的值
  
  $(\':input[name=test]\').val(20) //將 20 寫入 name=test 的欄位

  
  



• append - 將值附加在特定物件後面
  

  若不是用 html() 或是 text()，要用 HTML 原始碼。
  
  appendTo：將內容複製到另一個指定的物件
  
  將 span 加上
  斷行後，移到 id=test 的物件內（原本 span 內就沒有東西了）

  
  

  
  

  $(\"span\").append(\'
  \').appendTo(\"#test\");

  
  



• size & length - 取得某個元件的個數
  

  寫法有一點不同。計算 div 物件的個數：

  
  

  
  

  var a=$(\"div\").length;
  
  var a=$(\"div\").size();

  
  



• get(index) - 取得某個物件的內容
  

  如果內容被擷取並放置到另一個物件中，原內容將被清空。
  
  index 可以用 index() 語法得到（利用 index(this)可以知道目前選擇物件的index 值）。

  
  


• html - 擷取或寫入某個物件 html 的內容
  

  html()：擷取第一個符合定義物件的內容
  
  html(val)：寫入所有符合定義物件 html 的內容（原本的內容會被覆蓋\）
  
  將 id=test 的內容寫入 span 中：

  
  

  
  

  var ss=$(\"#test\").html();
  
  $(\"span\").html(ss);

  
  



• load - 載入其他檔案
  

  要記得加上檔頭（）
  
  load( url, [data], [callback])

  
  

  
  

  $(\"#test\").load(\'test.html #content img\');  // load test.html 內 ID=content 的 img 到 ID=test 裡面
  
  
  
  $(\"#showroom\").show(\"slow\").load(\"a.htm\",function(){
  
  $(\"#showroom\").append(mytop);
  
  });

  
  

  
  

  若寫成

  
  

  
  

  $(\"#showroom\").show(\"slow\").load(\"a.htm\");
  
  $(\"#showroom\").append(mytop);

  
  

  
  

  這樣 showroom 不會 append 在 mytop (因為上一行已經 show 了)，所以在 load 的時候,一起執行append。

  
  


• wrap - 在符合定義物件上圍上一個指定的 html 或是屬性物件
  

  wrap(html)、wrap(elem)。addClass 只能加入 class，wrap 可以加入 html。

  
  

  
  

  $(\"#test\").wrap(\"
  \");
  
  $(\"#test\").wrap(document.getElementById(\'side_test\'));

  
  



• clone - 複製定義物件的內容到另外一個物件


• 抓取正規表示式得到的資料範例

  
  

  var kk=/([A-Za-z0-9_\\-.]+)\\@([A-Za-z0-9_\\-.]+)\\.([A-Za-z][A-Za-z\\-.]{2,5})/g;
  
  var reg=new RegExp(kk);
  
  var myreplace=\'$1@$2.$3\';