亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198885
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
箭頭函數(shù)、剩余參數(shù)以及DOM操作中的dataset和classList
李東亞1??3????12?
原創(chuàng)
955人瀏覽過

函數(shù)以及箭頭函數(shù)特性和使用

1、函數(shù)組成：

  • 函數(shù)聲明關(guān)鍵字：function
  • 函數(shù)名（遵循表示符原則）
  • 參數(shù)：可以 無，也可以是一個和多個；由小括號()包括
  • 函數(shù)體：由js語句組成，由中括號{}包括
  • 函數(shù)體中常常會有一個return語句，作為函數(shù)的返回值；return 返回的是個單值，如果返回多個值可以使用引用類型變量：數(shù)組和對象；

2、函數(shù)的參數(shù)表現(xiàn)形式：

  • 默認(rèn)參數(shù)：通常在函數(shù)參數(shù)中設(shè)置默認(rèn)值：例如

    1. function poeple(name,sex,age=25){
    2.           return `我是${name},今年${age}歲,性別${sex}`}

  • 剩余參數(shù)：...argument,當(dāng)argument作為形參時，把多個參數(shù)值rest到argument中；當(dāng)zhuoargument作為實參使用時，把argument中的參數(shù)逐個展開（spread）;

3、箭頭函數(shù)是匿名函數(shù)的一種簡化（匿名函數(shù)與基本函數(shù)相同，知識沒有函數(shù)名）

  • 箭頭函數(shù)的基本形式：(參數(shù))=>{函數(shù)體}
  • 如果只有一個參數(shù)可以省略小括號，如果沒有參數(shù),反而不能?。蝗绻瘮?shù)體只有一個語句可以省略大括號例如:name=>console.log(name);

4、代碼實操演練：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title></title>
  8. </head>
  9. <body>
  11. </body>
  12. <script type="text/javascript">
  13.     // 箭頭函數(shù)
  14.     let it=name=>console.log(name);
  15.     it('ldy');
  16.     // age默認(rèn)參數(shù)
  17.     function people(name,sex,age=25){
  18.                 return `我是${name},今年${age}歲,性別${sex}`
  19.                 }
  20.     console.log(people("ldy","男"));
  21.     // 剩余參數(shù)
  22.     function sum(...arr){
  23.         let sum=0;
  24.         for (let item of arr){
  25.             sum += item;
  26.         }
  27.         // console.log(sum);
  28.         return sum;
  29.     }
  30.     console.log(sum(1,2,3,5,6));
  31. </script>
  32. </html>

DOM操作常見api函數(shù)

1、document.querySelector();:用css選擇器來獲取元素（不支持偽元素其他都支持）；返回匹配到到第一個html標(biāo)簽元素
2、document.querySelectorAll();用css選擇器來獲取元素（不支持偽元素其他都支持）；返回匹配到到HTML標(biāo)簽元素組成的NodeList對象(類數(shù)組)
3、常見的還有document.getElementsByClassName(),document.getElementsByTagName();這兩個個函數(shù)不同的是返回的html元素集合（也是類數(shù)組的），而document.getElementById()返回的一個html元素；

4、代碼實操演練：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>DOM操作</title>
  8. </head>
  9. <body>
  10.     <div class="container" id="container">
  11.         <div class="item">item01</div>
  12.         <div class="item">item02</div>
  13.         <div class="item">item03</div>
  14.         <div class="item">item04</div>
  15.         <div class="item">item05</div>
  16.     </div>
  17. </body>
  18. <script type="text/javascript">
  20.     // 通過CSS選擇器
  21.     let item=document.querySelector('.item');
  22.     console.log(item);
  23.     // querySelector();返回匹配到的第一個html標(biāo)簽元素
  24.     item.style.backgroundColor="red";
  26.     let items=document.querySelectorAll(".item");
  27.     //querySelectorAll();返回nodelist類數(shù)組的對象
  28.     console.log(items);
  29.     // 通過元素標(biāo)簽和類以及id
  30.     let divs=document.getElementsByTagName('div');
  31.     // 返回的時html元素集合
  32.     console.log(divs);
  33.     let div=document.getElementById('container');
  34.     // 返回html標(biāo)簽元素
  35.     console.log(div);
  36.     let cl=document.getElementsByClassName('item');
  37.     console.log(cl);
  38. </script>
  39. </html>

classList和dataset對象的使用

1、classlist對象主要用于解決：html元素中class屬性和Js中class(類關(guān)鍵字)的沖突，故而用classList對象來操作html中的屬性；常見的方法有：

  • classList.add();增加class樣式
  • classList.remove();刪除classs樣式
  • classList.toggle();動態(tài)切換樣式，有則刪除，無則增加

2、dataset對象是專門用來訪問html元素中的自定義屬性：

  • html元素通過data-string來自定義屬性；string如果有多個單詞組成必須有-鏈接;
  • js通過dataset來訪問自定義屬性，如果html元素中自定義屬性名字有多個單詞組成時，由于js標(biāo)識符不支持-，故通過首字母大寫（駝峰法）來表示自定義屬性（多單詞）；

3、代碼實操演練

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>DOM操作</title>
  8.     <style>
  9.         .bgc{
  10.             background-color: lightblue;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="container" id="container" data-index=1 data-name="C"data-tag-name="tn">
  16.         <div class="item">item01</div>
  17.         <div class="item">item02</div>
  18.         <div class="item">item03</div>
  19.         <div class="item">item04</div>
  20.         <div class="item">item05</div>
  22.     </div>
  25. </body>
  26. <script type="text/javascript">
  28.     // 通過CSS選擇器
  29.     let item=document.querySelector('.container');
  30.     //增加class樣式
  31.     item.classList.add('bgc');
  32.     // 移除class樣式
  33.     item.classList.remove('bgc');
  34.     // 切換class樣式
  35.     item.classList.toggle("bgc");
  36.     // 獲取data自定義屬性值
  37.     console.log(item.dataset.index);
  38.     console.log(item.dataset.name);
  39.     console.log(item.dataset.tagName);
  43. </script>
  44. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)