入口函數(shù)

  /*js加載完成事件*/
  window.onload=function(){
    console.log("頁面和資源完全加載完畢");
  }
  /*jQuery的ready函數(shù)*/
  $(document).ready(function(){
    console.log("頁面dom層渲染完畢---我是完整寫法");
  });
  $(function(){
    console.log("頁面dom層渲染完畢---我是簡寫形勢");
  });

• onload事件和ready函數(shù)的區(qū)別執(zhí)行時機不同 onload需要在頁面dom層和頁面加載的資源全部都加載完成才會執(zhí)行 ready函數(shù)只需要在dom層渲染完畢就會執(zhí)行，不關(guān)心資源是否加載執(zhí)行次數(shù)不同 onload函數(shù)在頁面中只有一個有效，如果存在多個，后面的覆蓋前面的。 ready函數(shù)在頁面中可以存在多個，按照順序依次執(zhí)行

jQuery對象和DOM對象的轉(zhuǎn)換

jQuery對象是一個由DOM對象組成的偽數(shù)組，jQuery轉(zhuǎn)DOM使用數(shù)組取值的方式，DOM轉(zhuǎn)jQuery使用jQuery的工廠函數(shù)。

  //獲取jq對象
  let div=$("div");
  //數(shù)組取值的方式獲取DOM對象
  let divDom=div[0];
  //get函數(shù)獲取DOM對象
  let divDom=div.get(0);
  
  //獲取DOM對象
  let box=document.getElementById("box");
  //使用jq的工廠函數(shù)轉(zhuǎn)換
  /*一般轉(zhuǎn)換來的jq對象，或者自己創(chuàng)建的jq對象取名時，推薦以$開頭*/
  let $box=$(box);
  

jQuery選擇器（同css的選擇器）

jQuery的選擇器和CSS1-3的選擇器完全一致，但是jQuery選擇器在兼容性上更好。 比如css3的選擇器在IE8及以下瀏覽器中不能使用，但是在jq中可以使用。而jq1.7以下的版本是可以使用在IE8中的，所以間接實現(xiàn)了在IE8里使用CSS3的選擇器。

基本選擇器

• 通配符選擇器
• ID選擇器
• 類選擇器
• 標(biāo)簽選擇器
• 交集選擇器
• 并集選擇器

層級選擇器

• 子代選擇器(等價于children函數(shù))
• 后代選擇器(等價于find函數(shù))

  //使用選擇器的方式實現(xiàn)后代選擇
  $("div p").css("color","red");
  //使用find函數(shù)實現(xiàn)后代選擇
  $("div").find("p").css("color","red");
  
  //使用選擇器的方式實現(xiàn)子代選擇
  $("div>p").css("color","red");
  //使用children函數(shù)實現(xiàn)子代選擇
  $("div").children("p").css("color","p");

過濾選擇器

  //選擇所有匹配的li中下標(biāo)為0的這一個li
  $("li:eq(0)").css("color","red");
  //對應(yīng)函數(shù)為eq函數(shù)
  $("li").eq(0).css("color","red");
  //獲取所有匹配的li中下標(biāo)為奇數(shù)的li
  $("li:odd").css("color","red");
  //獲取所有匹配的li中下標(biāo)為偶數(shù)的li
  $("li:even").css("color","red");

jQuery選擇器常用函數(shù)

jQuery操作屬性

