基本的jQuery方法

載入順序

1.載入順序高

  $(document).ready(function () {
          console.log("當文件物件載入完畢時");
  })
  $(function () {
          console.log("載入完畢時");
  })

2. 載入順序低

 $(window).load(function () {
        console.log("jq頁面載入完畢時");
 })

獲取和設定html

$("選擇器").html()
$("選擇器").html("我要新增的html文字結構")
 

獲取和設定input的值

$("選擇器").val()
$("選擇器").val("值"）

獲取和設定屬性

$("選擇器").attr()

1.設定單個屬性

$("選擇器").attr( “屬性”，“屬性值”，  })

2.設定多個屬性

 $("選擇器").attr({
		    屬性：“屬性值”，
		    屬性：“屬性值”，
		    ...
	    })

改變css樣式

$("選擇器").css({
    		    樣式：“樣式值”，
    		    樣式：“樣式值”，
    		    ...
    	    })
 

獲取選中的選擇框

$("input[type='checkbox']:checked")

事件繫結
1.繫結一個事件

$("選擇器").onclick=function () {
        //函式體
}

2.繫結多個事件，執行相同的事件處理函式

 $("選擇器").bind("事件1 事件2",function f() {
        //函式體
  })

3.繫結多個事件，分別執行不同的事件處理函式

$("選擇器").bind({
        "事件1":function () {
		//函式體
        },
        "事件2":function () {
		//函式體
        },
        ...
    })
 

解除事件繫結
1.解除該jQuery物件上的所有的事件繫結

$("選擇器").unbind()

2.解除該jQuery物件上的部分事件繫結

$("選擇器").unbind("事件1");

3.解除某個事件的某一個處理函式的繫結

$("選擇器").unbind("事件1"，函式名);//函式名不加括號

事件on的用法
1.提供一個事件委託的方法來繫結事件

 	// 為所有的子類選擇器繫結事件，包括新增的節點物件
    $("父類選擇器").on("事件","子類選擇器",function () {
		//函式體
    })

2.模擬使用者行為

	//模擬另一個節點物件的點選事件
    $("選擇器1").on("click",function () {
        $("選擇器2").trigger("click");
    })
    $("選擇器1").on("click",function () {
        $("選擇器2").click();
    })

3.自定義事件，移動端常用

 $("選擇器1").on("自定義事件名",function () {
		//函式體
  })
 $("選擇器2").on("click",function () {
        $("選擇器1").click().trigger("自定義事件名")
 })

動畫效果
1.animate(物件)

$("選擇器").animate({
    //需要修改的css樣式
    //jQuery動畫改變的css只能是帶數字型別值的屬性，例如寬高，透明度等等
},2000,function () {
    $(this).css({
        //值非數字型別的屬性，但是沒有動畫過渡效果
    })
})

2.停止當前動畫，並開始執行下一個動畫

$("選擇器").stop(布林值,布林值);
//第一個引數true：是否清空動畫佇列，停止所有動畫
//第二個引數true：直接將當前動畫執行完畢

3.延遲動畫

$("選擇器").delay(2000).animate({
	//css樣式
})

4.jQuery動畫過渡效果外掛

 jQuery-easing

jQuery的節點操作

移動節點

//將所有的p標籤移動到mainDiv裡面   
 $("p").appendTo($("#mainDiv"))

在最後面新增一個兒子節點

//給mainDiv在最後新增一個新的兒子節點
var newNode = $("文字結構")  
$("#mainDiv").append(newNode )

在最前面新增一個兒子節點

// 將p標籤新增到maindiv的兒子節點的最前面
$("#mainDiv").prepend($("p"))
$("p").prependTo($("#mainDiv"))

插入到節點後面

 // 將p變成maindiv的緊鄰的弟弟節點
$("#mainDiv").after($("p"))
$("p").insertAfter($("#mainDiv"))

插入到節點前面

 // 讓p標籤變成maindiv的哥哥節點
$("#mainDiv").before($("p"))
$("p").insertBefore($("#mainDiv"))

包裹節點

//分別給每個p標籤加一個div父節點
 $("p").wrap("<div></div>")
// 把所有p標籤都放入同一個div父節點裡面
 $("p").wrapAll("<div></div>")

移出包裹節點

// 讓選中的p標籤 刪除一個父節點， 如果父節點是body 則不刪除
 $("p").unwrap()

複製節點

$("p").clone(布林值)
 // true:所有子節點
 // false:只有自己

刪除節點

$("p").remove()  //刪除自己

刪除父節點

$("p").parent().remove()

替換節點
$(“p”).replaceWith(字串或者標籤)