jQuery 入門

載入 jQuery

要用 jQuery 的話只要在 head 加入這行,如果是html5甚至連 type="text/javascript" 都不用寫

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

更安全的辦法在本地也放一份

<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js"><\/script>')</script>

jQuery 可以很簡單的對 DOM 操作

選取的方式跟 CSS 選擇器一樣
只是是下面這樣的形式
$(“#id")
$(“.class")
這樣用 $(“") 包住

當然也有
$(“.class li")
這樣的用法
不過可以寫成
$(“.class").find(“li")
這樣速度更快

——————–

jQuery 允許一連串的操作因為每次都會回傳 this

$("#id").first().next().last().prev();

first() // 第一個子元素
last() // 最後一個子元素
next() // 下一個同輩
prev() // 上一個同輩
childern() // 所有子元素
parent() // 父元素

closeset() 則可以用來找上面被選擇器選到最接近的父元素
例如

$(this).closeset(".choose").remove();

———

var addition = $("

yooooooo

“);

append(addition) // 把yoo加在後面變成最後一個子元素
prepend(addition) // 把yoo加在前面變成第一個子元素
after(addition) // 把yoo加在後面變成同輩
before(addition) // 把yoo加在前面變成同輩

反過來則是
addition.appendTo()
addition.prependTo()
addition.insertAfter()
addition.insertBefore()

效果一樣只是主詞受詞交換

————-

event handler


$(document).ready(function() {
   $(".target").on('click', 'button', function() {
      event.preventDefault(); // 防止 bubble up
      // code
   })
});

可以選擇"某個範圍"裡面的"某個元素"接受"某個事件"執行"某個動作"

事件的種類很多,有滑鼠事件、鍵盤事件、表格事件
Mouse Events:
click, dblclick, focusin, focusout, mousedown, mouseup, mousemove, mouseout, mouseover, mouseleave, mouseenter

Keyboard Events:
keypress, keydown, keyup

Form Events:
blur, focus, select, submit, change

———-

*Tackling HTML

可以用 data(“price") 去取值

—-
show() //出現
hide() //隱藏
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出
slideUp() //滑上
slideDown() //滑下
SlideToggle() //滑上滑下
addClass //增加類別
removeClass //移除類別
toggleClass //增加移除類別

也可以控制 CSS

$(this).css({'background-color': '#252b30',
'border-color': '1px solid #967'});
$(this).animate({'top' : '-10px'}, 'slow');

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s