JQuery 初探

JQuery：javascript library
主要在處理DOM文件操作.
主要功能：快速選取元素並對元素做處理
有許多plugin

選取範例：

$("div").addClass("classname");

$("div");

$("#body");

$("div#body");

$("div.classname p");

$("div > div");

$("div:has(div)");

對選取元素做處理：

$("a[target]").append("(some words)");
<a href="" target="_top"> some words </a>

$("#body").css({
border: xxx;
heifht: xxx;
});
修改css屬性.

$("form").submit(function(){
if ($("input#username").val()=="")
$("span.help").show;
});
表單送出前判斷username欄位，是否為空值，如為空值則出現help區的文字.

$("a#open").click(function(){
$("#menu").show();
return false;
});
點選id為open的連結，顯示id為menu的區域，傳回false，避免真的換頁.

$("#menu").slideDown("fast");
將id為menu的區塊以下拉式快速顯示.

$("div").animate({
width:'300',
padding: '20px'
},'slow');
將所有div漸漸變為 width 300 , padding 20

$("div").hide(500,function(){
$(this).show(500);
});
所有div以0.5秒動態隱藏，再以0.5秒動態顯示

$("#body").load("sample.html div > h1");
將sample.html裡的div下的h1的內容加入目前文件id為body的元素內.

$.getJSON("test.json",function(data){
for(var idx in data)
$("#menu").append("<li>+data[idx]+"</li>);
});
test.json檔案內容
[
"hello","world!"
]
透過getJSON()取得JSON格式資料

$("div").hide().css("color","blue").slideDown();
連續使用函數

find()
根據之前找到的元素再找裡面的元素

end()
回上一層所選擇的元素

$(document).ready(function(){
alert('Welcome!!');
});
較windows.onload優先執行.
且不需等文件內所有元件(如圖片)下載完就可執行.
也可
$(function(){
alert('Welcome!!');
});

防止 $() 與其他library相衝
jQuery.noConflice();
jQuery(document).ready(function(){
jQuery("div").addClass("classname");
});
或是另設別名
var $j = jQuery.noConflict();
$j(document).ready(function(){

$j("div").addClass("classname");
});