Jquery能實(shí)現(xiàn)的JS都能實(shí)現(xiàn)，JS實(shí)現(xiàn)的Jquery未必能實(shí)現(xiàn)

事件

常用的基本事件

• 鼠標(biāo)事件

  • mouseenter 當(dāng)鼠標(biāo)進(jìn)入（穿過(guò)）被選元素時(shí)

      $("div.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
      });
    

  • mouseover 與mouseenter不同當(dāng)鼠標(biāo)穿過(guò)任何子元素都會(huì)被觸發(fā)

      $("div.over").mouseover(function(){
        $(".over span").text(x+=1);
      });
    

  • dbclick 雙擊

       $('ul').dblclick(function(){
           $('li').css('background','red');
       })
    

  • mouseleave 與mouseout不同只有鼠標(biāo)離開(kāi)被選元素的時(shí)候才會(huì)觸發(fā)

        $("div.leave").mouseleave(function(){
          $(".leave span").text(y+=1);
        });
    

  • mouseout 無(wú)論鼠標(biāo)離開(kāi)被選元素還是子元素都會(huì)觸發(fā)

        $("div.out").mouseout(function(){
             $(".out span").text(x+=1);
           });
    

  • click 鼠標(biāo)點(diǎn)擊

      $("div.out").click(function(){
           $(".out span").text(x+=1);
         });
    

  • mousewheel

    1. 安裝滾輪插件：bootcdn 查找Jquery-mousewheel
    2. 判斷滾輪方向： e.originalEvent.wheelDelta
• 鍵盤(pán)事件
  • keyup 按鍵松開(kāi)
  • keypress 按鍵被按下添寺，然后按鍵被松開(kāi)并復(fù)位
  • keydown 鼠標(biāo)按下
• 表單事件
  • change 元素的值發(fā)生改變
  • blur 元素失去焦點(diǎn)
  • focus 獲取焦點(diǎn)
• 系統(tǒng)事件
  • unload 用戶離開(kāi)頁(yè)面時(shí)
    1. unload() 方法將事件處理程序綁定到 unload 事件胚想。
    2. unload() 方法只應(yīng)用于 window 對(duì)象。
  • resize 調(diào)整瀏覽器窗口的時(shí)候觸發(fā)
  • scroll 用戶滾動(dòng)指定元素
  • load 當(dāng)指定元素（以及子元素）已經(jīng)加載時(shí)械馆，會(huì)觸發(fā)

綁定事件

• 綁定：on/one
• 解綁：off把上面on/one都解除綁定

事件的主動(dòng)觸發(fā) tigger

• 已經(jīng)給摸個(gè)元素綁定了摸個(gè)行為
• 通過(guò)tigger來(lái)滿足條件主動(dòng)觸發(fā)的這個(gè)行為

事件的詳細(xì)信息

• 事件對(duì)象：e
• 事件類(lèi)型：e.type
• 事件源： e.target
• 鼠標(biāo)坐標(biāo)
  • 針對(duì)當(dāng)前可視區(qū)的
    1. e.clientX
    2. e.clientY
  • 針對(duì)整個(gè)頁(yè)面：
    1. e.pageX
    2. e.pageY
• 阻止默認(rèn)事件：e.preventDefault
• 阻止冒泡：e.stopPropagation

dom操作

節(jié)點(diǎn)關(guān)系

• 父節(jié)點(diǎn)
  • parent
  • parents
• 子節(jié)點(diǎn)
  • children 只能找到兒子級(jí)別的
  • find 可以找到子子孫孫
• 上一個(gè)哥哥元素 prev
• 下一個(gè)弟弟元素 next
• 所有哥哥元素 prevAll
• 所有弟弟元素 nextAll
• 所有兄弟元素 siblings
• 索引 $(this).index()
• 第一個(gè)子元素 $(xxx).first()
• 最后子元素 $(xxx).last()

dom動(dòng)態(tài)操作

• 創(chuàng)建元素 $('<div></div>')
• 克隆元素 clone()
• 插入到容器末尾
  • append $(A).append(B) B放到A中
  • appendTo $(A).appendTo(B) A放到B中
• 插入到容器末尾
  • prepend
  • prependTo
• 插入到指定元素后面 insterAfter
• 插入到指定元素前面 insterbefore
• 刪除指定元素 remove

dom屬性操作

• 獲取 attr(一個(gè)參數(shù))
• 設(shè)置 attr(attr,value)
• 移除屬性 removeAttr(attr)

數(shù)據(jù)交互

$.ajax

url請(qǐng)求地址

type請(qǐng)求方式

• get
• post
• jsonp
  • 可實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)
  • 瀏覽器同源策略
    1. 協(xié)議：http/https
    2. 域名：www.baidu.com
    3. 端口號(hào)：http->80
    4. https->443

data請(qǐng)求參數(shù)

async是否異步

• true 異步
• false 同步

jsonp

• 如果請(qǐng)求的地址中央渣，全局函數(shù)名子不是callback涩惑，我們要通過(guò)jsonp重新設(shè)置函數(shù)名

dataType 返回?cái)?shù)據(jù)類(lèi)型

• json
• jsonp

cache是否緩存

success:function(data){}

error

選擇器

基本選擇器

• id
• class
• element

篩選

• 層級(jí)選擇器
  • :first .first()
  • :last .last()
  • :eq .eq()
  • :lt :gt
  • :odd :even
  • :parent
• 屬性選擇器 $("div[class^='box']")
• 表單選擇器 $(':text').val()

運(yùn)動(dòng)

插件擴(kuò)展