js基礎(chǔ)day04

js基礎(chǔ)day04

一.自定義屬性

  • 可以給任何元素自定義一個(gè)屬性使用, 用來保存數(shù)據(jù), 方便使用
  • 自定義屬性生命周期 和元素生命周期一樣長(zhǎng)
  • 自定義屬性屬性名不能亂起, 要有規(guī)范, 見名知意

<div id="box">
    <button id="btn1" >點(diǎn)我啊</button>
    <button>點(diǎn)我啊2</button>
    <button>點(diǎn)我啊3</button>
    <button>點(diǎn)我啊4</button>
</div>

<script>
    //1.獲取元素
    var box = document.getElementById('box');
    var list = box.getElementsByTagName('button');

    //2.設(shè)置背景顏色
    list[0].style.backgroundColor = 'red';
    list[1].className = 'current';

    //3.獲取系統(tǒng)提供給我們的屬性
    console.log(list[0].id);
    console.log(list[1].className);

    //4.自定義屬性
    //可以給任何元素自定義一個(gè)屬性使用, 用來保存一定數(shù)據(jù), 方便使用
    //自定義屬性生命周期 和元素生命周期一樣長(zhǎng)
    //自定義屬性屬性名不能亂起, 要有規(guī)范, 見名知意
    list[2].index = 2;
    list[2].name = '張三';

    //獲取自定義屬性的值
    console.log(list[2].index);
    console.log(list[2].name);
    
</script>

二.tab切換


<div id="box">
    <div id="head">
        <button class="current">第1個(gè)按鈕</button>
        <button >第2個(gè)按鈕</button>
        <button >第3個(gè)按鈕</button>
        <button >第4個(gè)按鈕</button>
        <button >第5個(gè)按鈕</button>
    </div>
    <div id="bottom">
        <div>第1個(gè)盒子</div>
        <div>第2個(gè)盒子</div>
        <div>第3個(gè)盒子</div>
        <div>第4個(gè)盒子</div>
        <div>第5個(gè)盒子</div>
    </div>
</div>

<script>
    //1.獲取所有按鈕
    var head = document.getElementById('head');
    var btnList = head.getElementsByTagName('button');
    console.log(btnList);

    //2.獲取bottom中所有div
    var bottom = document.getElementById('bottom');
    var divList = bottom.getElementsByTagName('div');

    //3.顯示第一個(gè)div
    divList[0].style.display = 'block';

    //提前自定義屬性保存索引
/*    btnList[0].index = 0;
    btnList[1].index = 1;
    btnList[2].index = 2;
    btnList[3].index = 3;
    btnList[4].index = 4;*/
    //4.遍歷數(shù)組，按鈕添加點(diǎn)擊事件
    for(var i = 0;i < btnList.length; i++){
        //4.1 獲取每個(gè)按鈕
        var btn = btnList[i];
        //4.2 自定義屬性, 保存索引
        btn.index = i;

        //4.3 給按鈕添加事件, 排他思想
        btn.onclick = function () {
            //先清空所有按鈕
            for(var j = 0; j < btnList.length;j++){
                btnList[j].className = ''
            }
            //再對(duì)當(dāng)前被點(diǎn)擊按鈕單獨(dú)設(shè)置
//            btn.className = 'current';
            this.className = 'current';

            //------------------
            //點(diǎn)擊第i個(gè)按鈕，顯示第i個(gè)盒子，其他盒子隱藏
            //排他思想：先清空所有盒子display
            for(var a = 0; a < divList.length; a++ ){
                divList[a].style.display = 'none';
            }

            //console.log(i);
            //取出當(dāng)前對(duì)應(yīng)i個(gè)按鈕的盒子
            //this.index 獲取的是相應(yīng)當(dāng)前事件按鈕的索引
            console.log(this.index);
            var div = divList[this.index];
            //單獨(dú)設(shè)置對(duì)應(yīng)當(dāng)前第i個(gè)按鈕，第i個(gè)盒子
            div.style.display = 'block'
        }
    }
</script>
2.1.png

三.數(shù)組常用方法

1.concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

  • concat(arrayX,arrayX,......,arrayX)
  • 函數(shù)功能 合并數(shù)組, 在原來數(shù)組基礎(chǔ)上添加新數(shù)組的內(nèi)容
  • 參數(shù): 必需, 該參數(shù)可以是具體的值，也可以是數(shù)組對(duì)象?？梢允侨我舛鄠€(gè)。
  • 返回值: 合并后的新數(shù)組
  • 不修改原來數(shù)組
