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

 

創作者介紹
創作者 o迷苓o 的頭像
o迷苓o

~米漿牛奶~

o迷苓o 發表在 痞客邦 留言(0) 人氣()