• attr和prop的區(qū)別prop在jQuery1.7以后版本中可以使用，attr所有版本中都可以使用在1.7版本以后，推薦使用prop函數(shù)來操作屬性值為布爾類型的屬性，比如checked、selected、readonly等。attr可以操作任意屬性（包括自定義屬性），prop只能操作原生屬性
• attr和prop獲取和操作取值時在匹配到元素中只獲取第一個元素的對應(yīng)屬性設(shè)置是把匹配到的元素全部都設(shè)置屬性

  //獲取屬性原生屬性---attr和prop結(jié)果相同
  console.log($("div").attr("title"));
  console.log($("div").prop("title"));
  //獲取屬性值和屬性名相同的屬性
  console.log($("input").attr("checked"));  //選中結(jié)果為checked否則undefined
  console.log($("input").prop("checked"));  //選中結(jié)果為true否則false
  //獲取自定義屬性
  console.log($("div").attr("zdy"));    //可以正常取值
  console.log($("div").prop("zdy"));    //結(jié)果為undefined
  
  
  //設(shè)置原生屬性
  $("div").attr("title","attr設(shè)置的標(biāo)題"); //可以設(shè)置
  $("div").prop("title","prop設(shè)置的標(biāo)題"); //可以設(shè)置
  
  //設(shè)置屬性名和屬性值相同的屬性
  $("input").attr("checked",true);    //設(shè)置選中
  $("input").attr("checked","checked"); //設(shè)置選中，在1.7版本以前只能使用attr設(shè)置，推薦使用該方案
  $("input").attr("checked",false);   //設(shè)置取消選中
  //在1.7版本以前取消選中
  $("input").removeAttr("checked");   //設(shè)置取消選中
  
  $("input").prop("checked",true);    //設(shè)置選中
  $("input").prop("checked",false);   //設(shè)置取消選中
  
  
  //設(shè)置自定義屬性
  $("div").attr("zdy2","自定義2");   //可以設(shè)置屬性
  $("div").prop("zdy2","自定義2");   //設(shè)置屬性無效
  
  //一次設(shè)置多個屬性
  $("div").attr({title:"一次多個屬性",id:"d1"});  //attr函數(shù)內(nèi)傳遞對象的方式批量設(shè)置屬性/prop函數(shù)同理

jQuery操作樣式

操作行內(nèi)樣式(css)

• css函數(shù)的操作和attr函數(shù)基本一致，css函數(shù)就是直接對標(biāo)簽內(nèi)的style屬性進行設(shè)置。
• css函數(shù)設(shè)置時設(shè)置匹配到的所有元素，取值只獲取第一個匹配元素的值

  //設(shè)置文本顏色
  $("p").css("color","red");
  //設(shè)置背景顏色：background-color屬性要改寫為backgroundColor
  $("p").css("backgroundColor","green");
  //一次設(shè)置多個樣式
  $("p").css({color:"red",fontSize:"20px"});
  //獲取樣式的值
  console.log($("p").css("fontSize"));

操作類(class)

• 追加樣式

  //追加一個樣式
  $("p").addClass("active");
  //追加多個樣式，使用空格隔開即可
  $("p").addClass("active hover");

• 移除樣式

  $("div").removeClass("active");

• 判斷樣式

  let flag=$("p").hasClass("active");
  console.log(flag);  //如果p標(biāo)簽有active樣式結(jié)果為true否則false

• 切換樣式

  //如果p標(biāo)簽有active樣式則移除該樣式，否則追加active樣式
  $("p").toogleClass("active");

jQuery操作DOM

創(chuàng)建DOM

使用jQuery的工廠函數(shù)可以直接創(chuàng)建出jQuery對象的DOM節(jié)點

  let $p=$("<p title="把你鼠標(biāo)移開~~">我是jq創(chuàng)建的標(biāo)簽</p>");
  //此時$p這個dom對象只存在內(nèi)存中，頁面中不存在該元素
  console.log($p);

添加DOM

• 添加到選中標(biāo)簽的內(nèi)部結(jié)尾 //$p元素追加到box的標(biāo)簽的內(nèi)部結(jié)尾
  $("#box").Append($p);
  //該代碼和append等價，只是調(diào)用者發(fā)生了變化
  //$p.appendTo($("#box"));
• 添加到選中標(biāo)簽的內(nèi)部開頭 //$p元素追加到box標(biāo)簽的內(nèi)部開頭
  $("#box").prepend($p);
  //該代碼和prepend等價，只是調(diào)用者發(fā)生了變化
  //$p.prependTo($("#box"));