var arr2 = ['香蕉', '蘋果', '橘子'];
var arr3 = ['茄子', '黃瓜', '胡蘿卜'];
var item = arr.concat(arr2, '科長(zhǎng)');
console.log(item);
console.log(arr); //原來數(shù)組

2.join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。

  • 函數(shù)功能: 將數(shù)組中的字符串取出, 拼接成一個(gè)大的字符串
  • 參數(shù):separator 可選。指定要使用的分隔符。如果省略該參數(shù)，則使用逗號(hào)作為分隔符。
  • 返回值: 返回一個(gè)字符串
  • 不修改原來數(shù)組
var item = arr.join("*");
console.log(item, typeof item);
console.log(arr);

3.pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素

  • 參數(shù): 沒有
  • 返回值: 返回刪除的最后元素
  • 會(huì)修改原數(shù)組
  • pop() 方法將刪除 數(shù)組 的最后一個(gè)元素，把數(shù)組長(zhǎng)度減 1，并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 undefined 值。
var item = arr.pop();
console.log(item);
console.log(arr);

4.push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

  • push(newelement1,newelement2,....,newelementX)
  • 參數(shù): 至少有一個(gè)元素, 參數(shù)可以是多個(gè)
  • 返回值: 返回添加元素后數(shù)組的長(zhǎng)度
  • 會(huì)修改原數(shù)組
var arr2 = ['香蕉', '蘋果', '橘子'];
var item = arr.push(arr2);
console.log(item);
console.log(arr);

5.reverse() 顛倒數(shù)組中元素的順序。

  • 參數(shù):沒有
  • 返回值: 返回修改后的數(shù)組
  • 會(huì)修改原數(shù)組
var item = arr.reverse();
console.log(item);
console.log(arr);

6.shift() 刪除并返回?cái)?shù)組的第一個(gè)元素

  • 參數(shù):沒有
  • 返回值: 返回刪除的第一個(gè)元素
  • 會(huì)修改原數(shù)組
var item = arr.shift();
console.log(item);
console.log(arr);

7.unshift() 向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度

  • unshift(newelement1,newelement2,....,newelementX)
  • 參數(shù): 必需, 至少有一個(gè)元素, 參數(shù)可以有多個(gè)
  • 返回值: 返回?cái)?shù)組長(zhǎng)度
  • 會(huì)修改原數(shù)組
var arr2 = ['香蕉', '蘋果', '橘子'];
var item= arr.unshift(arr2);
console.log(item);
console.log(arr);

8.slice() 從某個(gè)已有的數(shù)組返回選定的元素

  • slice(start,end)
  • 函數(shù)功能:從數(shù)組中獲取某一段連續(xù)的元素, 并保存到一個(gè)新數(shù)組中返回
  • 參數(shù):start 必需 從哪開始取, 包括該索引
  • 參數(shù): end 可選, 取到哪個(gè)索引為止 , 不包括該索引
  • 返回值: 一個(gè)新數(shù)組
  • 不修改原數(shù)組
//var item = arr.slice(1, 3);
var item = arr.slice(1);
console.log(item);
console.log(arr);

9.splice() 刪除元素，并向數(shù)組添加新元素。

  • splice(index,howmany,item1,.....,itemX)
  • 參數(shù): index 必需。整數(shù) , 從哪個(gè)索引開始刪
  • 參數(shù):howmany 必需, 刪除多少個(gè)元素
  • 參數(shù): items. 可選, 原來刪除位置上,添加的元素 (替換方法)
  • 返回值: 返回一個(gè)保存刪除元素的新數(shù)組
  • 會(huì)修改原數(shù)組
var item = arr.splice(1, 2);
var arr2 = ['香蕉', '蘋果', '橘子'];
var item = arr.splice(1, 2, arr2);

console.log(item);
console.log(arr);

10.toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果

  • 參數(shù)：沒有
  • 返回值: 返回的是拼接后的字符串
  • 不修改原數(shù)組
  • 注意：返回值與沒有參數(shù)的 join() 方法返回的字符串相同。
var item = arr.toString();
console.log(item, typeof item);
console.log(arr);

11.sort() 對(duì)數(shù)組的元素進(jìn)行排序(了解)

  • 參數(shù):必須是函數(shù)
var tempArr = [10, 2, 5, 8, 3, 9];
//升序
tempArr.sort(function (a , b) {
    return a - b;
});
console.log(tempArr);
//降序
tempArr.sort(function (a , b) {
    return b - a;
});
console.log(tempArr);
3.png

