3.5 JavaScript——常用庫

安河桥北i發表於2024-07-27
JavaScript

jQuery 更加方便控制前端元件和屬性

使用方式

  • 在<head>元素中新增：
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  • 按jQuery官網提示下載

選擇器

$(selector)類似於CSS選擇器。例如：

let $div = $('div');//透過jQuery獲取div，$符號用於識別jQuery變數
let $div = $('.big-div');//透過jQuery獲取類名為.big-div
let $div = $('div > p');//透過jQuery獲取div的子元素p

事件

$(selector).on(event, func)繫結事件，例如：

$div.on("click",function() {
	console.log("click div");
});

$(selector).click(func)繫結事件，例如：

    $div.click(function() {
        $div.off("click");//解除繫結
    });

$(selector).off(event, func)刪除事件，例如：

$('div').on('click', function (e) {
    console.log("click div");
    $('div').off('click');
});

當存在多個相同型別的事件觸發函式時，可以透過click.name來區分，例如：

$('div').on('click.first', function (e) {
    console.log("click div");

    $('div').off('click.first');
});

在事件觸發的函式中的return false等價於同時執行：
e.stopPropagation()：阻止事件向上傳遞，例如：

<div>
     <a href="https://www.acwing.com" target="_blank">AcWing</a>
</div>

點選連結的同時會觸發div的click函式
e.preventDefault()：阻止事件的預設行為

元素的隱藏、展現

  • $A.hide()：隱藏，可以新增引數，表示消失時間
  • $A.show()：展現，可以新增引數，表示出現時間
  • $A.fadeOut()：慢慢消失，可以新增引數，表示消失時間
  • $A.fadeIn()：慢慢出現，可以新增引數，表示出現時間
function main(){
    let $div = $('div');//透過jQuery獲取div，$符號用於識別jQuery變數
    let $btn_hide = $('.btn-hide');
    let $btn_show = $('.btn-show');
    $btn_hide.click(function () {
        $div.fadeOut(500); 
    });
    $btn_show.click(function() {
        $div.fadeIn(500);
    });
}

<button class="btn-hide">隱藏</button>
<button class="btn-show">出現</button>

元素的新增、刪除

$('<div class="mydiv"><span>Hello World</span></div>')：構造一個jQuery物件
$A.append($B)：將\(B新增到\)A的末尾
$A.prepend($B)：將\(B新增到\)A的開頭
$A.remove()：刪除元素 $ A
$A.empty()：清空元素$A的所有兒子

對類的操作

  • $A.addClass(class_name)：新增某個類
  • $A.removeClass(class_name)：刪除某個類
  • $A.hasClass(class_name)：判斷某個類是否存在

對CSS的操作

$("div").css("background-color")：獲取某個CSS的屬性
$("div").css("background-color","yellow")：設定某個CSS的屬性
同時設定多個CSS的屬性：

$('div').css({
    "width": "200px",
    "height": "200px",
    "background-color": "orange",
});

對標籤屬性的操作

$('div').attr('id')：獲取屬性
$('div').attr('id', 'ID')：設定屬性

對HTML內容、文字的操作

不需要背每個標籤該用哪種，用到的時候Google或者百度即可。
$A.html()：獲取、修改HTML內容
$A.text()：獲取、修改文字資訊
$A.val()：獲取、修改文字的值

查詢

  • $(selector).parent(filter)：查詢父元素
  • $(selector).parents(filter)：查詢所有祖先元素
  • $(selector).children(filter)：在所有子元素中查詢
  • $(selector).find(filter)：在所有後代元素中查詢

ajax 與後端互動

常見場景：頁面區域性重新整理資料

GET方法

