Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > js函数与js操作dom
Blogger Information
Blog 29
fans 0
comment 0
visits 18507
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js函数与js操作dom
CC
Original
529 people have browsed it

函数

  • 函数定义
    1. // 定义
    2. function demo1(){
    3.   console.log('例子1',demo1.name)
    4. };
    5. // 调用
    6. demo1()
  • 函数传参数
    1. function tc(name){
    2.   console.log('i am',name);
    3. }
    4. tc('chen')
  • rest语法，使剩余参数显示
    1. function tc(...shu){
    2.   console.log(shu);
    3. }
    4. tc(1,2,3,4,5,6)
  • 遍历累加
    1. function tc(...shu){
    2.   console.log(shu);
    3.   let sum = 0;
    4.   // 遍历数组
    5.   for(let v of shu){
    6.       sum=sum+v
    7.   }
    8.   console.log(sum)
    9. }
    10. tc(1,2,3,4,5,6)
  • 函数与dom1(函数作为事件触发不加小括号)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button id='btn1'>按钮</button>
  11.     </body>
  12.     <script>
  13.         function fun1(){
  14.             alert('hello')
  15.         }
  16.         // 获取id事件，赋值等于btn1
  17.         let btn1=document.getElementById('btn1');
  18.         // 点击触发函数，调用函数不加括号
  19.         btn1.onclick=fun1
  20.     </script>
  21. </html>
  • 函数返回对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         function fun1() {
  13.             return {
  14.                 name: 1,
  15.                 sex: 'nan',
  17.             }
  18.         }
  19.             let preson = fun1();
  20.             console.log(preson);
  21.             // 使用.访问对象值
  22.             console.log(preson.name,res.sex);
  24.     </script>
  25. </body>
  27. </html>
  • 函数返回数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         function arr1() {
  13.             return ["name", "sex"];
  14.         }
  15.         fun1 = arr1(
  16.         )
  17.         // 打印数组
  18.         console.log(fun1)
  19.         // 遍历数组
  20.         for (let x in fun1) {
  21.             console.log(fun1[x])
  22.         }
  24.     </script>
  25. </body>
  28. </html>
  • 箭头函数

匿名函数可以改写

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  14.         const fun1 = function (chen) {
  15.             return chen * 2
  17.         }
  18.         console.log(fun1(3))
  20.     </script>
  21. </body>
  23. </html>
  24. `
  2. // 去掉function，在（）后面加=>
  5.         const fun1 =  (chen)=> {
  6.             return chen * 2
  8.         }
  9.         console.log(fun1(3))

有返回值，可以去掉return与花括号

  2.         // const fun1 = function (chen) {
  3.         //     return chen * 2
  5.         // }
  6.         // console.log(fun1(3))
  8. const add =  (a,b)=> {
  9.     return a+b
  10. }
  11. console.log(add(1,2))
  1. const add =  (a,b)=> a+b
  3. console.log(add(1,2))

操作bom

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .item:first-of-type {
  11.         color: red;
  12.     }
  13. </style>
  15. <body>
  16.     <ul id="list">
  17.         <li class="item">item1</li>
  18.         <li class="item">item2</li>
  19.         <li class="item">item3</li>
  20.         <li class="item">item4</li>
  21.         <li class="item">item5</li>
  22.         <li class="item">item6</li>
  23.     </ul>
  25. </body>
  26. <script>
  27.     // 返回元素集合中的第一个元素
  28.     const li = document.querySelector('.item')
  29.     console.log(li)
  30.     const lis = document.querySelectorAll('.item')
  31.     // 返回元素集合中的所有元素
  32.     console.log(lis)
  33.     // 转化为数组
  34.     let list = [...lis]
  35.     console.log(list)
  36.     lis.forEach(item => {
  37.         console.log(item);
  38.     // 所选元素变成蓝色
  39.         item.style.color = 'blue';
  40.     });
  41.     // 选择class
  42. console.log(document.querySelector('.item'))
  43. </script>
  45. </html>

操作dom，获取id，class，操作元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .red {
  11.         color: red;
  12.     }
  13.     .blue{
  14.         color: blue;
  15.     }
  16. </style>
  18. <body>
  19. <p class="red" id='hello'>大家晚上好</p>
  21. </body>
  22. <script>
  23. const p =document.querySelector('p');
  24. // 获取类名字
  25. console.log(p.className)
  26. // 后去id名字
  27. console.log(p.id)
  28. // 将红色改掉蓝色
  29. p.className='blue'
  30. </script>
  32. </html>

增删改css样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .red {
  11.         color: red;
  12.     }
  13.     .blue{
  14.         color: blue;
  15.     }
  16.     .bg {
  17.         background-color: yellow;
  18.     }
  19. </style>
  21. <body>
  22. <p >大家晚上好</p>
  24. </body>
  25. <script>
  26. const p =document.querySelector('p');
  27. // 改成蓝色
  28. p.classList.add('blue');
  29. // 增加黄色背景
  30. p.classList.add('bg')
  31. </script>
  32. </html>
  1. const p =document.querySelector('p');
  2. // 改成蓝色,增加黄色背景
  3. p.classList.add('blue','bg');
  4. // 移除黄色背景
  5. p.classList.remove('bg');

自动切换样式

  1. const p =document.querySelector('p');
  2. p.classList.toggle('red');
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post