• 添加到選中標(biāo)簽的自身前面 $("#box").before($p);
• 添加到選中標(biāo)簽的自身后面 $("#box").after($p);

刪除DOM

empty清空元素

  //清空box元素內(nèi)所有內(nèi)容，box會保留，返回值是box
  $("#box").empty();

remove刪除元素

  //刪除box元素，box消失，返回值是box
  //remove刪除的元素再次追加回頁面，其綁定的事件會消失
  $("#box").remove();

detach刪除元素

  //刪除box元素，box消失，返回值是box
  //detach刪除的元素再次追加回頁面，其綁定的時間會跟隨回來
  $("#box").detach();

三種刪除元素的區(qū)別

1. empty只會清空元素內(nèi)部，remove和detach會把元素一起清除
2. remove刪除的元素其綁定的事件會徹底消失，再次追加該元素到頁面時，事件也不會回來
3. detach刪除的元素其綁定的事件會保留，再次追加該元素到頁面時，事件自動綁定

克隆DOM

  //只復(fù)制box節(jié)點
  let $box=$("#box").clone();
  //復(fù)制box節(jié)點和其綁定的事件
  let $box2=$("#box").clone(true);
  //復(fù)制的節(jié)點追加到頁面中
  $("#main").append($box);

jQuery操作內(nèi)容

• 操作文本內(nèi)容text()
• 操作標(biāo)簽內(nèi)容html()
• 操作表單元素的值val()

<body>
    <ul>
        <li><b>選項1</b></li>
        <li><b>選項2</b></li>
        <li><b>選項3</b></li>
    </ul>
    <input type="text" value="你好">
    <input type="text" value="我不好">
    <select>
        <option value="1">男</option>
        <option value="2" selected>女</option>
    </select>
</body>

  //text函數(shù)取值會把匹配到的所有元素的文本內(nèi)容合并為一個字符串
  let texts=$("li").text(); //選項1選項2選項3
  //html函數(shù)取值只取第一個匹配到的元素的內(nèi)部的內(nèi)容，包含標(biāo)簽結(jié)構(gòu)
  let html=$("li").html();  //<b>選項1</b>
  //val函數(shù)取值只取第一個匹配到的表單元素的value的值
  let val=$("input").val(); //你好
  let sex=$("select").val();  //獲取到當(dāng)前選中的option的value的值
  
  $("li").text("設(shè)置文本");     //所有l(wèi)i標(biāo)簽文本內(nèi)容都變?yōu)樵O(shè)置文本，li原先的b標(biāo)簽也被覆蓋掉了
  $("li").html("<i>設(shè)置標(biāo)簽</i>");  //所有l(wèi)i標(biāo)簽內(nèi)容變?yōu)樾斌w設(shè)置標(biāo)簽
  $("input").val("val函數(shù)設(shè)置");    //所有input標(biāo)簽value屬性的值都為設(shè)置值
  $("select").val("1");       //設(shè)置選中value為1的選項
  
  //使用回調(diào)函數(shù)設(shè)置文本內(nèi)容，設(shè)置標(biāo)簽和value屬性同理
  $("li").text(function (index,text) {
        console.log(index);//li的下標(biāo)
        console.log(text);  //當(dāng)前l(fā)i標(biāo)簽的原始內(nèi)容
        //回調(diào)函數(shù)一定要給返回值，返回的結(jié)果就是最終設(shè)置的值
        return index+1+text;
    });

• 總結(jié)： 1.html函數(shù)和val函數(shù)取值都只取匹配到的第一個元素的值，text獲取所有匹配元素的值 2.設(shè)置時都是統(tǒng)一設(shè)置，都是覆蓋操作 3.html函數(shù)可以識別html代碼進行格式化 4.html和text函數(shù)只對非表單元素有效，val只對表單元素有效 5.button標(biāo)簽設(shè)置的按鈕操作按鈕文字使用text或者html函數(shù) 6.input標(biāo)簽設(shè)置的按鈕操作按鈕文字使用val