四.字符串常用方法

    h e l l o   w o r l d
    0 1 2 3 4 5 6 7 8 9 10
    var str = 'hello world'; // 'he*ll*o *world'

1.length 獲取字符串長(zhǎng)度

console.log(str.length);

2.charAt() 返回在指定位置的字符

  • charAt(index)
  • 參數(shù):index 某個(gè)字符位置
  • 返回值: 找到的字符
console.log(str.charAt(6));

3.charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。

  • 參數(shù):index 某個(gè)字符位置
  • 返回值: 找到的字符的Unicode 編碼。
console.log(str.charCodeAt(10));

4.concat() 連接字符串。

  • concat(stringX,stringX,...,stringX)
  • 參數(shù): 必需.需要合并的字符串, 至少有一個(gè)
  • 返回合并后字符串
  • 不修改原來字符串
var item = str.concat('科長(zhǎng)');
console.log(item);
console.log(str);

5.indexOf() 檢索字符串。

  • indexOf(searchvalue,fromindex)
  • 參數(shù): searchvalue 必需. 檢索的字符
  • 參數(shù): fromindex 可選. 從哪里開始檢索, 從哪個(gè)索引開始檢索, 如果省略,會(huì)從頭開始搜索
  • 返回值: 返回檢索字符的索引值
  • 注意: 默認(rèn)從前往后檢索字符, 找到一個(gè)匹配的字符就停止繼續(xù)往下檢索, 如果沒有找到匹配字符就返回-1
  • 不修改原來字符串
//    var item = str.indexOf('o', 5);
    var item = str.indexOf('a'); //檢索不存在字符
    console.log(item);
    console.log(str);*/

6.lastIndexOf() 從后向前搜索字符串。

  • 參數(shù): searchvalue 必需. 檢索的字符
  • 參數(shù): fromindex 可選. 從哪里開始檢索, 從哪個(gè)索引開始檢索, 如果省略,會(huì)從尾部開始搜索
  • 返回值: 返回檢索字符的索引值
  • 注意: 默認(rèn)從后往前檢索字符, 找到一個(gè)匹配的字符就停止繼續(xù)往下檢索, 如果沒有找到匹配字符就返回-1
  • 不修改原來字符串
//    var item = str.lastIndexOf('o');
var item = str.lastIndexOf('a');
    console.log(item);
    console.log(str);

7.slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分。

  • slice(start,end)
  • 參數(shù):end 必需. 截取的哪個(gè)索引為止, 不包含該字符
  • 返回值:一個(gè)新的字符串。包括字符串 stringObject 從 start 開始（包括 start）到 end 結(jié)束（不包括 end）為止的所有字符
  • 不修改原來字符串
  • start 值為-2, 代表從最后一個(gè)開始截取字符
var item = str.slice(4, 7);
    console.log(item);
    console.log(str);

8.substr() 從起始索引號(hào)提取字符串中指定數(shù)目的字符。

  • substr(start,length)
  • 參數(shù):start 必需. 從哪個(gè)索引開始提取字符, 包含該索引字符
  • 參數(shù):length 可選.獲取多少個(gè)字符
  • 返回值: 一個(gè)新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 length 個(gè)字符
  • 注意:如果沒有指定 length，那么返回的字符串包含從 start 到 stringObject 的結(jié)尾的字符。
  • 不修改原來字符串
var item = str.substr(2, 4);
    console.log(item);
    console.log(str);

9.substring() 提取字符串中兩個(gè)指定的索引號(hào)之間的字符。

  • substring(start,stop)
  • 參數(shù):start , 必需, 一個(gè)非負(fù)的整數(shù), 從哪個(gè)索引開始提取字符, 包含該索引字符
  • 參數(shù):stop , 可選 ,一個(gè)非負(fù)的整數(shù), 提取到哪個(gè)索引為止, 不包含該索引字符
  • 返回值: 提取字符串
  • 不修改原來字符串
var item = str.substring(2, 4);
console.log(item);
console.log(str);

10.split() 把字符串分割為字符串?dāng)?shù)組。

  • split(separator,howmany)
  • 參數(shù): separator 必需. 分隔符
  • 參數(shù): howmany 可選. 指定返回的數(shù)組的最大長(zhǎng)度
  • 返回值: 保存分隔后字符的數(shù)組
  • 如果是空字符串 ("") 用作 separator，那么字符串中的每個(gè)字符都會(huì)被分割,保存到數(shù)組中
