[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';