jQuery操作尺寸

jQuery操作位置

• 獲取滾動條高度使用$(window).scrollTop()來獲取，設(shè)置時應(yīng)該使用html或body標(biāo)簽來設(shè)置

  $("html,body").animate({scrollTo:0},1000);

jQuery事件

事件注冊和移除

• 事件名函數(shù)方式：只能綁定HTML支持的原生事件
• bind綁定：1.7以前版本的綁定方式，目前最新版也能用，但是不推薦。
• on綁定：1.7以后開始推薦使用的方式 綁定事件代碼演示

  //函數(shù)名方式綁定
  $("#box").click(function(){
    console.log("函數(shù)名方式綁定");
  });
  //bind方式綁定
  $("#box").bind("click",function(){
    console.log("bind方式綁定");
  });
  //on方式綁定
  $("#box").on("click",function(){
    console.log("on方式綁定");
  });
  //on或者bind一次綁定多個事件
  $("#box").on("click mouseover mouserout",function(){
    console.log("一次綁定多個事件");
  });

移除事件代碼演示

  //unbind函數(shù)移除事件
  $("#box").unbind("click");
  //off函數(shù)移除事件
  $("#box").off("click");
  //off或者unbind移除多個事件
  $("#box").off("click mouseout");

主動觸發(fā)事件

  //通過JS代碼來觸發(fā)box的單擊事件
  $("#box").trigger("click");

事件對象

jQuery的事件對象必須通過事件觸發(fā)的函數(shù)傳遞參數(shù)的方式來使用，沒有兼容問題

• 常用事件屬性如下屬性說明screenX和screenY基于屏幕左上角的X軸坐標(biāo)和Y軸坐標(biāo)clientX和clientY基于瀏覽器內(nèi)容左上角的X軸坐標(biāo)和Y軸坐標(biāo)，忽略滾動條pageX和pageY基于頁面內(nèi)容左上角的X軸坐標(biāo)和Y軸坐標(biāo)，計算滾動條keyCode鍵盤碼stopPropagation()阻止事件冒泡preventDefault()阻止默認行為return false;阻止事件冒泡和默認行為

jQuery動畫

內(nèi)置動畫

• 顯示(show)和隱藏(hide)
• 滑入(slideDown)和滑出(slideUp)和切換(slideToggle)
• 淡入(fadeIn)和淡出(fadeOut)和切換(fadeToggle)
• 變化到指定透明度：fadeTo

    /*
        * 內(nèi)置動畫的參數(shù)如下：
        * 1：number類型的毫秒數(shù),默認都是400/string類型的單詞表示normal普通速度(400),fast(600),slow(200)
        * 2：function類型的回調(diào)函數(shù),表示在動畫執(zhí)行完畢自動執(zhí)行的函數(shù)
        * */

        $("#show").click(function () {
            /*控制div顯示*/
            $("#main").show("fast");
        });
        $("#hide").click(function () {
            /*控制div隱藏*/
            $("#main").hide("slow");
        });
        $("#sliderUp").click(function () {
            $("#main").slideUp();
        });
        $("#sliderDown").click(function () {
            $("#main").slideDown();
        });
        $("#toggleSlider").click(function () {
            $("#main").slideToggle(5000);
        });
        $("#fadeIn").click(function () {
            $("#main").fadeIn();
        });
        $("#fadeOut").click(function () {
           $("#main").fadeOut();
        });
        $("#toggleFade").click(function (){
            $("#main").fadeToggle(5000);
        });
        $("#fadeTo").click(function () {
            /*
            * fadeTo參數(shù)如下：
            * 1.執(zhí)行時間
            * 2.指定的透明度，可選值0-1之間，0表示完全透明，1表示不透明
            * 3.表示執(zhí)行效果方式，可選值：swing表示緩動，是默認值。或者是linear表示勻速
            * 4.動畫執(zhí)行完畢的回調(diào)函數(shù)
            * */
            $("#main").fadeTo(3000,.4,"swing",function () {
                console.log("透明度已經(jīng)調(diào)整到40%");
            });
        });

