jQuery 基本介紹 @ 飛翔部落 :: 痞客邦 PIXNET ::

Bookmark:

簡介:
jQuery是一套強大的javascript lib,它可以利用簡單及簡短的語句做出很多效果,
像是ajax dom css 都可以很簡單的使用

基本使用介紹:
注意:下面所講的只是基本的使用介紹,往後會慢慢介紹詳細一點

一. 啟用jquery
注意:所有的jQuery程式碼必須些在這裡面
a.
$(document).ready(function(){
將jQuery 程式碼寫在這
});
b.
$(function(){
將jQuery 程式碼寫在這
});
說明:可以使用a或b的方法開始使用jQuery

二. 利用jQuery 抓取ID或NAME 的物件
注意:此為不是完整的句子,只是先說明抓取id或name的方式,必須搭配後面事件使用
a.
$("a")
說明:此為抓取所有的<a></a>物件,可以為$("p")...之類的
b.
$("#div_id")
說明:此為抓取指定的ID
c.
$("input[@name:xxx]")
說明:此為抓取名為xxx的input物件,物件可以為radio或checked...之類的
d.
$("input[@type=checkbox]")
說明:此為抓取type=checkbox的物件

三. javascript的事件
注意:此為使用jQuery做javascript的觸發事件,像是click...之類的
a.為物件加上click事件
$("a").click(function(){
alert("Thanks for visiting!");
return false; // <-- 回傳 'false' 使連結不做跳換頁
});

四.DOM操作
a.隱藏物件
$('物件').hide('slow');
b.顯示物件
$('物件').show('slow');
說明:'slow' 表示緩慢,可以為空白

c.加入一段html碼至...
$("<div><p>Hello</p></div>").appendTo("body");
說明:在<body>裡加入一段html碼
結果:<body>加入<div><p>Hello</p></div></body>

$("物件").html()
說明:取得物(div)裡的html

$("物件").html("<div><p>Hello</p></div>")
說明:將該物件(div)裡的html改為<div><p>Hello</p></div>

五. AJAX
$.ajax({
     type: "POST",
     url: 'xxx.php',
     data: 'data=value',
     success: function(msg){
         alert(msg);
     }
});
type:傳輸方式,
url:位置,
data:傳送的值,
success:成功回傳後
說明:此為簡單的 ajax使用方式

六. CSS
a.為物件加入css碼
$(document.body).css( "background", "black" );
說明:為<body>加入背景為黑色的css碼