【JS基礎】
1.JS如同寫HTML內容一樣直接寫在Body直間即可，如果JS不做輸出處理，則可以寫在head之間
2.<!-- (JS 代碼) //--> 當瀏覽器不支持JS時將不被執行、其他時候不受影響
3.JS可以同時聲明多個變量：var b , c ;
4.JS常用觸發事件
onClick 點擊事件
onChange 改變內容事件
onBlur 失去焦點
onFocus 獲得焦點
onSubmit 點擊submit按鈕
onMouseOver 獲得鼠標
onMouseOut 離開鼠標
Onload 自動載入（一般在body中）
1.<script type="text/javascript" src="jquery-1.9.1.js"></script>
2.Jquery基礎語法：$(selector).action() 【代碼A01.html】
說明：$符號定義 jQuery，選擇符（selector）HTML 元素，jQuery 的 action() 執行對元素的操作
舉例：
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有<P>
$(".test").hide() - 隱藏所有 class="test" 的段落
$("#test").hide() - 隱藏所有 id="test" 的元素
3. $(document).ready(function(){
--- 相關代碼----
});
//函數的相關載入類似window.onload ，但又有區別
-
Jquery選擇器的各種用法
$(this) 當前元素
$("p") 所有<p>元素
$("input") 所有input元素
$(".intro") 所有 class=“intro” 的元素
$("p.intro") 所有 class="intro" 的<p>元素
$("#intro") id="intro" 的第一個元素
$("ul > li") ul下的所有li節點
$("ul li:first") 每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']") 所有帶有以 ".jpg" 結尾的 href 屬性的屬性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$(li[a:contains('Register')]") 內容包含Register的<a>元素
$("input[@name=bar]") name是bar的<input>元素
$("input[@type=radio][@checked]") type是radio的<input>元素
$(“li”).not(“ul”) li下沒有包含ul節點的節點元素
$("span[@id]") 所有包含id屬性的<span>元素
$("[@id=span1]") 所有id爲span1的節點元素
-
Jquery事件器的介紹
基本用法： $(元素). 事件( 事件屬性);
常見事件：
$(selector).click() 被選元素的點擊事件
$(selector).dblclick() 被選元素的雙擊事件
$(selector).focus() 被選元素的獲得焦點事件
$(selector).mouseover() 被選元素的鼠標懸停事件
$(selector).css(); 被選元素的CSS事件
$(selector).hide(); 被選元素的隱藏事件（可傳參fast/slow，下同）
$(selector).show('slow'); 被選元素的顯示事件
-
Dom節點操作
$(“a”).addClass(“red”) 爲所有<a>增加class=”red”
$(“a”).removeClass(“red”) 爲所有<a>去掉class=”red”
$(“li”).append(“BB!”) 爲<li>增加”BB!”innerHTML
-
執行事件
//hover是在執行完第一個函數後再執行第二個 $(“p”).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); //toggle第一次點擊執行第一個函數，再點擊執行第二個 $(“p”).toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); });【代碼】https://github.com/rxbook/study-jquery-2/tree/master/JQ04