web初學者必看（純乾貨）

    學習前端知識也有一段時間了，不知道你們的感受是什麼，老實說我感覺還挺好玩的，可能是我比較喜歡享受那種成就感，隨便做出個動畫什麼的，就特別高興。但也不能高興太早學到這裏也只是剛剛入門，不管怎麼樣都要堅持下去，自己選擇的路，再難也得走完。下面一些呢是我學JQ所做的一些筆記，可能寫的不是特別好，總結的也沒有那麼到位，不要介意，我也就是隨便記記（來自菜鳥的小記）。

1.  jquery與Java script的區別

    通過原生的JS入口函數可以拿到DOM元素,通過原生的JS入口函數可以拿到DOM 元素的寬高；通過jQuery入口函數可以拿到DOM元素,通過jQuery入口函數不可以拿到DOM元素的寬高
     原生JS和jQuery入口函數的加載模式不同： 原生JS會等到DOM元素加載完畢,並且圖片也加載完畢纔會執行； jQuery會等到DOM元素加載完畢,但不會等到圖片也加載完畢就會執行
    原生的JS如果編寫了多個入口函數,後面編寫的會覆蓋前面編寫的。

2.  jquery的入口函數的寫法：

$(document).ready(function(){
})
jquery(document).ready(function(){
})
推薦的寫法:
$(function(){
})
jquery(function(){
}）

2.1  如何解決jQuery的兼容問題

        當$ 是多個框架都使用的符號時，可以釋放jQuery的使用權:
                                                                                        jquery.noConflict();
        1.釋放的使用權
                注意點: 釋放操作必須在編寫其它jQuery代碼之前編寫
釋放之後就不能再使用$,改爲使用jQuery
         2.可以選擇自定義一個訪問符號，例：
                                                                                        var !=jquery.noConflict();

2.2   jquery的核心函數的簡要介紹

         $()就代表調用jQuery的核心函數，用法：

1.接收一個函數
2. 接收一個字符串
     2.1 接收一個字符串選擇器
           返回一個jQuery對象, 對象中保存了找到的DOM元素
     2.2接收一個字符串代碼片段
          返回一個jQuery對象, 對象中保存了創建的DOM元素
3. 接收一個DOM元素並且會被包裝成一個jQuery對象返回給我們
     jquery對象是一個僞數組，僞數組是指含有0到length-1的元素, 並且有length屬性
holdready()方法用於暫停jq入口函數的執行，true爲暫停，false爲取消暫停

3.  常用的方法介紹：

3.1  靜態方法和實例方法的區別：

      靜態方法是由類創建，由類名調用
      實例方法是添加這個類的原型對象中的方法，由這個類的對象調用

3.2    jQuery中的each靜態方法和map靜態方法的區別:

• each靜態方法默認的返回值就是, 遍歷誰就返回誰
  each靜態方法不支持在回調函數中對遍歷的數組進行處理

• map靜態方法默認的返回值是一個空數組
  map靜態方法可以在回調函數中通過return對遍歷的數組進行處理, 然後生成一 個新的數組返回

3.2.1  each方法與foreach方法的區別與聯繫：

    都可以訪問數組，each可以訪問僞數組，而foreach不可以訪問僞數組
     原生中的map與foreach一樣，JQ中的each與JQ中的map一樣

4.  屬性和屬性節點：

    什麼是屬性?
      對象身上保存的變量就是屬性
    如何操作屬性?

1. 對象.屬性名稱 = 值;

2. 對象.屬性名稱;

3. 對象[“屬性名稱”] = 值;

4. 對象[“屬性名稱”]

    什麼是屬性節點?
          在編寫HTML代碼時,在HTML標籤中添加的屬性就是屬性節點
          在瀏覽器中找到這個DOM元素之後, 展開看到的都是屬性
          在attributes屬性中保存的所有內容都是屬性節點

     如何操作屬性節點?（JS的函數）
          DOM元素.setAttribute(“屬性名稱”, “值”);
          DOM元素.getAttribute(“屬性名稱”);
     屬性和屬性節點有什麼區別?
          任何對象都有屬性, 但是隻有DOM對象纔有屬性節點

5.   Jquery的函數

5.1   attr與prop的區別：

attr(name|pro|key,val|fn)
prop(name|pro|key,val|fn)
      作用: 獲取或者設置屬性節點的值
               可以傳遞一個參數, 也可以傳遞兩個參數
               如果傳遞一個參數, 代表獲取屬性節點的值
               如果傳遞兩個參數, 代表設置屬性節點的值
注意點:
               如果是獲取:無論找到多少個元素, 都只會返回第一個元素指定的屬性節點的值
               如果是設置:找到多少個元素就會設置多少個元素
               如果是設置: 如果設置的屬性節點不存在, 那麼系統會自動新增

5.2   removeAttr(name)與removeprop(name)

   刪除屬性節點
注意點: 會刪除所有找到元素指定的屬性節點
注意點: prop方法不僅能夠操作屬性, 它還能操作屬性節點
            官方推薦在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

6.   jquery的操作：

6.1   操作類：

	1.addClass(class|fn)
            作用: 添加一個類
            如果要添加多個, 多個類名之間用空格隔開即可
    2.removeClass([class|fn])
            作用: 刪除一個類
            如果想刪除多個, 多個類名之間用空格隔開即可
    3.toggleClass(class|fn[,sw])
            作用: 切換類
            有就刪除, 沒有就添加

6.2   操作文本：

	1.html([val|fn])
  		    和原生JS中的innerHTML一模一樣
    2.text([val|fn])
    		和原生JS中的innerText一模一樣
    3.val([val|fn|arr])            
			獲取表單中數據的值

6.3   操作css樣式方法：

      逐個設置：
            逐個設置寬高時可以帶單位，也可不帶單位
            $(“div”).css(“height”,“100px”);
            $(“div”).css(“width”,“100px”);
            $(“div”).css(“background”,“red”);
      鏈式設置：
            $(“div”).css(“width”,“100px”).css(“background”,“red”).css(“height”,“100px”);
      批量設置：
            設置元素的寬高時不可以帶單位，並且注意設置顏色值要帶上引號

$("div").css({
	background:"red",
	width:100,
	height:100
});		

      獲取css樣式值
注意點：
            css(name) name爲要獲取的css樣式名，若有多個元素匹配，則默認只返回第一個

6.4   操作尺寸和位置:

	width();height();指元素的寬高
	innerWidth();innerHeight();指元素和內邊距的寬高
	outerWidth();outerHeight();指元素和內邊距,邊框的寬高
	outerWidth(true);outerHeight(true);指元素和內邊距,邊框，外邊距的寬高
	offset([coordinates])
          作用: 獲取元素距離窗口的偏移位
         		可以設置元素相對於窗口的偏移量
    position()
          作用: 獲取元素距離定位元素的偏移位  
          		只能獲取不能設置  		
	可以通過DOM元素.width(值)設置元素的寬
	scrollTop方法:
         獲取滾動的偏移位
         console.log($(".scroll").scrollTop());
         獲取網頁滾動的偏移位
             注意點: 爲了保證瀏覽器的兼容, 獲取網頁滾動的偏移位需要按照如下寫法
             console.log($("body").scrollTop()+$("html").scrollTop());
         設置滾動的偏移位
            $(".scroll").scrollTop(300);
         設置網頁滾動偏移位
            注意點: 爲了保證瀏覽器的兼容, 設置網頁滾動偏移位的時候必須按照如下寫法
            $("html,body").scrollTop(300);

7.    事件 ：

7.1  事件的綁定:

        1.eventName(fn);
        	編碼效率略高/ 部分事件jQuery沒有實現,所以不能添加
        2.on(eventName, fn);
        	編碼效率略低/ 所有js事件都可以添加
       	注意點:
       		可以添加多個相同或者不同類型的事件,不會覆蓋

7.2  事件的解綁：

		off方法如果不傳遞參數, 會移除所有的事件
        off方法如果傳遞一個參數, 會移除所有指定類型的事件
        off方法如果傳遞兩個參數, 會移除所有指定類型的指定事件
        	test1爲函數名
        	$("button").off("click", test1);

7.3  事件的冒泡和取消默認行爲:

		1.函數返回return false;既可以阻止事件冒泡，也可以阻止默認行爲的發生
		2.event.stopPropagation();JQ中阻止事件冒泡，JS中該方法不支持IE
		  event.cancelBubble=true;JS中阻止事件冒泡，不用解決兼容性的方法
		3.event.preventDefault();阻止默認行爲的發生

7.4  事件的自動發生：

• trigger:如果使用trigger觸發自動發生事件，則會發生冒泡事件

• triggerHandler:如果使用triggerHandler觸發自動發生事件，則不會發生冒泡事件

• 對於a標籤如果要觸發自動生成事件則應該再a標籤中寫一個span，否則使用trigger與triggerHandel效果一樣
  不會阻止冒泡的發生

7.5  自定義事件:

事件命名空間:(必須滿足兩個條件)
       1.事件必須是通過on綁定的
       2.事件必須通過trigger/triggerHandel來觸發

利用trigger觸發子元素帶命名空間的事件, 那麼父元素帶相同命名空間的事件也會被觸發. 而父元素沒有命名空間的事件不會被觸發

利用trigger觸發子元素不帶命名空間的事件,那麼子元素所有相同類型的事件和父元素所有相同類型的事件都會被觸發

7.6  事件的委託：

    首先了解一下什麼是事件的委託，意思就是說請別人幫忙做事情, 然後將做完的結果反饋給我們在jQuery中,如果通過核心函數找到的元素不止一個, 那麼在添加事件的時候,jQuery會遍歷所有找到的元素,給所有找到的元素添加事件，舉個例子吧：

$(“ul”).delegate(“li”, “click”, function () {} );

      讓ul幫li監聽click事件
      之所以能夠監聽, 是因爲入口函數執行的時候ul就已經存在了, 所以能夠添加事件
      之所以this是li,是因爲我們點擊的是li, 而li沒有click事件, 所以事件冒泡傳遞給了ul,ul響應了事件, 既然事件是從li傳遞過來的,所以ul必然指定this是誰

7.7.  鼠標的移入移出事件：

		mouseover/mouseout會發生事件冒泡
		mouseenter/mouseleave不會發生事件冒泡(推薦使用)
		hover(callback,callback)相當於mouseenter與mouseleave

    說了這麼多，是不是看着都有點煩了，好了,菜鳥也就不囉嗦了,就到這吧，over!