自定義動畫

  /*
    * animate函數(shù)參數(shù)如下：
    * 1.對象類型：設(shè)置要執(zhí)行動畫的css屬性[必填]
    * 1.1：jQuery動畫不支持transform屬性
    * 2.速度:執(zhí)行動畫所需的時間，單位毫秒[必填]
    * 3.執(zhí)行效果：swing緩速（默認值）,linear勻速
    * 4.回調(diào)函數(shù)：動畫執(zhí)行完畢后自動調(diào)用的函數(shù)
    * */
    /*
    * jq動畫中設(shè)置的屬性名要符合DOM對象屬性名的設(shè)置（駝峰命名）
    * 例如：font-size必須寫為：fontSize
    * */                      
    $("#d1").animate({left:"200px",opacity:".3",fontSize:"30px"},3000);

隊列動畫

• 回調(diào)函數(shù)方式實現(xiàn)隊列動畫
• 鏈?zhǔn)骄幊谭绞綄崿F(xiàn)隊列動畫(推薦使用)

       $("#qu1").click(function () {
           /*使用回調(diào)函數(shù)來實現(xiàn)動畫的隊列效果*/
            $("div").animate({left:"200px"},1500,"swing",function () {
                $("div").animate({opacity:0.4},1500,"swing",function () {
                    $("div").animate({fontSize:"50px"},2000,"swing",function () {
                        $("div").animate({top:"200px",height:"400px",width:"400px"},2000);
                    });
                });
            });
       });
       $("#qu2").click(function () {
           /*使用鏈?zhǔn)骄幊虂韺崿F(xiàn)動畫的隊列效果*/
           /*
           * delay函數(shù)用來控制等待時間，單位毫秒，delay函數(shù)也可以用在內(nèi)置動畫中
           * */
            $("div").animate({left:"200px"},1500)
                .animate({opacity: 0.4},1500).delay(3000)
                .animate({fontSize: "50px"},1500)
                .animate({top:"200px",height:"400px",width: "400px"},2000);
       });

等待動畫

隊列動畫已體現(xiàn)效果

停止動畫

stop(是否清除隊列,是否立即完成當(dāng)前動畫);

  $("#box").stop(true,true);    //清除后續(xù)動畫效果，當(dāng)前動畫效果立即完成
  $("#box").stop(true,false);   //清除后續(xù)動畫效果，當(dāng)前動畫效果立即停止,該 效果可省略第二個參數(shù)
  $("#box").stop(false,true);   //后續(xù)動畫會繼續(xù)執(zhí)行，當(dāng)前動畫立即完成
  $("#box").stop(false,false);  //后續(xù)動畫會繼續(xù)執(zhí)行，當(dāng)前動畫立即停止，該效果可省略兩個參數(shù)

jQuery插件

常用插件

1. [jQueryUI] https://jqueryui.com/
2. [bootstrap] https://www.bootcss.com/
3. [easyUI] https://www.jeasyui.net/
4. [layui] https://www.layui.com/
5. [jQuery插件庫] https://www.jq22.com/

自定義插件

• 靜態(tài)方法設(shè)置靜態(tài)方法：$.方法名=function([參數(shù)列表])；使用靜態(tài)方法：$.方法名([實參列表]); (function($){
  //獲取指定范圍的隨機數(shù)
  $.getRandom=function (min,max) {
  if(min>max){
  let temp=max;
  max=min;
  min=temp;
  } if(min==max){
  return min;
  }else{
  let r=Math.floor(Math.random()*(max-min+1)+min);
  return r;
  } } })(jQuery);
  console.log($.getRandom(5,25));
