JS常見用法(1)-- js操作

返回上一頁:
<button onclick="goBack()">返回上一頁</button>
<script>
 function goBack(){
   window.history.go(-1)     -2即為退后2頁
 }
</script>
點擊回到頂部
// 頁面回到頂部
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
// 某個div回到頂部
document.getElementById('divBox').scrollTop = 0
vue報錯
  • 解決辦法:
this.$nextTick(() => {
      document.getElementById('videoBox').scrollTop = 0
}) 
a標簽跳轉(zhuǎn)錨點到頁面指定位置

https://blog.csdn.net/wangweiscsdn/article/details/55100448

正則
 if (!patrn.test(this.inputValue)) {
          _g.toastMsg('warning', '場號必須是數(shù)字')
          return
        }
        let arr = this.inputValue.split('')
        if (arr.length !== 3) {
          _g.toastMsg('warning', '長度在3個字符')
          return
        }
        if (!this.inputValue) {
          _g.toastMsg('warning', '請輸入場號/集號')
          return
        }
JS獲取HTML DOM元素的8種方法
let odiv = document.getElementById('id')
odiv.style.color = '#000'

https://www.jb51.net/article/116460.htm

獲取鼠標點擊位置坐標

https://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html

js 點擊事件
document.getElementById("jsOnClick").onclick = clickHandler2;

https://www.cnblogs.com/wenb/p/5956243.html

鍵盤按下事件(keydown)
$(document).keydown(function(event){
 if(event.keyCode == 13){
   alert('你按下了Enter'); 
 }
});

https://www.cnblogs.com/pangpanghuan/p/6423204.html

js跳轉(zhuǎn)頁面與打開新窗口的方法

window.open("http://www.jb51.net"); //在另外新建窗口中打開窗口
window.location.href="http://www.jb51.net"; //在同當前窗口中打開窗口

https://www.cnblogs.com/lijshui/p/7451360.html

原生js動態(tài)添加元素標簽及設(shè)置屬性

https://www.cnblogs.com/cllgeek/articles/5859908.html

刪除div中的內(nèi)容 蝗蛙,但是保留這個div
$('#test').empty(); //jQuery

https://zhidao.baidu.com/question/289778640.html

js 獲取checkbox 所有選中的值
function show(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}

https://www.cnblogs.com/sunxirui00/p/7498014.html

ajax請求,返回值為304 Not Modified 錯誤原因與解決辦法

https://blog.csdn.net/u011724770/article/details/54948748

頁面所有圖片禁止右鍵(防止保存等)
  • jquery
$('img').bind("contextmenu", function(e){ return false; }); 

https://blog.csdn.net/gongqinglin/article/details/54290279

  • js
        var imgs=document.querySelectorAll("img");
        for(var i=0;i<imgs.length;i++){
            imgs[i].onmousedown = function (e) {
                if (e.which == 3) {// 鼠標右鍵
                    console.log('right')
                    this.oncontextmenu = function () { return false; }
                }
            }
        }

https://www.cnblogs.com/dxzg/p/9930559.html勤哗、

獲取當前頁面url并截取所需字段

  let url =  window.location.href; // 動態(tài)獲取當前url
        let obj = {}; 
        let reg = /[?&][^?&]+=[^?&]+/g;
        let arr = url.match(reg);
        if (arr) {
            arr.forEach(item => {
                let tempArr = item.substring(1).split("=");
                let key = decodeURIComponent(tempArr[0]);
                let val = decodeURIComponent(tempArr[1]);
                obj[key] = val;
            });
        }铜涉,
            this.type= obj.type; // 截取所需字段并賦值

https://blog.csdn.net/weixin_30663471/article/details/99272489

js隨機點名
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script>
    function num(){
        var name = ["張三","張四","張五","張劉","張七","張八","張九","李三","李四","李武"];
        i=Math.floor(Math.random()*name.length);
        document.write(name[i]);
    }
    num();  
</script>

https://blog.csdn.net/h5_since/article/details/89852303

獲取和更改頁面Url地址欄后面的參數(shù)
  • var urlIndex = document.location.href; //獲取地址欄地址
    document.location.hash = "?page="+1; //更改地址欄地址
//替換指定傳入?yún)?shù)的值,paramName為參數(shù),replaceWith為新值
        function replaceParamVal(paramName,replaceWith) {
            var oUrl = this.location.href.toString();
            var re=eval('/('+ paramName+'=)([^&]*)/gi');
            var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
            this.location = nUrl;
          window.location.href=nUrl
        }

調(diào)用方法:replaceParamVal("vid", vid)

https://blog.csdn.net/second_boy/article/details/50832725

HTTP請求中Request Payload和Form Data的區(qū)別
  • 1早直、FormData和Payload是瀏覽器傳輸給接口的兩種格式做院,這兩種方式瀏覽器是通過Content-Type來進行區(qū)分的。
    如果是application/x-www-form-urlencoded的話妄壶,則為formdata方式摔握;
    如果是applocation/json或multipart/form-data的話,則為request payload方式丁寄。
  • 2氨淌、使用ajax方式提交post請求的代碼(默認使用application/x-www-form-urlencoded編碼),則為formdata請求
  • 3伊磺、使用multipart/form-data表單上傳文件盛正,則為request payload方式
  • 4、使用content-type:application/json編碼屑埋,則為request payload方式
    https://blog.csdn.net/xue_yanan/article/details/92980561
