菜鳥工程師訓練營

網頁一碰到<script>區塊就會直接執行
所以如果要網頁樣式都呈現才要執行js要寫$(document).ready(function(){});

※要先放css再引用script
因為script會用到css

選擇器

class選擇器
$('.className')
ID選擇器
$('#IDName')
元素選擇器
document.getElementByTagName('a'); == $('a')
後裔選擇器
$('#navbar a')
選擇被id=navbar包住的<a>

子選擇器
$('body > p')
body的子元素

相鄰選擇器
$('h2 + div')
右邊是選擇對象，他的前一個節點必須是左邊的選擇器

屬性選擇器
$('img[alt]')
[attribute]:$('a[href]')
[attribute="value"]:$(input[type="text"])
[attribute^="value"]:$('a[href^="http://"]')
以特定值開頭的元素(不用完全相符)
[attribute$="value"]:$('a[href$=".pdf"]')
選出以特定值結尾
[attribute*="value"]:
選出中間有特定值

過濾器
:even可以選取集合中雙數位置的元素index=0,2,4,6 所以是第1,3,5,7個元素
:odd單數
:first 、:last 選出網頁第一或最後一個元素

:not():選出不符合選取器的元素
$('a:not(.navbutton)')
$('a:not([href^="http://"])')

:has():選出內有其他選擇器的元素
$('li:has(a)')

:contains():選出帶有特定文字的元素
$('a:contains(Click me!)')

:hidden() :visible()找出隱藏或可見的元素
不適用visibility設為invisible的元素

更多範例:
http://api.jquery.com/category/selectors/

增加內容到網頁
$('#zzz').html()  可以取得符合條件的第一個元素內容
$('#zzz').html('XXXX') 會改變所有符合條件的元素(連標籤都取代)
$('').text():只會改變元素內容，不會改變標籤

$('').append():插入最後一個子元素到被選取的元素
$('').prepend():
$('').after():插入元素在被選取的元素後面，可以用在表單輸入提示錯誤訊息
$('').before():同上但插在元素前
$('').remove():移除某個元素

$('').addClass():新增樣式  但使用名稱就好不用加.

$('').removeClass():移除class

$('').toggleClass():沒有就套用，有就移除 類似開關的概念

讀取跟改變css

var color=$('').css('background-color')

可以查詢css設定的,但是顏色的話就只會拿到rgb(255,10,10,5)這樣的值

$('.aa').css('font-size','50px');可以用來設定css樣式
前面是屬性名稱 後面是值

可以一次設定好幾個css

物件實字Object literal

{'background':'#FF0000',

'border':'2px solid #FE0037'}

$('.aa').css({'background':'#FF0000','border':'2px solid #FE0037'});

 

讀取設定跟刪除html屬性

$('').attr('src'):可讀取特定html屬性

$('').attr('src','123.jpg'):可以設定元素屬性

$('').removeAttr():刪除屬性

巡覽每個元素與不具名函式

$('selector').each(function(){

//程式寫在這

});

this VS $('this')

this指向傳統DOM元素 

$('this')是專門給jquery函式用