概念：一個簡潔的javascript框架，封裝了一些javascript常用的程式碼

使用：

• 選擇器

      var div = $("#div") //獲取特定id的元素物件
  

• 事件：

  $("#div").click(function(){
      //繫結一個點選事件
  

})

$(function(){
//與window.load=function(){}功能一致
})

$("#div").css=("樣式名","設定的樣式的值")

- 選擇器：

```javascript
//基本選擇器
//1.標籤選擇器
$("html標籤名")//選擇所有匹配標籤名稱的元素
//2.id選擇器
$("#id的屬性值")//選擇指定id屬性值的元素
//3.類選擇器
$(".class的屬性值")//獲得與指定的class屬性值匹配的元素

//層級選擇器
//1.後代選擇器
$("A B")//獲得A的所有後代B
//2.子類選擇器
$("A > B")//獲得A元素內部的所有子類元素

//屬性選擇器
//1.屬性名稱選擇器
$("A[屬性名]") //獲得指定屬性的選擇器
//2.屬性選擇器
$("A[屬性名='屬性值']")//獲得 指定屬性值的元素
//3.複合屬性選擇器
$("A[屬性名='屬性值'][]...")//包好多個屬性條件的元素

//過濾選擇器
$("A:first")
$("A:last")
$("A:not(selecter)")//獲取不為所選擇型別的元素
$("A:even")//單數
$("A:odd")//雙數
$("A:gt(index)")//比索引大
$("A:eq(index)")
$("A:lt(index)")
$(":header")//標題元素h1-h6

//表單過濾選擇器
//1.可用元素選擇器
$("selceter:enabled")
//2.不可用元素選擇器
$("selecter:disabled")
//3.選中選擇器
$("selecter:checked")//複選框
//4.選中選擇器
$("selecter:selected")//下拉列表
 

DOM操作

• 內容操作

  • 1.text() 獲取/設定元素的純文字
  • 2.html() 獲取/設定標籤體的內容
  • 3.val 獲取/設定元素的value屬性值

• 屬性操作

  • 通用屬性操作
    • 1.attr()
    • 2.removeAttr()
    • 3.prop()
    • 4.removeProp()
  • prop操作元素的固有屬性
  • attr操作元素的自定義屬性
  • 對class屬性的操作
    • 1.addClass() 新增元素的class屬性
    • 2.removeClass() 刪除class屬性值
    • 3.toggleClass() 切換class屬性，判斷元素物件上是否存在對應的class屬性，有則刪除，無則新增

• CRUD

  • append()：父元素將子元素新增到內部的末尾

  • prepend：父元素將子元素新增到內部的開頭

  • 物件1.appendTo(物件2)：將物件1新增到物件2的內部末尾

  • 物件1.prependTo(物件2):將物件1新增到物件2的內部的開始

  • 物件1.after(物件2)：將物件2新增到物件1的後面，平級關係

  • 物件1.before(物件2)：將物件2新增到物件1的前方，平級關係

  • 物件1.insertAfter(物件2)：將物件1新增到物件2的後面，平級關係

  • 物件1.insertBefore(物件2)：將物件1新增到物件2的前方，平級關係

  • remove():將物件刪除

  • empty()：清除物件的後代元素，但是保留當前物件

• JQuery動畫

  • 隱藏顯示：show，hide，toggle
  • 淡入淡出：fadeIn，fadeOut，fadeToggle
  • 滑入滑出：sildeUp，sildeDown，sidleToggle

• 遍歷

  • js的遍歷方式：for(初始化值，迴圈結束條件，步長)

  • JQ的遍歷方式：

    A.each(function(){
        this.Xxx;//this指代遍歷的元素
    })
    
    A.each(index,element){
        index//指代索引
        element//指代便利的元素物件
    }
    //如果返回為false則結束迴圈，返回為true則結束本次迴圈，開啟下次迴圈
    
    $.each(object，[callback])
    $.each(A,function(){
        $(this).Xxx;
    })
    
    //在JQuery3.0之後
    for(B of A){
        $(B).Xxx;
    }
    

• 事件繫結

  • jquery標準的繫結方法---->jq物件.事件方法(回撥函式)；
  • on繫結事件/off解除繫結---->jq物件.on("事件名稱"，回撥函式)；jq物件.off("事件名稱")
  • 事件切換toggle---->jq物件.toggle(fn1,fn2... ...)