替換與創(chuàng)建節(jié)點

   jQuery  舊.replaceWith(新)
   新.replaceAll(舊)
   $p = $("<p>新來的</p>");    //創(chuàng)建節(jié)點

clone節(jié)點

克隆節(jié)點原生與jquery區(qū)別
原生==>節(jié)點.cloneNode() true 克隆當前節(jié)點及其后代節(jié)點
jQuery ==>clone(true|false) true 克隆事件

包裹節(jié)點

    // wrap() 
    $("button:eq(0)").click(function(){
        // 把匹配到每一個span標簽用p標簽包裹起來
        $("span").wrap("<p></p>");
    })
    // unwrap()
    $("button:eq(1)").click(function(){
        // 把匹配到每一個span標簽的父節(jié)點去除掉
        $("span").unwrap();
    })
    $("button:eq(2)").click(function(){
        $("span").wrapAll("<p></p>");
    })
    //wrapInner()
    $("button:eq(3)").click(function(){
        $("span").wrapInner("<b></b>");
    })

遍歷DOM樹

    $("ul:first>li").wrapInner("<span></span>");
    父子關系
    // 01 children() 獲取匹配到每一個節(jié)點的子節(jié)點
    console.log( $("ul").children() );
    // 02 parent() 獲取父節(jié)點
    console.log( $("li").parent() );
    // 03 parents() 獲取祖先節(jié)點
    console.log( $("li").parents() );
    // $("li").parents("selector") 起點 父節(jié)點
    // 表格操作 $(this).parents("tr")
    // 04 closest("篩選條件")      起點 當前節(jié)點
    console.log( $("li:first").parents(".test") );//ul
    console.log( $("li:first").closest(".test") );//li

    // 兄弟關系
    // 01 前一個兄弟 prev()
    console.log( $("#test").prev()  );  
    // 02 前面的兄弟 prevAll()
    console.log( $("#test").prevAll() ); 
    // 03 后一個兄弟 next()
    console.log( $("#test").next() );
    // 04 后面的兄弟 nextAll()
    console.log( $("#test").nextAll() );
    // 05 所有兄弟 siblings()
    console.log( $("#test").siblings() );
    
    // find("篩選條件")
    // 把匹配到每一個元素的后代在進行一次篩選
    console.log( $("ul").find("#test") );

事件對象

    $("button").on("click",function(event){
        // 事件對象常用的屬性
        //01 event.type獲取事件類型
        console.log( event.type );
        //02 event.target 獲取觸發(fā)事件的元素
        console.log( event.target );
        //03 event.preventDefault();
        //04 event.stopPropagation()
        // event.stopPropagation();
        //05 event.pageX evene.pageY

        //06 event.which 左中右123
        alert("btn");
    })

    $("body").mousedown(function(event){
        // alert("body");
        // console.log(event.pageX,event.pageY);
        console.log(event.which);
        if (event.which==3) {
        }
    })
    $(document).keydown(function(event){
        console.log(event.which)
    })

添加事件與移除事件

    // on ()
    // 01 形式1 on(事件名,響應函數(shù))
    // $("div").on("click",function(){
    //  console.log("點我！");
    // })

    //02 形式2 給多個事件添加同一個響應函數(shù)
    // $("div").on("mouseover click",function(){
    //  console.log("over and click");
    // })

    // 03 形式3 一次性添加多個事件的響應
    // $("div").on({
    //  "click":function(){console.log("click");},
    //  "mouseover":function(){console.log("mouseover");},
    //  "mouseout":function(){console.log("mouseout");}
    // })

    //鏈式語法
    // $("div").on("click",function(){console.log("click");})
    //      .on("mouseover",function(){console.log("mouseover");})
    //      .on("click",clickHandler);
    // function clickHandler(){
    //  console.log("click222222222");
    // }

    // 04 形式4 可以向響應函數(shù)中傳參
    // 100 Number 傳參一般傳字面量對象
    $("div").on("click",{"msg":"哈哈"},function(event){
        //事件對象 event.data 
        console.log(event.data);
    })
    on(this,"click",1,fn)

    // off()

    // 01 移除所有事件
    // $("div").off();

    // 02 移除點擊事件 off(事件名)
    // $("div").off("click");

    // 03 移除某一個響應函數(shù)
    // $("div").off("click",clickHandler);

    //拖拽

    // div 鼠標移入 背景色變成紅色 離開變成藍色
    // $("div").on("mouseover",overhandler)
    //      .on("mouseout",function(){
    //          $(this).css("background-color","blue");
    //      })

    // function overhandler(){
    //  $(this).css("background-color","red");
    // }
    // 點擊按鈕1 取消移入事件

bind()

    // bind
    $("button").bind("click mouseover",function(){
        console.log("點擊了按鈕");
    })
    // unbind
    $("button").unbind("mouseover");
    $("li").on("click",function(){
        $(this).css("background-color","orange");
        $(this).siblings().css("background-color","#fff");
    })

ready()事件

    // window.load 事件 頁面加載完畢之后會觸發(fā)
    // window.onload=function(){
    //  //可以獲取div
    // }
    // window 與 document的關系  document是window的對象屬性
    $(document).ready(function(){})
    $(function(){})//簡寫

load事件與ready事件的區(qū)別
load 是指頁面中所有的元素加載完畢(所有的文件圖片都下載完畢)之后才會觸發(fā)；
ready是指DOM元素加載完畢之后就會觸發(fā)，此時文件圖片不一定下載完

事件簡寫(點語法)

    $(function(){
        //coding...
        // $("div").click();
        $("#user").focus(function(){
            $(".tips").html("1.必須由字母、數(shù)字、下劃線組成2.不能以數(shù)字開頭3 長度需要在6-16之間");
            $(".tips").css("display","inline-block");
            $(".tips").css("color","black");
        }).blur(function(){
            if(/^[a-z_]\w{5,15}$/i.test(this.value) ){
                $(".tips").html("輸入正確");
                $(".tips").css("color","green");
            }else{
                $(".tips").html("輸入錯誤");
                $(".tips").css("color","red");
            } 
        });
    }); 

合成事件(hover())

    $(function(){
        //hover 是mouseover與mouseout的合成
        $("div").hover(function(){
            $(this).css("background-color","red");
        },function(){
            $(this).css("background-color","green");
        })
    })

事件對象

    $("button").click(function(event){
        //event 就是事件對象
        // stopPropagation() 阻止冒泡
        // 什么是事件冒泡？
        // event.stopPropagation();
        // preventDefault() 阻止默認行為
        // 提交按鈕
        // 點擊鏈接跳轉
        // target 觸發(fā)事件的元素
        console.log( event.target );
        console.log("button!");
        //pageX pageY 獲取鼠標在頁面坐標系中的坐標點
    })
    $("body").click(function(event){
        console.log("body!");
        console.log( event.target );
        console.log( event.pageX,event.pageY);
        // which
        // 在鼠標事件中獲取的鼠標的鍵 左滾右（1,2,3）
        // 在鍵盤事件中獲取的按下的鍵
    })
    $("body").mousedown(function(event){
        console.log(event.which);
    })
    $(document).keydown(function(event){
        console.log(event.which);
    })