与或非

开关灯案例:

【相关知识铺垫】

1、元素包含的常用属性：

  • className: 存储的是字符串，代表当前元素的类名
  • id： 存储的是字符串，代表当前元素的id名
  • innerHTML：存储当前元素的所有内容，包含标签
  • innerText：存储当前元素的文本内容
  • style：存贮当前元素的所有行内样式
  • onclick：点击事件属性
  • onmouseover：鼠标滑过事件
  • onmouseout：鼠标离开事件

2、通过id 获取一个元素：document.getElementById(“id名字”)

  1. <div id="box1">box1</div>
  3. <script>
  4.    var Obox1=document.getElementById("box1");
  5.    console.log(Obox1)
  6. </script>

3、通过标签名去获取一类标签:[context].getElementsByTagName;

  1. var olis=document.getElementsByTagName("li"); // 获取文档中左右的li标签
  2. var box1=document.getElementById("box1");
  3. var lis=box1.getElementsByTagName("li");// 获取box1 下面所有的li元素

4、通过style属性去添加或者修改元素的样式

  1. <div id="box1">box1</div>
  3. <script>
  4.    var Obox1=document.getElementById("box1");
  5.        Obox1.style.backgroundColor="pink";
  6. </script>

5、给元素添加类名

  1.  var Obox1=document.getElementById("box1");
  2.  Obox1.className="current";
  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     *{
  10.         margin:0;
  11.         padding:0;
  12.     }
  13.     body{
  14.         background:darkturquoise;
  15.     }
  16.     #main{
  17.         width:300px;
  18.         border:1px solid green;
  19.         margin:0 auto;
  20.     }
  21.     #button{
  22.         width:100%;
  23.         height:50px;
  24.         background:lightblue;
  25.         text-align: center;
  26.     }
  27.     #imgbox{
  28.         display:block;
  29.     }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div id="main">
  34.         <button id="button">隐藏</button>
  36.         <img id="imgbox" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577444372587&di=1684c649c2b1d4b1fdcd5910968c508b&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fpcdlc%2F1709%2F16%2Fc79%2F59427944_1505500668556.gif" alt="">
  38.     </div>
  39. </body>
  40. </html>
  41. <script>
  42. /* 
  43.   默认：图片是显示的，按钮的内容 隐藏
  44.   点击按钮的时候，如果按钮原来是隐藏，
  45.     + 按钮内容变成“显示”
  46.     + 图片消失
  48.   点击按钮的时候，如果按钮是显示，
  49.     + 按钮内容变成“隐藏”
  50.     + 图片显示
  51. */
  52. var button=document.getElementById("button");
  53. var oimg=document.getElementById("imgbox");
  54. button.onclick=function(){
  55.      var value=button.innerText;
  56.      if(value=="隐藏"){
  57.         button.innerHTML="显示";
  58.         oimg.style.display="none";
  59.      }else{
  60.         button.innerHTML="隐藏";
  61.         oimg.style.display="block";
  62.      }
  63. }
  64. </script>

案例之隔行变色

css 实现

如果每隔三行实现一个变色，就是.main>li:nth-child(3n+1) .main>li:nth-child(3n+2) .main>li:nth-child(3n) 

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     *{
  10.         margin:0;
  11.         padding:0;
  12.     }
  13.     ul,ol{
  14.         list-style: none;
  15.     }
  16.     body{
  17.         background:lightseagreen;
  18.     }
  19.     .main{
  20.         width:500px;
  21.         /* border:1px solid #000; */
  22.         margin:50px auto;
  23.         color:#666;
  24.     }
  25.     .main>li{
  26.         height:40px;
  27.         line-height:40px;
  28.         text-indent: 20px;
  31.     }
  32.     .main>li:nth-child(even){
  33.          background:yellow;
  34.     }
  35.     .main>li:nth-child(odd){
  36.         background:lightgreen;
  37.     }
  38.     .main>li:hover{
  39.         background:lightblue;
  40.     }
  41.     </style>
  42. </head>
  43. <body>
  44.     <ul class="main">
  45.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  46.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  47.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  48.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  49.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  50.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  51.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  52.         <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  53.     </ul>
  54. </body>
  55. </html>

