[JQuery]第一次學JQuery就上手

/*基礎篇*/
var ←宣告
範例:
var aaa, ←宣告可直接給予初始化，或單純宣告，多筆請用逗點
$ss=&('#ss');   ←給予初始化，結尾請加分號

/*取得網頁中元素、區塊等*/

取得元素的基本方法有三種
取HTML標籤、取ID、取Class

<img class='book' id='bookimg' name='img1'>
範例:
$('img') ←取HTML標籤
$('.book')←取class
$('#bookimg') ←取ID
  $('img[name="img1"]') ←標籤＋屬性
※以上四個皆可取得同一個元素
進階:
<div>
<imp class='book' id='bookimg'/>
<imp class='book' id='bookimg'/>
<imp class='book' id='bookimg'/>
<input class='book' id='test' />
</div>
<p>
<imp class='book' id='bookimg'>
<imp class='book' id='bookimg'>
<imp class='book' id='bookimg'>
</p>

$('img') ←取HTML標籤 可取得6個元素(陣列)
$('div').find('img') ←取得div下的所有img，共3個元素
$('div').find('.book') ←取得div下的class是book的，共4個元素
/*常用函數*/

.size(); ←取得筆數
.html(); ←取得下層所有內容，回傳文字型態
.html('xxxx'); ←設定下層內容，設定內容包含HTML格式的話，將會已HTML呈現
.text(); ←取得下層所有文字(去除HTML標籤)
.text('<a href="#">OOO</a>') ←此種設法會將這定的值，以字串方式呈現
.attr(); ←取得屬性
.attr('','');                 ←設定屬性
.css('',''); ←設定CSS
.addClass(''); ←增加Class
.removeClass(''); ←移除Class
//-----------------------------------
範例:
<div id='book' >xxxxxx</div>
<div id='book1' value='20'>xxxxxx</div>
<div id='book2' class='newbook'>xxxxxx</div>

$('div').size(); ←取得本頁div的數量，結果為3
$('#book').html(); ←取得ID=book下的內容 xxxxxx
$('#book').html('OOO'); ←更改ID=book下的內容<div id='book'>xxxxxx</div> 變成 <div id='book'>OOO</div>
$('#book1').attr('value'); ←取得value屬性，值為20
$('#book1').attr('value',30); ←設值，沒有的屬性也可以加給他，<div id='book1' value='30'>xxxxxx</div>
$('#book2').removeClass('newbook').addClass('oldbook'); ←移除newbook，增加oldbook
$('#book').css('color','#FF3E96'); ←修改CSS內容
$('#book').html('xxx').addClass('oldbook').attr('value',111).css('color','#FF3E96') ←可以寫在同一行
/*事件
請參考 http://webdesign.kerthis.com/jquery/jquery_events
*/
範例:
<img src='1.png'/>
$('img').click(function() { //增加圖片的滑鼠單擊事件
alert($(this).attr('src')); ←在function裡使用$(this)表示觸發的元素，此範例為顯示圖檔網址
});