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 加上 <br> 斷行後，移到 id=test 的物件內（原本 span 內就沒有東西了）

$("span").append('<br>').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 - 載入其他檔案

要記得加上檔頭（<meta http.......>）
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("<div class=new></div>");
$("#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='<span class=hilite><a href=mailto:$1@$2.$3>$1@$2.$3</a></span>';

From：《網頁設計，愛上jQuery》ISBN:978-986-6850-844

Please follow and like us: