尚矽谷 jQuery 筆記(張曉飛 2018)

Liukairui發表於2020-11-24

jQuery筆記

瞭解jQuery

畫頁面

HTML
CSS

互動(動態效果)

JS基礎(ES,語法)
JS的DOM與BOM

存在的問題

DOM的語法太麻煩(尤其是插入元素)

介面的操作: CRUD(增刪改查),最難的是查詢(文件樹紛繁複雜)

jQuery是一個優秀的JS函式庫(就是封裝了DOM與BOM)是中大型開發的首選(當然現在有了React,Vue)

注意第二個字母是大寫的

外掛:jQuery是DOM的外掛,依賴於jQuery的庫是jQuery的外掛

特性:

HTML的元素選取(選擇器): jQuery擴充套件了CSS的選擇器
HTML元素操作
CSS操作
HTML事件處理(互動)
JS動畫效果
鏈式呼叫:支援a().b().c()...
讀寫合一: 獲取元素屬性與修改是用的一個函式
瀏覽器相容
外掛多
ajax封裝

jQuery的基本用法

jQuery的不同版本

1.x 相容老IE,檔案大
2.x 部分IE8以下不支援,檔案小,效率高
3.x 完全不支援IE8-,完全支援IE9+,提供新API,有不包含ajax,動畫API的版本

開啟jQuery的原始檔可以看到,整個檔案就是一個匿名函式自呼叫,1.10.1的檔案9793行是唯一暴露API的地方,window.jQuery=window.$=jQuery只暴露了兩個物件,在61行定義了jQuery函式

引入jQuery庫
- 測試用沒壓縮的,上線用壓縮的
- 引用在使用之前
- 測試的時候: 本地引入
- 專案上線為了減輕伺服器負擔可以使用CDN遠端庫,例如https://www.bootcdn.cn/
使用jQuery的核心函式(jQuery/$),注意大小寫
使用jQuery核心物件, var $tmp=$("tmp")指的是操作核心函式返回的物件,一般為了標註這個是jQuery寫的,變數名前加$

輸出input的內容,雙版本

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.5.1.js"></script>
    <script>
        // 原生DOM
        window.onload=function(){
            var btn1=document.querySelector("#btn1");
            btn1.onclick=function(){
                var usrname=document.querySelector("input").value;
                alert(usrname);
            }
        }
    </script>
    <script>
        // 繫結文件載入的監聽,雖然不知道為什麼有了$就算是文件載入結束了
        $(function(){
            $("#btn2").click(function(){ // 給btn2新增事件
                var username=$("input").val(); //val()就是.value
                alert(username);
            });
        })
    </script>
</head>
<body>
    使用者名稱: <input type="text">
    <button id="btn1">OK 原生</button>
    <button id="btn2">OK jQuery</button>
</body>
</html>

$(function(){})相當於是文件載入完成監聽window.onload=function(){}
$("XXX")相當於是document.querySelector("XXX")
.val()就是獲取元素的.value

jQuery的兩把利器

核心函式: jQuery/$,兩者相同(測試jQuery===$)
核心物件: 核心函式得到, 也就是一個物件(測試$() instanceof Object)

?? 頭函式的undefined

jQuery函式的使用

不論什麼框架,回撥函式的this就是出發這個函式的DOM的物件

作為一個函式去呼叫
- jQuery支援多型,所以存在函式的過載(有argument還能這樣搞…)
- $(Function) 當DOM載入結束後執行回撥函式
- $(選擇器字符串) 查找所有匹配對象的標籤, 將他們封裝成 j Q u e r y 對象, 注意此時嘗試輸出 ‘ c o n s o l e . l o g ($ (“input”));的結果是jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]`
- $(DOM物件): 返回將這個引數包裝成jQuery物件的物件,從而可以呼叫jQuery物件的方法
- $(HTML標籤字串) 建立標籤物件,封裝成jQUery物件,返回
- Q:為什麼這些函式的返回值都是jQuery物件?
- A:因為這是jQuery函式的事例,只能構造jQuery物件
作為一個物件去呼叫
- 可以作為工具物件,內部有工具方法
$obj.html()方法是一個讀寫合一的函式
- .html()返回物件的innerHTML
- .html(XX)將物件的innerHTML設定成XX
$obj.appendTo(content)將jQuery物件放在content的裡面的尾部,content是css選擇器字串或者是
$obj.each(陣列,function(index,n){});遍歷陣列中每一個元素的函式,回撥函式第一個引數是index第二個引數是值
$.trim(str)取出str兩邊的空格(實際上原生JS的string就有這個功能)

jQuery物件的使用

jQuery的核心函式返回的是物件
jQuery的物件內部是一個包含DOM元素物件的偽陣列(即使可能只有一個元素)
jQuery物件擁有很多的屬性和方法,讓程式設計師可以更方便的操作DOM

jQuery物件的基本行為:

size()/length 返回的是DOM元素的數目(在jQuery1.8之後size方法已經被廢棄)
[index]/get(index) 根據下標得到對應的DOM元素,注意這裡是位陣列,所以呼叫的實際上是呼叫屬性,但是陣列不能作為變數的開頭,所以使用了[1]獲取元素,注意陣列裡面的元素是DOM,所以

console.log("B2="+$("button")[2].innerHTML);
console.log("B2="+$($("button")[2]).html());

each() 遍歷,與上面的一樣,his就是被遍歷到的某一個物件
index() 獲取某個元素是在同標籤元素中的第幾個,注意與get(index)的區別

jQuery選擇器

選擇器本身是一個字串沒有作用

基本語法就是CSS選擇器的規則

只有呼叫$("選擇器")才有作用,作用是在整個文件中查詢所有匹配的標籤封裝成jQuery物件(偽陣列)

選擇器

$("#div1") id選擇器
$("div") 元素選擇器
$(".box") 類選擇器
$("div,span")並集選擇器
$("div.box")交集選擇器
$("*") 任意標籤
$("ul span") ul下的所有span
$("ul>span") ul下的子元素span
$(".box+li") .box下面的一個li
$(".box~li") .box後面的所有兄弟li
$(".box:first") 選擇第一個class為box的元素
$(".box:last") 選擇第一個class為box的元素
$("div:not(.box)") 選擇class不是box的div
$("li:eq(2)") li中第二個元素(0開始)
$("li:gt(0):lt(3)")所有li中下標大於0的元素裡面下標小於3的元素注意是鏈式呼叫,不是同時執行
$("li:contains('XXX')")內容包含XXX的li,注意切換',"
$("li:hidden") 隱藏了li
$("li:visible") 可見的li
$("li[id]") 有id屬性的li
$("li[id="hello"]") id屬性為hello的li
$("li:odd") 下標為奇數的選擇器
$("li:even") 下標為偶數的選擇器
$(":input:disabled") 不可選中的input
$(":checkbox:checked")選擇已經選中的checkbox

注意<select>的val是val元素

方法

.css("屬性名",["值"])也可以封裝成物件.css({'color':'#bfa','color':'#bfa','color':'#bfa'})

`$`工具的方法

$.each(obj,function(i,n){}) 遍歷陣列/物件中的物件
- 呼叫物件為陣列的時候兩個引數為index value
- 呼叫物件為物件的時候兩個引數為屬性名屬性值
$.trim()
$.type(obj) 返回boj的型別
$.isArray(X) 判斷X是不是陣列
$.parseJSON(json)json轉js物件

多Tab點選切換

隱式遍歷
$("div").click(function(){})相當於為所有選中元素新增

可以對比一下用不用隱式的區別

沒有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            overflow: auto;
            margin: 0;
            padding: 0;
        }
        ul>li{
            display: block;
            width: 100px;
            height: 75px;
            float: left;
        }
        .page{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li>#bfa</li>
        <li>#F00</li>
        <li>#e3e3e3</li>
    </ul>
    <div class="page">1111111111111111111111</div>
    <div class="page">2222222222222222222222</div>
    <div class="page">3333333333333333333333</div>
</body>

<script src="./js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        var index=0;
        var bts=$("ul>li");
        var pgs=$("div[class=page]");
        $.each(bts,function(i,elem){
            $(elem).css("background-color",$(this).html());
            $(pgs[i]).css("background-color",$(this).html());
            $(bts[i]).click(function(){
                index=i;
                $.each(pgs,function(i,elem){
                    if(i===index)
                        $(pgs[i]).css("display","block");
                    else
                        $(pgs[i]).css("display","none");
                });
            });
            $(bts[0]).click();
        });
    })
</script>
</html>

隱式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            overflow: auto;
            margin: 0;
            padding: 0;
        }
        ul>li{
            display: block;
            width: 100px;
            height: 75px;
            float: left;
        }
        .page{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li>#bfa</li>
        <li>#F00</li>
        <li>#e3e3e3</li>
    </ul>
    <div class="page">1111111111111111111111</div>
    <div class="page">2222222222222222222222</div>
    <div class="page">3333333333333333333333</div>
</body>

<script src="./js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        var index=0;
        var bts=$("ul>li");
        var pgs=$("div[class=page]");
        $.each(bts,function(i,n){
            $(this).css("background-color",$(this).html());
            $(pgs[i]).css("background-color",$(this).html());
        })
        bts.click(function(){
            var idx=$(this).index();
            $(this).css("background-color",$(this).html());
            $(pgs[idx]).css("background-color",$(this).html());
            pgs.css("display","none");
            $(pgs[idx]).css("display","block");
        });
        $(bts[0]).click();
    })
</script>
</html>

注意,可以使用DOM原生的方法不用jQuery,因為效率會下來,例如$(btn).css("color","red")不如btn.style.color=red

jQuery屬性

$("div:first").attr("title") 獲取第一個div的title屬性值,attr:獲取屬性值
$("div:first").attr("title","hahaha") 設定第一個div的title屬性值為hahaha
$("div:first").removeattr("title") 刪除第一個div的title屬性
$("div:first").attr("class","XXX") 設定class屬性為XXX,如果有就直接覆蓋
$("div:first").addClass("abc") 為元素新增abc這個類
$("div:first").removeClass("abc") 為元素新增abc這個類
$("div:first").html() 獲取元素的innerHTML
$("div:first").html("XXX") 設定元素的innerHTML為XXX
$("div:first").text() 獲取元素的innerText(相容性不好)
$("button:first").attr("checked",true) 設定選中為true
$("button:first").prop("checked",true) 設定選中為true

注意在HTML的表單的時候check的checked=checked但是在JS裡面寫checked=true

prop僅僅操作屬性為bool的元素,attr僅僅操作屬性為非bool的屬性

我們可以使用attr修改css的class這樣不用使用css()修改元素的樣式,這樣提高了效率

CSS模組

操作的是style屬性

$obj.css("color")obj這個元素的color屬性
$obj.css("color","red")設定obj這個元素的color屬性為red

設定obj這個元素的color屬性為red,width為150,height為200

  $obj.css(function(){
      color:"#bfa",
      height:"200px",
      width: 100
  });

注意,這裡的px可以不加

CSS位置模組

獲取元素相對於頁面左上角的距離

  var ost=$obj.offset();
  console.log(ost.left,ost.top)

獲取元素相對與父元素的距離

  var position=$obj.position();
  console.log(position.left,position.top)

offset是讀寫合一的,修改

  $obj.offset({
      left:50,
      top:20
  });

滾動高度:$Obj.scroolTop()獲取滾動條高度,同時是讀寫合一的的函式,但是全域性的滾動條高度存在相容性問題,IE是document,Chrome是html,相容方法是document.scroolTop()+html.scroolTop(),最好用這個
```
  console.log($(document.documentElement())+$(document.body).scrollTop())
```
效率高一點點,設定滾動相容性
```
  $('html,body').scrollTop(300);
```

實現滾動

直接滾動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            background-color: #3e3e3e;
            height: 100000px;
        }
        div{
            position: fixed;
            right: 100px;
            bottom: 100px;
            width: 50px;
            height: 50px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="back">回到頂部</div>
</body>
<script src="./js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        $("div").click(function(){
            $("body,html").scrollTop(0);
        });
    });
</script>
</html>

平滑滾動

<!DOCTYPE html>
<html lang="en">
<head>*
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            background-color: #3d3d3d;
            height: 100000px;
        }
        div{
            position: fixed;
            right: 100px;
            bottom: 100px;
            width: 50px;
            height: 50px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div>Back</div>
</body>

<script src="./js/jquery-3.5.1.js"></script>
<script>
    $(function(){
        var backtot=$($("div")[0]);
        console.log(backtot);
        backtot.click(function(){
            var dis=$("body,html").scrollTop();
            var per=dis/100;
            var inter=setInterval(function(){
                if($("body,html").scrollTop()<=per){
                    $("body,html").scrollTop(0);
                    clearInterval(inter);
                }
                console.log($("body,html").scrollTop());
                $("body,html").scrollTop($("body,html").scrollTop()-per);
            },2);
        });
    });
</script>

</html>

元素的尺寸

內容尺寸
- height(): height
- width(): width
內部尺寸
- innerHeight: height+padding
- innerwidth: width+padding
外部尺寸
- outerHeight(false/true): height+padding+border+引數*margin
- outerWidth(false/true): width+padding+border+引數*margin

物件的篩選

過濾: 對jQuery中的元素進行篩選
查詢: 找元素裡面的子孫
過濾的結果與原物件是存在關係的
查詢的結果與源物件之間沒有關係

感覺上和CSS選擇器類似

過濾
- 在jQuery物件內部的元素中找出部分匹配的元素, 並封裝成新的jQuery物件返回
- first()
- last()
- eq(index)
- filter(selector): 對當前元素提要求
- not(selector): 對當前元素提要求, 並取反
- has(selector): 對子孫元素提要求
查詢
- 查詢jQuery物件內部的元素的子孫/兄弟/父母元素, 並封裝成新的jQuery物件返回
- children(selector): 子元素
- find(selector): 後代元素
- preAll(selector): 前的所有兄弟
- siblings(selector): 所有兄弟
- parent(): 父元素

jQuery的文件處理

在元素內部插入
- $被插入元素.append("HTML程式碼") 插入到被插入元素的尾部
- 要新增的HTML程式碼的jQuery物件.appendTo("被插入元素選擇器/$obj") 插入到被插入元素的尾部
- $被插入元素.prepend("HTML程式碼") 插入到被插入元素的首部
- 要新增的HTML程式碼的jQuery物件.prependTo("被插入元素選擇器/$obj") 插入到被插入元素的首部
在元素外部(同級)插入
- $被參考元素.before("HTML程式碼") 在被參考元素前面插入
- $被參考元素.after("HTML程式碼") 在被參考元素後面面插入
替換
- $被替換元素.replaceWith("HTML程式碼") 用HTML程式碼替換被替換元素
- $被替換元素.replaceAll("CSS選擇器")用選擇器選中的元素替換$obj
刪除
- $obj.empty() 清空obj裡面的元素
- $obj.remove() 清空obj以及他的子元素

事件

頁面載入:ready(function(){})就是$(function(){})的縮寫

事件的繫結與解邦

點選函式
- $obj.click(function(){})
- $obj.on("click",function(){})
- 第一個簡潔第二個通用(對於沒有繫結事件的方法)
滑鼠移出入
- $obj.mouseenter(function(){});&$obj.mouseleave(function(){});`
- $obj.on("mouseenter",function(){});&$obj.on(“mouselive”,function(){});`
- $obj.hover(function(){},function(){}) 先寫入後寫出
解除某個元素的所有監聽
- $obj.off()
解除某個元素的指定監聽
- $obj.off("監聽名")
事件座標
- 在click等事件內部想獲得觸發事件元素的座標可以在回撥函式上加入event
- 元素距離視口左上角座標:event.clientX,event.clientY
- 元素距離頁面左上角座標:event.pageX,event.pageY
- 事件元素左上角座標:event.offsetX,event.offsetY
取消事件冒泡
- event.stopPropagation()取消事件的冒泡行為(指的是冒泡給父元素)
- event.preventDefuat()取消預設行為

事件的委託

在append元素之後新的元素不會繫結原有的事件,可以在建立的時候再次繫結,也可以使用事件的委託
事件的委託就是將子元素的事件代為父元素處理,用event.target獲得子元素
新增事件委託$受委託.delegate("委託元素選擇器","委託事件",回撥函式function(){})
移除事件委託$受委託.undelegate(["委託元素選擇器"],["委託事件"],[回撥函式function(){}])不寫就是對應專案的全部

輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/script.js"></script>
</head>
<body>
    <div class="outer">
        <div class="imgs">
            <img src="./img/imgs3.jpg" class="innerimg">
            <img src="./img/imgs0.jpg" class="innerimg">
            <img src="./img/imgs1.jpg" class="innerimg">
            <img src="./img/imgs2.jpg" class="innerimg">
            <img src="./img/imgs3.jpg" class="innerimg">
            <img src="./img/imgs0.jpg" class="innerimg">
        </div>
        <div class="nodes">
        </div>
        <a href="javascript:;" class="btn lst">&lt;</a>
        <a href="javascript:;" class="btn nxt">&gt;</a>
    </div>
</body>
</html>

body,html{
    margin: 0;
    padding: 0;
    background-color: #bfa;
}

.outer{
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    margin: 100px auto;
    background-color: #fff;
    .imgs{
        width: 99999px;
        height: 300px;
        position: absolute;
        left: 0;
        top: 0;
        img{
            width: 400px;
            height: 300px;
            float: left;
            text-align: top;
        }
    }
    .nodes{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: #000;
        width: 100px;
        height: 15px;
        bottom: 50px;
        text-align: center;
        a{
            background-clip: content-box;
            display: block;
            float: left;
            border-radius: 50%;
            background-color: rgba(255,255,255,.4);
            width: 8px;
            height: 8px;
            border: 1px rgba(255,255,255,.4) solid;
            margin: 3px 4px 0 0;
            text-align: center;
        }
        .active{
            width: 9px;
            height: 9px;
            margin-top: 0;
            background-color: #fff;
            border: 3px rgba(255,255,255,.4) solid;
        }
        a:hover{
            .active
        }
    }
    .btn{
        color: rgba(255,255,255,.4);
        text-decoration: none;
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 30px;
        background-color: rgba(0,0,0,0.5);
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        font-weight: 1000;
        &.lst{
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        &.nxt{
            right: 0px;
            border-radius: 15px 0 0 15px;
        }
    }
}

$(function(){
    // ====== consts ======
    var PIC_WIDTH=400;
    var DOT_SZIE=10;
    var DOT_ACTIVE_SIZE=15;
    var DOT_MARGE=4;
    var PIC_Time=500;
    var PIC_Intr=2000;
    
    // ====== jQuery Object ======
    var $dot;
    var $dotOut=$(".nodes");
    var $btns=$(".btn");
    var $imgOut=$(".imgs");
    var $imgs=$("img");

    // ====== variable ======
    var index=0;
    var pics=$imgs.length-2
    var curGlbInt=-1,curPssInt=-1;

    // ====== resize ======
    for(var i=0;i<pics;i++)
        $dotOut.append('<a class="node" id="'+i+'dotBtn"></a>');
    $dot=$(".node");
    $dotOut.css("width",DOT_SZIE*$dot.length+DOT_MARGE*($dot.length)+2*(DOT_ACTIVE_SIZE-DOT_SZIE));
    $imgOut.css("width",$imgs.length*PIC_WIDTH);
    $imgOut.css("left",-PIC_WIDTH);

    // ====== base fn ======
    function pause(){
        if(curGlbInt+1)clearInterval(curGlbInt);curGlbInt=-1;
        if(curPssInt+1)clearInterval(curPssInt);curPssInt=-1;
    }

    function runPage(global){
        if(curPssInt+1)return;
        $dot.removeClass("active")
        $($dot[global%pics]).addClass("active");
        var L0=$imgOut.position().left;
        var L1=-(global+1)*PIC_WIDTH;
        var speed=(L1-L0)/(PIC_Time/(1000/12));
        curPssInt=setInterval(function(){
            if(($imgOut.position().left-L1)*($imgOut.position().left-L1+speed)<=0){
                if(curPssInt+1)clearInterval(curPssInt);
                curPssInt=-1;
                $imgOut.css("left",L1);
                if(L1==-5*PIC_WIDTH)$imgOut.css("left",-PIC_WIDTH);
                if(L1==0)$imgOut.css("left",-4*PIC_WIDTH);
            }else{
                $imgOut.css("left",$imgOut.position().left+speed);
            }
        },1000/12);
    }

    function glbRun(){
        curGlbInt=setInterval(function(){
            index=index%pics+1;
            runPage(index);
        },PIC_Intr);
    }
    
    function clickRun(step){
        index=index%pics+step
        runPage(index)
        if(index<0)index=pics-1;
    }

    $($btns[0]).click(function(){
        if(curPssInt+1)return;
        pause();
        clickRun(-1);
        glbRun();
    });

    $($btns[1]).click(function(){
        if(curPssInt+1)return;
        pause();
        clickRun(1);
        glbRun();
    });

    $imgOut.hover(function(){
        if(curGlbInt+1)clearInterval(curGlbInt);curGlbInt=-1;
    },glbRun);

    $dot.mouseenter(function(){
        if(curGlbInt+1)clearInterval(curGlbInt);curGlbInt=-1;
        if(curPssInt+1)clearInterval(curPssInt);curPssInt=-1;
        index=parseInt($(this).index());
        runPage(index);
    });

    glbRun();
    $($dot[0]).addClass("active")
});

效果

淡入淡出
- $obj.fadeOut() 本質上是修改了元素的透明度實現淡出
- $obj.fadeOut(["slow"/"normal"/"fase"/ms數值]) 本質上是修改了元素的透明度實現淡出,加入了執行時間
- $obj.fadeOut()淡入,同上
- $obj.fadeToggle()切換淡出淡入
- 可以在上面函式中加入一個回撥函式,會在動畫執行結束後執行$obj.fadeOut(1000,function(){})
滑動
- 滑動動畫: 不斷改變元素的高度實現
- slideDown(): 帶動畫的展開
- slideUp(): 帶動畫的收slideToggle(): 帶動畫的切換展開/收縮
顯示隱藏，預設沒有動畫, 動畫(opacity/height/width)
- show(): (不)帶動畫的顯示
- hide(): (不)帶動畫的隱藏
- toggle(): (不)帶動畫的切換顯示/隱藏
自定義動畫
- $obj.animate({css樣式物件},執行時間)同時將多個動畫完成
- $obj.animate({css樣式物件1}).animate({CSS物件樣式2})...一步步執行
- 好用的東西,移動指定的增量
```
  $obj.animate({
      left: "+=100",2
      top:  "-=50"
  })
```

多庫共存

如果引用的兩個庫同時呼叫了$屬性那麼會發生衝突
這個時候我們希望jQuery會自動放棄$的使用權,開發者只可以使用jQuery函式
只需要在jQuery正式使用前呼叫jQuery.noConflict();

`$(fun(){})`與`window.onload=function(){}`的區別

有三種方法定義載入完成函式

window.onload=function(){}
$obj.on("load",function(){})
$(function(){})
$(document).ready(function(){})

其中

第三個和第四個函式是等價的
第一個是文件載入完成的回撥函式
第二個是元素載入完成之後的回撥函式
第一個是在文件載入結束(圖片視訊等載入結束之後)
第二個是在選中資源(影像等)完全載入結束回撥
第三四是在文件載入完成,不管影像怎麼樣,相當於文件解析完成執行
jQuery的多個函式可以同時繫結到一個元素,但是window.onload不可以,存在覆蓋,只能使用append新增

jQuery外掛

jQuery.fn.extend([fun1:function(){},fun2:function(){},...])他可以擴充套件jQuery物件的方法,呼叫之後我們可以使用$obj.fun1()
jQuery.extend([fun1:function(){},fun2:function(){},...])他可以擴充套件jQuery函式的方法,呼叫之後我們可以使用$.fun1()

常見外掛

jQuery-validation:一個表單驗證的外掛

可以實現瀏覽器端同步的簡單表單驗證,舉例

<form id="myForm" action="xxx">
    <p>使用者名稱(必須的, 最小2位): <input name="name" type="text" required minlength="2"></p>
    <p>密碼(必須的, 6到8位): <input id="password" name="pwd" type="password" required minlength="6" maxlength="8"></p>
    <p>確認密碼(與密碼相同): <input name="pwd2" type="password" equalTo="#password"></p>
    <input class="submit" type="submit" value="提交">
</form>

執行發現似乎前兩個可以驗證,但是第三個掛了,提示的樣式感覺是chrome原生的提醒,沒錯,其實外掛並沒有允許,只不過chrome恰好有相同的命令所以是直接由瀏覽器接管的,想要使用外掛還需要告訴外掛那個表單需要進行驗證,只需要自己在後面寫下js

<script>
    $("#myForm").validate();
</script>

全部的方法有:

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
step: $.validator.format( "Please enter a multiple of {0}." )

之後我們需要進行中文化處理,修改剛剛的js程式碼

<script>
    $("#myForm").validate({
        messages:{
            要修改標籤的name:{
                標記的屬性1:"提示資訊1", 
                標記的屬性2:"提示資訊2"
            },
            pwd:{
                minlength: "輸入的是什麼玩意(手動狗頭)"
            }
        }
    });
</script>

可以修改提示資訊的css樣式(上面有class)

jQuery UI

是jquery的一個外掛,在下載之後看demo.html的樣式自取,注意

需要引用的檔案有
- 在<head></head>裡面寫<link rel="stylesheet" href="./js/UIforUse/jquery-ui.css">
- 在引入jQuery與jquery-ui.js兩個js檔案,jQuery優先,這是因為第二個庫是依賴jQuery執行的,而不想less是後面的庫要編譯我們寫的less檔案
- 只需要複製給出了html程式碼然後記得把對應的js貼上上,例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/UIforUse/jquery-ui.css">
</head>
<body>
    <!-- 1. 手風琴 -->
    <h2 class="demoHeaders">Accordion</h2>
    <div id="accordion">
        <h3>First</h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        <h3>Second</h3>
        <div>Phasellus mattis tincidunt nibh.</div>
        <h3>Third</h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>

    <!-- 2. 自動補全 -->
    <h2 class="demoHeaders">Autocomplete</h2>
    <div>
        <input id="autocomplete" title="type &quot;a&quot;">
    </div>

    <!-- 3. 選項卡 -->
    <h2 class="demoHeaders">Tabs</h2>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>

</body>
<script src="./js/jquery-3.5.1.js"></script>
<script src="./js/UIforUse/jquery-ui.js"></script>
<script>
    // for 1
    $("#accordion").accordion()

    // for2
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#autocomplete" ).autocomplete({
        source: availableTags
    });

    // for 3
    $( "#tabs" ).tabs();    

    
</script>
</html>

laydate
- 目前已經更新,教程失效,直接看官方文件

京東商品頁

除了js之外其他都是模板沒動(引用了jquery和自定義js),筆記在js裡面

$(function(){       // 寫的是js檔案,所以最好封裝起來
    // 滑鼠移動
    function hoverShowItem(){
        $('[name="show_hide"]').hover(
            function(){
                // $(this).find("#"+this.id+"_items").css("display","block");
                $("#"+this.id+"_items").show();
            },function(){
                // $(this).find("#"+this.id+"_items").css("display","none");
                $("#"+this.id+"_items").hide();
            }
        );
    }
    // subsubshow
    function subsubshow(){
        $('.cate_item').hover(
            function(){
                // $(this).find(".sub_cate_box").show()
                $(this).children(":last").show()
            },function(){
                // $(this).find(".sub_cate_box").hide()
                $(this).children(":last").hide()
            }
        );
    }

    function inputShow(){
        $("#txtSearch")
            .on("keyup force",function(){
                if($(this).val().trim)
                    $(this).parent().prevAll("#search_helper").show();
            })
            .blur(function(){
                $(this).parent().prevAll("#search_helper").hide();
            });
    };

    function sharemore(){
        // 注意陣列順序!!!
        $("#shareMore").click(function(){
            if($(this).prevAll("a").filter(":first").css("display")=="block"){
                $(this).prevAll("a").filter(":lt(2)").hide();
                $(this).parent().css({"width":"-="+parseInt($(this).css("width"))*2});
                $(this).children("b").css("backgroundPositionX",'-271px')
            }else{
                $(this).prevAll("a").show();
                $(this).parent().css({"width":"+="+parseInt($(this).css("width"))*2});
                $(this).children("b").css("backgroundPositionX",'-263px')
            }
        });
    }

    function selAddr(){
        var menus=$("#store_select").children(".text").nextAll();
        $("#store_select").hover(function(){
            menus.show();
        },function(){
            menus.hide();
        });

        $("#store_close").click(function(){
            if($(this).css("display")=="block")
                menus.hide();
        });

        $("#store_items>li>a").click(function(){
            $("#store_tabs>li")[0].innerHTML=$(this).html()+"<b></b>"
        });
    }

    function chgPage(){
        $("#product_detail>ul>li").click(function(){
            $(this).parent().children().removeClass("current");
            $(this).addClass("current");
            $(this).parent().nextAll("div:gt(0)").hide();
            $($(this).parent().nextAll("div:gt(0)")[$(this).index()]).show();
        })
    }

    function minicar(){
        $("#minicart>p>a").hover(
            function(){
                $(this).parent().parent().children("div").show()
            },function(){
                $(this).parent().parent().children("div").hide()
            }
        )
    }

    function prew(){
        var curPic=0;
        function check(){
            if(curPic==0){
                $("#preview>h1>a").filter("[class^=backward]").addClass("backward_disabled");
                $("#preview>h1>a").filter("[class^=backward]").removeClass("backward");
            }else{
                $("#preview>h1>a").filter("[class^=backward]").addClass("backward");
                $("#preview>h1>a").filter("[class^=backward]").removeClass("backward_disabled");                
            }
            if(curPic==$("#icon_list>li").length-1){
                $("#preview>h1>a").filter("[class^=forward]").addClass("forward_disabled");
                $("#preview>h1>a").filter("[class^=forward]").removeClass("forward")
            }else{
                $("#preview>h1>a").filter("[class^=forward]").addClass("forward");
                $("#preview>h1>a").filter("[class^=forward]").removeClass("forward_disabled")
            }
        }

        $("#icon_list>li").click(function(){
            $(this).parent().find("li>img").css({
                border:"none"
            });
            $(this).children("img").css({
                border:"1px red solid"
            });
            $(this).show();
            $("#mediumImg").attr("src",$(this).find("img").attr("src").replace(".jpg","-m.jpg"));
            if($(this).nextAll().length>=4)
                $(this).prevAll().hide();
            curPic=$(this).index();
            check()
        });

        $(".forward").click(function(){
            $($("#icon_list>li")[curPic+1]).click();
        });

        $("#preview>h1>a").click(function(){
            if($(this).hasClass("backward"))
                $($("#icon_list>li")[curPic-1]).click();
            else if($(this).hasClass("forward"))
                $($("#icon_list>li")[curPic+1]).click();
        });

        $("#icon_list>li")[0].click();
    }

    function mymousemove(){
        $("#maskTop").hover(showIMG,hideIMG);
        $("#maskTop").on("mousemove",function(e){
            var x=e.offsetX,y=e.offsetY;
            var seqX,seqY;
            seqX=x-$("#mask").width()/2;
            seqY=y-$("#mask").height()/2;
            seqX=Math.max(Math.min(seqX,$(this).width()-$("#mask").width()),0);
            seqY=Math.max(Math.min(seqY,$(this).height()-$("#mask").height()),0);
            $("#mask").css({
                top:seqY,
                left:seqX,
            });
            $("#largeImg").css({
                left: -$("#mask").position().left/$(this).width()*$("#largeImg").width(),
                top: -$("#mask").position().top/$(this).height()*$("#largeImg").height()
            })
        });
        function showIMG(){
            $("#mask").css("display","block");
            $("#largeImg").attr("src",$("#mediumImg").attr("src").replace("-m.jpg","-l.jpg"));
            $("#largeImg").css("display","block");
            $("#largeImgContainer").show();
        }
        function hideIMG(){
            $("#mask").hide();
            $("#largeImg").css({display:"none",position:"absolute"});
            $("#largeImgContainer").hide();
        }
    }

    hoverShowItem();
    subsubshow();
    inputShow();
    sharemore();
    selAddr();
    chgPage();
    minicar();
    prew();
    mymousemove();
});

三天學會MySQL學習筆記尚矽谷婷姐
2020-12-06
MySql筆記
2018最新尚矽谷Git和GitHub視訊教程
2018-12-27
Github
尚矽谷Java基礎——學習程式碼和筆記_day02
2020-11-27
Java筆記
尚矽谷_Java零基礎教程（物件導向上）--學習筆記（十一）
2020-11-18
Java物件筆記
尚矽谷MySQL學習筆記(Day_6)-流程控制結構介紹
2020-12-07
MySql筆記
ssm高階整合尚矽谷
2020-12-02
SSM
尚矽谷_初級_java基礎
2020-10-20
Java
jQuery筆記
2018-08-13
jQuery筆記
jQuery 筆記
2022-11-23
jQuery筆記
19.Java學習筆記第十九節——多執行緒（尚矽谷視訊整理）
2020-10-06
Java筆記執行緒
尚矽谷 springboot 從入門到精通
2019-02-15
Spring Boot
尚矽谷springboot視訊資料分享
2018-07-25
Spring Boot
002-尚矽谷Hibernate視訊教程
2020-11-22
尚矽谷Doris視訊教程釋出
2022-05-06
尚矽谷SeaTunnel視訊教程釋出
2022-04-22
尚矽谷Nginx新版視訊教程釋出
2022-03-31
Nginx
尚矽谷Linux新版視訊教程釋出
2022-04-08
Linux
jQuery學習筆記
2018-05-11
jQuery筆記
jQuery 學習筆記
2019-08-06
jQuery筆記
尚矽谷Java視訊教程_SpringCloud視訊教程
2018-11-07
JavaSpringGCCloud
【視訊分享】尚矽谷Java視訊教程_Dubbo
2018-08-28
Java
尚矽谷《MySQL高階特性篇》教程釋出
2022-01-13
MySql
尚矽谷Flink（Java）新版視訊教程釋出
2022-03-17
Java
【尚矽谷-Java學習】5.3 關鍵字 super
2020-12-03
Java
Jquery學習筆記（一）
2018-08-18
jQuery筆記
jQuery學習筆記03
2020-09-27
jQuery筆記
Jquery基礎筆記一
2020-11-19
jQuery筆記
jQuery 學習系列筆記
2021-09-09
jQuery筆記
jQuery學習筆記（ajax）
2021-09-09
jQuery筆記
jQuery 學習筆記：jQuery 程式碼結構
2018-05-07
jQuery筆記
尚矽谷大資料視訊_Shell視訊教程
2018-10-12
大資料
JavaWeb尚矽谷書城專案思維導圖
2020-10-25
JavaWeb
尚矽谷Spring4視訊教程免費下載
2018-09-12
Spring
尚矽谷Mysql高階day5(p29-30)
2021-01-01
MySql
最新熱乎的尚矽谷Docker核心技術視訊教程
2018-12-19
Docker
13. 尚矽谷_Java8新特性_Stream API 練習
2020-11-11
JavaAPI
尚矽谷2022版Java課程體系，霸氣來襲
2022-01-21
Java
尚矽谷監控告警系統（Zabbix）視訊教程釋出
2022-03-24