//    var item = str.split('');
var item = str.split(' ');
console.log(item);
console.log(str);

11.toLowerCase() 把字符串轉(zhuǎn)換為小寫

  • 返回值: 返回轉(zhuǎn)換后的一個(gè)新的字符串
  • 不會(huì)修改原來字符串
var str10 = 'NIKE';
var item =  str10.toLowerCase();
console.log(item);
console.log(str10);

12.toUpperCase() 把字符串轉(zhuǎn)換為大寫

  • 返回值: 返回轉(zhuǎn)換后的一個(gè)新的字符串
  • 不會(huì)修改原來字符串
var str11 = 'nike';
var item =  str11.toUpperCase();
console.log(item);
console.log(str11);
4.png

五.判斷上傳文件類型

  • onchange 用戶改變域內(nèi)容，觸發(fā)該事件
  • 點(diǎn)擊input獲取文件, 只有獲取的文件不是同一文件, 就會(huì)觸發(fā)這個(gè)onchange, 判斷的就是文件路徑
  • 如果路徑一樣就不響應(yīng), 如果不一樣才會(huì)響應(yīng)事件
<input id="inputFile" type="file">
<script>
    //1.獲取標(biāo)簽
    var inputFile = document.getElementById('inputFile');
    //2.添加事件
    inputFile.onchange = function () {
        //2.1 獲取路徑
        var path = inputFile.value;
        console.log(path, typeof path);
        //C:\fakepath\GameofThrones.jpg

        //2.2 獲取索引
        var index = path.lastIndexOf('.');
        
        //2.3 截取后綴
        var str = path.slice(index + 1).toLowerCase();   
        //2.4 判斷類型是不是圖片， jpg png gif jpeg
        if(str === 'jpg' || str ==='png'|| str ==='gif' || str ==='jpeg'){
            alert('上傳的是圖片文件')
        }else{
            alert('上傳的不是圖片，請(qǐng)?jiān)俅紊蟼?);
            return;
        }
    }
</script>

六.定時(shí)器

  • 定時(shí)器: 以時(shí)間的事件來執(zhí)行代碼
  • 定時(shí)器分為兩種: 一次定時(shí)器(延時(shí)定時(shí)器), 間隔定時(shí)器(循環(huán)定時(shí)器)
  • 開啟定時(shí)器方法屬于window對(duì)象的對(duì)象方法

1.延時(shí)定時(shí)器

  • setTimeout(code,millisec) 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。

  • 參數(shù):

    • code 必需， 定時(shí)器一段時(shí)間后，調(diào)用的函數(shù)
    • millisec 必需， 延時(shí)時(shí)間， 單位：毫秒
    • 返回值： 返回一個(gè)標(biāo)識(shí)id

  • clearTimeout() 清除由setTimeout() 創(chuàng)建的定時(shí)器

  • 參數(shù)：接收setTimeout()返回的標(biāo)識(shí)id, 根據(jù)標(biāo)識(shí)id清除對(duì)應(yīng)定時(shí)器

function fn() {
        alert('執(zhí)行了定時(shí)器')
    }
    //開啟定時(shí)器
    var timer = setTimeout(fn, 2000);
    console.log(timer);

    //注意：使用完定時(shí)器后，一定要清除定時(shí)器
    //清除延時(shí)定時(shí)器
    clearTimeout(timer);

2.循環(huán)定時(shí)器

  • setInterval(code, millisec) 按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
  • 以一定時(shí)間間隔反復(fù)執(zhí)行一段代碼
    • 參數(shù)：code: 定時(shí)器一段時(shí)間后執(zhí)行調(diào)用的函數(shù)
    • millisec: 間隔時(shí)間， 單位：毫秒
    • 返回值： 返回一個(gè)標(biāo)識(shí)id
 var num = 0;
    //定時(shí)器使用最終格式
    var timer2 = setInterval(function () {
        num++;
        console.log(num);
    }, 1000);

    //clearInterval()   取消由 setInterval() 設(shè)置的 timeout。
    //1.獲取按鈕
    var btn = document.getElementById('btn');
    //2.給按鈕添加點(diǎn)擊事件
    btn.onclick = function () {
        //清空循環(huán)定時(shí)器
        clearInterval(timer2);
    }

七.勻速動(dòng)畫

  • 問題: 連續(xù)點(diǎn)擊觸發(fā)事件, 發(fā)現(xiàn)box 速度越來越快
  • 原因: 每次點(diǎn)擊,觸發(fā)事件執(zhí)行代碼, 都會(huì)開啟一個(gè)新的定時(shí)器, 所有定時(shí)器都在對(duì)偏移量累加
  • 解決: 每次點(diǎn)擊, 清空上一次的定時(shí)器
//1.獲取按鈕
    var btn = document.getElementById('btn');
    //2.獲取box
    var box = document.getElementById('box');

    //定義一個(gè)偏移量，記錄偏移距離
    var offsetX = 0;
    //定義一個(gè)全局變量，保存定時(shí)器標(biāo)識(shí)
    var timer = null;
    //目標(biāo)距離
    var targer = 800;

    //3.按鈕添加時(shí)間
    btn.onclick = function () {
        //3.1 清空上次定時(shí)器
        clearInterval(timer);

        //開啟定時(shí)器
        timer = setInterval(function () {
            //累加偏移量
            offsetX += 10;
            //判斷是否到達(dá)目標(biāo)距離
            if(offsetX >= targer){
                //偏移量等于目標(biāo)距離
                offsetX = targer;
                //清空定時(shí)器
                //clearInterval(timer);
            }
            //設(shè)置box的left
            box.style.left = offsetX + 'px';
        }, 30);
    }
  • 減速公式 = 累加量 + (目標(biāo)值- 累加量) / 系數(shù)
offsetX = offsetX + (targerX - offsetX) /10;
box.style.left = offsetX + 'px';

八.長(zhǎng)圖展示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 640px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }
        #box span{
            width: 100%;
            height: 50%;
            position: absolute;
        }
        
        #box span:nth-of-type(1){
            top:0;
            /*background-color: red;*/
        }

        #box span:nth-of-type(2){
            top:50%;
            /*background-color: blue;*/
        }

        #box img{
            position: absolute;
        }
    </style>