$.ajax({
    url: url,
    type: "GET",
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

POST方法

$.ajax({
    url: url,//後端連結
    type: "POST",
    data: {//引數
    },
    dataType: "json",
    success: function (resp) {//成功時從resp解析內容

    },
});

定時器有關函式

setTimeout(func, delay)

delay毫秒後，執行函式func()。

clearTimeout()

關閉定時器，例如：

let $btn_hide = $('.btn-hide');
let $btn_show = $('.btn-show');
let timer = null;
$btn_hide.click(function () {
	clearTimeout(timer);
});
$btn_show.click(function() {
	timer = setInterval(() => {
		console.log("hhh");
	}, 1000);
});

setInterval(func, delay)

每隔delay毫秒，執行一次函式func()。
第一次在第delay毫秒後執行。

clearInterval()

關閉週期執行的函式，例如：

let interval_id = setInterval(() => {
    console.log("Hello World!")
}, 2000);  // 每隔2秒，輸出一次"Hello World"

clearInterval(interval_id);  // 清除週期執行的函式

requestAnimationFrame(func)

該函式會在下次瀏覽器重新整理頁面之前執行一次，通常會用遞迴寫法使其每秒執行60次func函式。呼叫時會傳入一個引數，表示函式執行的時間戳，單位為毫秒。

    let func = function(timestamp){
        console.log(timestamp);
        last_timestamp = timestamp;

        div_1.style.width = div_1.clientWidth + 1 + 'px';//每幀將div寬度加1
        if(timestamp / 1000 <= 5){ //持續5秒
            func_id = requestAnimationFrame(func);
        }
    };

cancelAnimationFrame(func)

停止AnimationFrame的執行，需要傳入函式控制代碼。

與setTimeout和setInterval的區別

requestAnimationFrame渲染動畫的效果更好，效能更強。
該函式可以保證每兩次呼叫之間的時間間隔相同，但setTimeout與setInterval不能保證這點。setTmeout兩次呼叫之間的間隔包含回撥函式的執行時間；setInterval只能保證按固定時間間隔將回撥函式壓入棧中，但具體的執行時間間隔仍然受回撥函式的執行時間影響。
當頁面在後臺時，因為頁面不再渲染，因此requestAnimationFrame不再執行。但setTimeout與setInterval函式會繼續執行。

Map與Set

Map

Map 物件儲存鍵值對。

  • 用for...of或者forEach可以按插入順序遍歷。
  • 鍵值可以為任意值，包括函式、物件或任意基本型別。
  • set(key, value)：插入鍵值對，如果key已存在，則會覆蓋原有的value
  • get(key)：查詢關鍵字，如果不存在，返回undefined
  • size：返回鍵值對數量
  • has(key)：返回是否包含關鍵字key
  • delete(key)：刪除關鍵字key
  • clear()：刪除所有元素
function main(){
    let map = new Map();
    map.set('name','zjq');
    map.set('age','18');

    console.log(map.has('age'));
    console.log(map.get("name"));
    console.log(map.size);
    console.log(map.delete('age'));

    //遍歷方式1
    map.forEach((value,key) =>{
        console.log(key,value);
    });

    //遍歷方式2
    for(let [key,value] of map){
        console.log(key,value);
    }
}

export{
    main
};

Set

Set 物件允許你儲存任何型別的唯一值，無論是原始值或者是物件引用。

  • 用for...of或者forEach可以按插入順序遍歷。
  • add()：新增元素
  • has()：返回是否包含某個元素
  • size：返回元素數量
  • delete()：刪除某個元素
  • clear()：刪除所有元素
function func(){
    console.log("123");
}

function main(){
    let map = new Map();
    let set = new Set();
    set.add('yxc');
    set.add(18);
    set.add(func);//可新增函式型別成員
    set.delete(18);
    console.log(set.size);
    console.log(set.has(func));
    set.clear();
    console.log(set.size);
}

export{
    main
};

localStorage 可以在使用者的瀏覽器上儲存鍵值對

常用API：

  • setItem(key, value)：插入
  • getItem(key)：查詢
  • removeItem(key)：刪除
  • clear()：清空
    示例
function main(){
    localStorage.setItem('name','yxc');
    localStorage.setItem('age',18);
    console.log(localStorage.getItem('name'));
    localStorage.removeItem('name');
    console.log(localStorage);
    localStorage.clear();
    console.log(localStorage);
}

持久化儲存資料

image

JSON

JSON物件用於序列化物件、陣列、數值、字串、布林值和null。
常用API：
JSON.parse()：將字串解析成物件
JSON.stringify()：將物件轉化為字串
示例

function main(){
    let obj = {
        'name':'yxc',
        'age':18,
        'sex':'male'
    }

    let json = JSON.stringify(obj);//物件轉換成json字串
    console.log(json);
    let obj1 = JSON.parse(json);//json字串轉換為物件
    console.log(obj1);
}

日期

返回值為整數的API，數值為1970-1-1 00:00:00 UTC（世界標準時間）到某個時刻所經過的毫秒數：

  • Date.now()：返回現在時刻。
  • Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京時間2022年4月15日 15:30:00的時刻。

與Date物件的例項相關的API：

  • new Date()：返回現在時刻。
  • new Date("2022-04-15T15:30:00.000+08:00")：返回北京時間2022年4月15日 15:30:00的時刻。
  • 兩個Date物件例項的差值為毫秒數
  • getDay()：返回星期，0表示星期日，1-6表示星期一至星期六
  • getDate()：返回日，數值為1-31
  • getMonth()：返回月，數值為0-11
  • getFullYear()：返回年份
  • getHours()：返回小時
  • getMinutes()：返回分鐘
  • getSeconds()：返回秒
  • getMilliseconds()：返回毫秒
    示例
function main(){
    let time_now = new Date(Date.now()),time_go = new Date("2024-07-27T15:30:00.000+08:00");
    console.log(time_go - time_now);
    console.log(time_go.getFullYear());
    console.log(time_go.getMonth());
    console.log(time_go.getDate());
    console.log(time_go.getDay());
    console.log(time_go.getHours());
    console.log(time_go.getMinutes());
    console.log(time_go.getSeconds());
    console.log(time_go.getMilliseconds());
}

WebSocket

與伺服器建立全雙工連線。
常用API：

  • new WebSocket('ws://localhost:8080');：建立ws連線。
  • send()：向伺服器端傳送一個字串。一般用 JSON將傳入的物件序列化為字串。
  • onopen：類似於onclick，當連線建立時觸發。
  • onmessage：當從伺服器端接收到訊息時觸發。
  • close()：關閉連線。
  • onclose：當連線關閉後觸發。

Window

  • window.open("https://www.acwing.com")在新標籤欄中開啟頁面。
  • location.reload()重新整理頁面。
  • location.href = "https://www.acwing.com"：在當前標籤欄中開啟頁面。
    示例
let btn1 = $('.btn-show');
let btn2 = $('.btn-hide');

function main(){
    btn1.click(function(){
        window.open("https://www.acwing.com");
    });

    btn2.click(function(){
        location.reload();
    })
}

Canvas

Canvas

相關文章