JQuery 筆記

作者:admin 日期:2008-01-12

字體大小: 小中大

參考資料：jQuery API Rerence http://docs.jquery.com/Main_Page

程序代碼

選擇器(Selectors) (more:http://docs.jquery.com/Attributes)

$("#div01"); /* document.getElementById("div01"); */
$("a[@name]").addClass("bg_green");
尋找有name屬性的 <a />。
$('#div01 > p:first').addClass('red');
尋找<div id='div01'>下的第一個<p />，first, last, 空就是全部的

屬性(Attributes) (more:http://docs.jquery.com/Attributes)

$("#div01").addClass('red'); /* document.getElementById('div01').className='red'; */
$("#div01").css("border", "1px solid black");

其它

在每一行後面加上文字

程序代碼

$("#div01 ").find("p").each(function(i) {
$(this).html( $(this).html() + " 加註(" + i + ")" );
});

事件(Evnets) (more:http://docs.jquery.com/Events)

當mouse移過第一行時底色會變。

程序代碼

$(document).ready(function() {
$('#div01 > p:first').hover(
function() {$(this).addClass("bg_green");},
function() {$(this).removeClass("bg_green");}
);

當mouse移過每一行的<a/>時底色會變。

程序代碼

$("a").hover(
function() {$(this).parents("p").addClass("bg_red");},
function() {$(this).parents("p").removeClass("bg_red");
});

參考：http://www.k99k.com/jQuery_getting_started.html

[本日誌由 admin 於 2008-01-12 03:52 PM 編輯]