配置瀏覽器頭部小圖標

http://www.reibang.com/p/3c6154480c0c

textarea 失去焦點
<textarea name="" id="remark" cols="" rows=""  @blur="textareaBlur" @focus="textareaFocus"></textarea>

https://blog.csdn.net/b671900/article/details/26251921

axios的get與post網(wǎng)絡(luò)請求
       axios.get('/sys/user/login', {
               params: this.search
       }).then(function (response) {
                console.log(response);
       }).catch(function (error) {
                 console.log(error);
       })
          axios.post('/sys/user/list', this.search).then((res) => {
              console.log(res.data)
              if (res.data.code === 0) {
                  this.tableData = res.data.data
              }
          }).catch((error)=> {
          })

https://blog.csdn.net/qq_41115965/article/details/80780264

純CSS3使用vw和vh視口單位實現(xiàn)自適應(yīng)

http://caibaojian.com/vw-vh.html

移動web適配之--vh,vw,vmin,vmax

https://www.nihaoshijie.com.cn/index.php/archives/788/

html5瀏覽器less應(yīng)用

https://www.cnblogs.com/WhiteM/p/6187102.html

js 當變量值為0豪筝,判斷是否為空時(0=="")返回ture的問題

https://blog.csdn.net/fengsx0521/article/details/81239488

JS實現(xiàn)拖動圖片

https://blog.csdn.net/qq_33665647/article/details/52089526

下載文件到本地
 window.location.href = window.HOST + res.data
  • res.data為后臺返回的路徑
下載圖片或者視頻到本地
  • a標簽
<a href="圖片/視頻路徑" download="圖片/視頻名稱">

https://segmentfault.com/q/1010000010493203

less 定義變量用法
  • 定義變量
    @color: red;
    p {
    color: @color; // 編譯為 color: red;
    }
JSONPath — $(僅限了解)

JsonPath表達式總是以與XPath表達式結(jié)合使用XML文檔相同的方式引用JSON結(jié)構(gòu)摘能。
JsonPath中的“根成員對象”始終稱為续崖,無論是對象還是數(shù)組。 JsonPath表達式可以使用點表示法.store.book [0].title
或括號表示法
$['store']['book'][0]['title']
https://blog.csdn.net/lwg_1540652358/article/details/84111339

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末徊哑,一起剝皮案震驚了整個濱河市袜刷,隨后出現(xiàn)的幾起案子聪富,更是在濱河造成了極大的恐慌莺丑,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件墩蔓,死亡現(xiàn)場離奇詭異梢莽,居然都是意外死亡,警方通過查閱死者的電腦和手機奸披,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門昏名,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人阵面,你說我怎么就攤上這事轻局『檠迹” “怎么了?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵仑扑,是天一觀的道長览爵。 經(jīng)常有香客問我,道長镇饮,這世上最難降的妖魔是什么蜓竹? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮储藐,結(jié)果婚禮上俱济,老公的妹妹穿的比我還像新娘。我一直安慰自己钙勃,他們只是感情好蛛碌,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辖源,像睡著了一般左医。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上同木,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天浮梢,我揣著相機與錄音,去河邊找鬼彤路。 笑死秕硝,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的洲尊。 我是一名探鬼主播远豺,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼坞嘀!你這毒婦竟也來了躯护?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤丽涩,失蹤者是張志新(化名)和其女友劉穎棺滞,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體矢渊,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡继准,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了矮男。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片移必。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖毡鉴,靈堂內(nèi)的尸體忽然破棺而出崔泵,到底是詐尸還是另有隱情秒赤,我是刑警寧澤,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布憎瘸,位于F島的核電站倒脓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏含思。R本人自食惡果不足惜崎弃,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望含潘。 院中可真熱鬧饲做,春花似錦、人聲如沸遏弱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽漱逸。三九已至泪姨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間饰抒,已是汗流浹背肮砾。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留袋坑,地道東北人仗处。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像枣宫,于是被迫代替她去往敵國和親婆誓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,283評論 25 707
  • 用兩張圖告訴你也颤,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料洋幻? 從這篇文章中你...
    hw1212閱讀 12,744評論 2 59
  • (轉(zhuǎn))原文鏈接:https://blog.csdn.net/huangqili1314/article/detai...
    谷哥得小弟閱讀 3,649評論 0 66
  • 我感到豐盛,因為今天可以睡到自然醒翅娶,nice~文留; 我感到豐盛,因為早餐舍友煎了很好看的魚故觅,也非常美味厂庇; 我感到豐盛...
    六月八月閱讀 165評論 0 0
  • 一花一天堂,一沙一世界输吏,泥土的芳香,花草的艷麗替蛉,從小就生活在田野的我贯溅,便自小和這些打著熟悉的交道拄氯,如果我說...
    喂借一個微笑閱讀 555評論 0 2