JQuery兩種載入方法
1.官網下載檔案後放網站資料夾下:http://jquery.com/download/
2.用網址去抓最新JQuery:https://developers.google.com/speed/libraries/devguide#jquery
用第一種好處是不怕版本更新後,有些特殊語法不能過的問題,但用第二種可以確定你JQuery是最新版
JQuery運作
JQuery運作很簡單:找元素>找事做>有方法做細項
首先是找元素,開頭宣告有兩種
jQuery("element");
$("element"); <<很多人用這個,因為很懶打英文
接著是找事做,以下舉常見例子
我們知道網頁是由上往下讀取,那同樣是寫在js位置的JQuery,如果沒有去做處理的話可能會發生錯誤( 例如$("p"); )
因此要用ready事件告訴網頁,我要等你載入DOM(Document Object Model)完成後才執行這段
DOM是什麼? 就<!DOCTYPE html>這東西,所以document是指HTML這份文件
$(document).ready(function(){
.....
});
最後是有方法做細項,那我們再拿上個例子補些內容
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
this用法跟js一樣,只差寫法不同
this.event(); <<js寫法,指被執行element
$(this).event(); <<jquery寫法,指被執行element
我會特意用document和this是因為只有這兩個不用" "或' '框住就算選取(大概記一下就好了)
JQuery Selectors
前面我們說簡單$("element"),但其實有好幾種選取法,以下為常用
$('elementA' 'elementB_all') 選取元素A底下所有元素B
$('father_element' > 'son_element') 選取元素A底下一層有元素B
$('element1','element2'...) 選取元素1和元素2
其他更多用法:http://www.w3schools.com/jquery/jquery_ref_selectors.asp
JQuery Event Methods
有很多不錯用event,但真正好用是on method,以下是格式
$('element').on(event,element,data,function,map....)
舉個例子
$('.vacation').on('click','button',function(){...});
上方等於下方寫法
$('.vacation button').click(function(){....})
把on想成是條件的話可以讀為要在click事件,對應的是button子元素才執行function()
其他更多用法:http://www.w3schools.com/jquery/jquery_ref_events.asp
JQuery Miscellaneous Methods
利用data method方便改參數,以下為格式
.date(name,value可省略) <<在$('element')
data-name <<在標籤內呼叫
再來舉個例子,先看js部分
$("#btn1").click(function(){
$("div").data("greeting");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
接著在純顯示的標籤內呼叫
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div data-greeting='399'></div>
data方法參考網址:http://www.w3schools.com/jquery/misc_data.asp
JQuery Html/CSS Methods
js既然能改css參數,那JQuery也可以改,以下為格式
$('element').css('attr','value'可省略);
如果要設多個css屬性,格式為
$('element').css({'attr1':'value1','attr2':'value2'...});
css()參考網址:http://www.w3schools.com/jquery/css_css.asp
留言列表
線上遊戲 (4)
