Learn in FCC(5)
第三章 jQuery
沒想到在講js之前就先來個jQuery。
1.$(document).ready(function(){});。
2.$("button").addClass("animated bounce");給按鈕加彈跳動作。 jQuery可以給元素加class。Animate.css,原來class還能讓元素動起來。
3.addClass("animated shake");加振動class。同時加彈跳和振動,元素就會比較立體的動起來。
4.$("#target6").addClass("animated fadeOut");id選擇器。淡出動作。這裡我忽然有個疑問,為什麼要用加類來實現淡出,而不是使用fadeOut()方法?按說後者使用時可以加引數,會更靈活一些。而且太多的使用類感覺會很亂。
5. 過多的動作會喧賓奪主,刪除之前所加的動作類。
6. 多種選擇器,元素,類,id等。jQuery選擇器基於已經存在的
7.$("button").removeClass("btn0default");就像新增類那樣,同樣可以刪除類。
8.$("#target1").css("color","red");呼叫jQuery方法來改變元素的css式樣。
9. $("target1").prop("disabled", true);呼叫jQuery方法來修改元素屬性。
10.$("target4").html("<i>#target4</i>")。html()方法可以將元素的文字內容替換為其他元素和文字。而text()方法只會改變文字。
11.$("target4").remove();remove()方法會將元素整個移除掉。
12. $("target2").appendTo("#right-well");appendTo()方法可以將一個元素轉移到另一個元素中。
13.$("target5").clone().appendTo("#left-well");clone()函式可以建立一個元素的克隆。(我忽然覺得對於js來說,把function叫作函式可能會更好一些。)function chaining,函式鏈。
14. $("#target1").parent().css("background-color", "red");呼叫parent()函式來訪問一個元素的父元素。
15.$("#right-well").children().css("color","green");呼叫children()函式來訪問一個元素的子元素。
16. $(".target:nth-child(2)").addClass("animated bounce");這裡說到了利用css選擇器來選擇特定的一個子元素。
17 $(".target:odd").addClass("animated shake");給子元素中的奇數序列新增振動動作。由於js中的陣列是從0開始的,所以其實是第2,4,6..個子元素。與之相對的是":even",偶數序列。
18.$("body").addClass("animated hinge");可以選擇整個body元素。hinge動作,元素掉下來。
至此,3個小時的jQuery入門算是做完了。感覺堅持做了好多天,但其實到現在才完成了13小時,想想一共800小時,真是覺得遙不可及的。