簡介:
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碼
好精美的教學 本來不懂 JQuery 的我
一下就會搞懂了 就好像被高手打通任督二脈一樣啊！！
您好，小弟參考您這篇學習
不過還有一點不解之處
如果我想取用jQuery的object 去進行原本javascript 物件的事時好像不行說
例如我有個input text的object id為 myid
如果我 $(‘#id’).value 是會javascript error的 要如何取用呢?
你好~
如果是在portotype裡這樣寫是沒問題的，但在jquery裡這樣寫是會錯誤的
正確應該是：
$(‘#id’).val();
^^ 謝謝啦!! 看來還要再多熟悉語法才行
您好，謝謝你在我的blog 給建議:
不過有點不解
「我在1.2.6版本有用過 [@checked] 這種方式取值,但似乎不行了, 以前是可以這樣取值的」
不太懂 是指1.2.6版之後就不行這樣用了嗎?
我目前是1.2.6，測過 是可以這樣用說~^^
哈….我發現是我看錯了 XD
真是不好意思