js实现奇偶行变色
分析：隔行变色的原理：
操作的元素：li ，
让 处于奇数的li 变一个颜色1
让 处于偶数行的li 变一个颜色2

方法一： 通过style行内属性来改变

  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.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     ul,
  16.     ol {
  17.       list-style: none;
  18.     }
  20.     body {
  21.       background: lightseagreen;
  22.     }
  24.     #main {
  25.       width: 500px;
  26.       /* border:1px solid #000; */
  27.       margin: 50px auto;
  28.       color: #666;
  29.     }
  31.     #main>li {
  32.       height: 40px;
  33.       line-height: 40px;
  34.       text-indent: 20px;
  36.     }
  37.   </style>
  38. </head>
  40. <body>
  41.   <ul id="main">
  42.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  43.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  44.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  45.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  46.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  47.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  48.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  49.     <li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>
  50.   </ul>
  51.   <script>
  52.     var omain = document.getElementById("main");
  53.     console.log(omain)
  54.     var lis = omain.getElementsByTagName("li");
  55.     for (var i = 0; i < lis.length; i++) {
  56.       if (i % 2 != 0) {
  57.         lis[i].style.backgroundColor = "yellow";
  58.       } else {
  59.         lis[i].style.backgroundColor = "pink";
  60.       }
  61.     }
  62.   </script>
  63. </body>
  65. </html>

方法二：通过添加类名

  1.  <style>
  2.     .color1{
  3.         background:lightsalmon;
  4.     }
  5.     .color2{
  6.         background:yellow;
  7.     }
  9.  </style>
  11.  for(var i=0;i<lis.length;i++){
  12.          if(i%2!=0){
  13.             lis[i].className="color1";
  14.          }else{
  15.             lis[i].className="color2";
  16.          }
  17.      }

全部用js实现，隔行变色，并且鼠标滑上去的时候，改变颜色，鼠标离开之后，还原原有的颜色

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     *{
  10.         margin:0;
  11.         padding:0;
  12.     }
  13.     li{
  14.         height:30px;
  15.         line-height: 30px;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.     <ul class="main" id="main" style="background:blue">
  21.         <li>1</li>
  22.         <li>2</li>
  23.         <li>3</li>
  24.         <li>4</li>
  25.         <li>5</li>
  26.     </ul>
  27. </body>
  28. </html>
  29. <script>
  30. /* 
  31.  原理：获取到所有的li元素，如果这个li是偶数我们就让它是一个颜色，如果不是偶数就是另一个颜色
  33. */
  34. var omain=document.getElementById("main");
  36. var lis=omain.getElementsByTagName("li");
  38. for(var i=0;i<lis.length;i++){
  39.   if(i%2==0){
  40.       lis[i].style.background="blue";
  41.   }else{
  42.       lis[i].style.background="yellow";
  43.   }
  44.   // 鼠标滑上li的时候，改变那个li的背景颜色
  45.   lis[i].onmouseover=function(){
  46.           // 把原有的颜色绑定上去
  47.           this.bgColor=this.style.backgroundColor;
  48.           this.style.background="lightpink";
  49.   }
  50.   // 鼠标离开的时候，恢复原有的颜色
  51.   lis[i].onmouseout=function(){
  52.         this.style.background=this.bgColor;
  53.   }
  54. }
  55. </script>

阿里引发的一道血案面试题

  1. let a={
  2.     n:1,
  3. }
  4. let b=a;
  5. a.x=a={
  6.     n:2
  7. }
  8. console.log(a.x);
  9. console.log(b)

连等赋值：是按照从右向左

  1. var a=b=20;
  2. // 第一步：先创建一个值
  3. // 第二步：b=20
  4. // 第三步：var a=20；
  1. undefined
  2. { n: 1, x: { n: 2 } }

微信图片_20220501192838.jpg