簡介:
 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碼

創作者介紹

飛翔部落

shian0745 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 學弟
  • 學長的精美教學!!

    好精美的教學 本來不懂 JQuery 的我
    一下就會搞懂了 就好像被高手打通任督二脈一樣啊!!