JS實用技巧大匯總在日常的前端開發(fā)工作中,我們會頻繁使用JavaScript來實現(xiàn)各種功能。但是有許多小技巧很容易被忽略,卻能極大地提高我們的開發(fā)效率。本文就整理了一些常用但容易遺忘的JS技巧,希望能

JS實用技巧大匯總

在日常的前端開發(fā)工作中,我們會頻繁使用JavaScript來實現(xiàn)各種功能。但是有許多小技巧很容易被忽略,卻能極大地提高我們的開發(fā)效率。本文就整理了一些常用但容易遺忘的JS技巧,希望能給大家的工作帶來幫助。

獲取瀏覽器寬高

獲取瀏覽器窗口的可見區(qū)域?qū)捀呤且粋€非常常見的需求。我們可以使用以下幾種方式實現(xiàn):

可見區(qū)域?qū)挾龋篳`

可見區(qū)域高度：``

網(wǎng)頁可見區(qū)域?qū)挘篳`

網(wǎng)頁可見區(qū)域高：``

網(wǎng)頁可見區(qū)域?qū)挘òㄟ吘€的寬）：``

網(wǎng)頁可見區(qū)域高（包括邊線的高）：``

網(wǎng)頁正文全文寬：``

網(wǎng)頁正文全文高：``

獲取URL參數(shù)

在前端開發(fā)中,我們經(jīng)常需要從URL中獲取某些參數(shù)的值。可以使用如下函數(shù)實現(xiàn):

```javascript

function GetQueryString(name) {

var reg new RegExp("(^|)" name "([^]*)(|$)");

var r (1).match(reg);

if(r!null)return decodeURI(r[2]); return null;

}

```

這個函數(shù)可以根據(jù)參數(shù)名稱獲取URL中對應的參數(shù)值。如果需要一次性獲取所有參數(shù)值,只需對該函數(shù)進行簡單改造即可。

隱藏滾動條

有時候我們希望頁面上存在滾動條的功能,但又不希望看到滾動條本身?？梢栽贑SS中加入以下樣式實現(xiàn):

```css

::-webkit-scrollbar {

width: 0;

}

```

這樣即可達到滾動條有效但不顯示的效果。需要注意的是,該方法在Google瀏覽器上經(jīng)測試有效,其他瀏覽器可自行嘗試。

操作Cookie

通過以下三個函數(shù),我們可以實現(xiàn)對Cookie的讀寫操作:

```javascript

function setCookie(name,value){

var Days 30;

var exp new Date();

(() Days*24*60*60*1000);

name "" escape (value) ";expires" ();

}

function getCookie(name){

var arr,regnew RegExp("(^| )" name "([^;]*)(;|$)");

if(arr(reg))

return unescape(arr[2]);

else

return null;

}

function delCookie(name){

var exp new Date();

(() - 1);

var cvalgetCookie(name);

if(cval!null)

name "" cval ";expires" ();

}

```

調(diào)用Python代碼

有時我們需要在前端調(diào)用后端的Python代碼,可以通過AJAX的方式實現(xiàn):

```javascript

var data {"kind": "user_login", "table": table, "query_condition_field_list": ([field]), "query_condition_value_list": ([value])};

$.ajax({

type : "post",

url : "", // 調(diào)用的Python文件

data : data,

async : false, // 指定同步請求

dataType:"json",

success : function(recv_data) {

if(recv_data["return_data"]["email"] "") { // 已存在該用戶

result true;

}

}

});

```

這里不使用`$.post`的原因在于`$.post`默認是異步請求,而這里我們需要同步請求。

獲取當前日期

獲取當前日期是一個非常常見的需求,可以通過以下函數(shù)實現(xiàn):

```javascript

function getNowFormatDate(style) {

var currentdate "";

var date new Date();

var seperator1 "-";

var month () 1;

var strDate ();

if (month > 1 month < 9) {

month "0" month;

}

if (strDate > 0 strDate < 9) {

strDate "0" strDate;

}

if(style "YMD") { // 年月日

currentdate () seperator1 month seperator1 strDate;

return currentdate;

} else { // 年月日 時分秒

var seperator2 ":";

currentdate () seperator1 month seperator1 strDate " " () seperator2 () seperator2 ();

return currentdate;

}

}

```

這個函數(shù)可以根據(jù)不同的style參數(shù)返回當前日期的字符串格式。如果需要其他日期,也可以通過該函數(shù)進行調(diào)整。

頁面跳轉(zhuǎn)

實現(xiàn)頁面跳轉(zhuǎn)的方式有以下幾種:

```javascript

"url"; // 跳轉(zhuǎn)到指定的URL

(-1); // 返回

("url"); // 跳轉(zhuǎn)到指定的URL

Welcome // 打開一個新的窗口

```

以上方式各有優(yōu)缺點,可根據(jù)具體需求進行選擇。

綜上所述,這些JS技巧雖然看似簡單,但在實際開發(fā)中卻非常實用。希望通過本文的整理,能幫助大家更好地提高開發(fā)效率,減少不必要的查找時間。