• 實例方法設(shè)置實例方法：$.fn.方法名=function([參數(shù)列表]);使用實例方法：$(selector).方法名([實參列表]);

  (function($){
    //設(shè)置某個元素的color屬性
    $.fn.changeColor=function (color) {
          this.css("color",color?color:"red");
      }
  })(jQuery);
  //不傳參數(shù)則設(shè)置box的字體顏色為red
  $("#box").changeColor();
  //傳遞正確的參數(shù)則設(shè)置box的字體顏色為指定顏色
  $("box").changeColor("#FFF");//設(shè)置box的字體顏色為白色

jQuery經(jīng)典案例

無縫輪播

• 頁面代碼

<div class="main">
    <div class="banner-list">
        <div class="banner-item"><a href=""><img src="images/ad-1.png" alt=""></a></div>
        <div class="banner-item"><a href=""><img src="images/ad-2.png" alt=""></a></div>
        <div class="banner-item"><a href=""><img src="images/ad-3.png" alt=""></a></div>
    </div>
    <div class="banner-opt">
        <span class="left"><</span>
        <span class="right">></span>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

• 樣式代碼

*{
    padding: 0;
    margin: 0;
}
.main{
    height: 300px;
    width: 380px;
    position: relative;
    margin: 100px auto;
    overflow: hidden;
}
.banner-list{
    position: absolute;
    left: 0;
    top: 0;
}
.banner-list div{
  float: left;
}
.banner-opt span{
    display: none;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    background-color: #ccc;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    cursor: pointer;
}
.banner-opt span.left{
    left: 0;
}
.banner-opt span.right{
    right: 0;
}
.main:hover .banner-opt span{
    display: block;
}
.banner-opt ul{
    list-style: none;
    width: 45px;
    height: 25px;
    position: absolute;
    left: 50%;
    margin-left: -22px;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-opt ul li{
    height: 10px;
    width: 10px;
    background-color: #ccc;
    border-radius: 50%;
}
.banner-opt ul li.active{
    background-color: #5cb85c;
    border: 2px solid #fff;
}

• 效果代碼

/*初始化輪播圖默認選中下標(biāo)*/
let index=0;
/*初始化計時器*/
let inter;
$(function(){
    /*無縫輪播*/
    /*1.復(fù)制首項內(nèi)容*/
    let $itemFirst=$(".banner-item").eq(0).clone(true);
    /*2.追加到末尾*/
    $(".banner-list").append($itemFirst);
    /*3.更新輪播box的寬度:banner-item的寬度*banner-item的個數(shù)*/
    let listWidth=$(".banner-item").length*$(".banner-item").width();
    $(".banner-list").width(listWidth);
    /*下一張按鈕*/
    $(".right").click(next);
    /*上一張按鈕*/
    $(".left").click(prev);
    /*鼠標(biāo)進入則停止輪播,移出則繼續(xù)輪播*/
    $(".banner-list").mouseover(stopMove).mouseout(autoMove);
    /*頁面加載則自動輪播*/
    autoMove();
});
/*切換下一張*/
function next() {
    index++;
    if(index===$(".banner-item").length){
        index=1;
        $(".banner-list").css("left",0);
    }
    moveItem(index);
}
/*切換上一張*/
function prev(){
    index--;
    if(index===-1){
        index=$(".banner-item").length-2;
        $(".banner-list").css("left",($(".banner-item").length-1)*$(".banner-item").width()*-1);
    }
    moveItem(index);
}
/*移動輪播圖*/
function moveItem(i) {
    $(".banner-list").stop().animate({"left":-i*$(".banner-item").width()},500);
    /*輪播指示點設(shè)置*/
    if(i==$(".banner-item").length-1){
        $("li").eq(0).addClass("active").siblings().removeClass("active");
    }else{
        $("li").eq(i).addClass("active").siblings().removeClass("active");
    }
}
/*自動輪播*/
function autoMove() {
    inter=setInterval(next,1500);
}
/*停止自動輪播*/
function stopMove() {
    clearInterval(inter);
}