</head>
<body>

<div id="box">
    <img id="pic" src="images/girl.jpg" alt="">
    <span></span>
    <span></span>
</div>

<script>
    //1.獲取圖片
    var pic = document.getElementById('pic')
    //2.獲取span
    var list = document.getElementById('box').getElementsByTagName('span')

    //偏移量
    var offsetY = 0;
    //定時(shí)器
    var timer = null;

    //3.添加事件
    //上邊span, 鼠標(biāo)再上邊， 圖片往下走
    list[0].onmouseover = function () {
        //清空上次定時(shí)器
        clearInterval(timer);

            //開啟定時(shí)器
        timer = setInterval(function () {
            //累加偏移量
            offsetY += 5;
            //判斷是否走到了圖片最上邊
            if(offsetY >=0 ){
                //重新設(shè)置偏移量
                offsetY = 0
                //清空計(jì)時(shí)器
                clearInterval(timer);
            }
            // 根據(jù)偏移量, 重新設(shè)置top
            pic.style.top = offsetY + 'px'
        },10);
    }

    //下邊span, 鼠標(biāo)再下邊， 圖片往上走
    list[1].onmouseover = function () {
        //清空上次定時(shí)器
        clearInterval(timer);

        //開啟定時(shí)器
        timer = setInterval(function () {
            //累減偏移量
            offsetY -= 5;
            //判斷是否走到了圖片最下邊
            if(offsetY <=-505 ){
                //重新設(shè)置偏移量
                offsetY = -505
                //清空定時(shí)器
                clearInterval(timer);
            }
            // 根據(jù)偏移量, 重新設(shè)置top
            pic.style.top = offsetY + 'px'
        },10);

    }
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,678評(píng)論 19贊 139
  • 一、Java 簡(jiǎn)介 Java是由Sun Microsystems公司于1995年5月推出的Java面向?qū)ο蟪绦蛟O(shè)計(jì)...
    子非魚_t_閱讀 4,569評(píng)論 1贊 44
  • 小旺才： 你已經(jīng)堅(jiān)持2天晨跑了，真棒！相信這個(gè)假期你能堅(jiān)持下來。你們初中班主任問我你有沒有想當(dāng)班干部的想法，你同我...
    樊里洋閱讀 417評(píng)論 2贊 2
  • 青花瓷，國(guó)之正品也，青花色等煙雨，而我在等你，月色被打撈起，云開千萬里，等等，多么好的歌詞，多么好的瓷器，青春期是...
    王玉笙閱讀 225評(píng)論 0贊 0
  • 近日，朋友圈和各種公眾號(hào)被刷屏，大家都在議論，在某候車室，一名青年男子將手放入同行的小女孩胸部撫摸。 隨著猥褻兒童...
    尼莫奇奇閱讀 834評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容