1.控制语句

1.1条件判断

1.1.1if-else单个条件判断

  1. /*if
  2. 小括号中的为true,才会走大括号中的语句
  3. if(boolean){
  4. }
  5. */
  6. var remaining-sum=10;
  7. /* 只有余额大于等于20的时候才能支付
  8.    否则就提示用户余额不足
  9. */
  10. if(remaining-sum>=20){
  11.       console.log("支付成功")
  12.   }else{
  13.       console.log("余额不足")
  14.   }

1.1.2if-else if -else多个条件判断

  1. /* age>18  成人
  2.    6<age<18  青少年
  3.    age<6  儿童 console.log(age)
  4.  */
  5.    var age=13;
  6.    if(age>=18){
  7.        console.log("成人")
  8.    }else if(age>=6 && age<18){
  9.        console.log("青少年")
  10.    }else{
  11.        console.log("儿童")
  12. }

1.2循环

1.2.1switch-case

  1.  /* switch
  2.     case :满足某个条件，走里面的语句，Tip:在语句后面要加上break关键字
  3.     break;   //结束本次条件判断  中断循环
  4. */
  5.     var a=4;
  6.     switch(a){
  7.         case 1:
  8.             console.log("等于1");
  9.             break;
  10.         case 2:
  11.             console.log("等于2");
  12.             break;
  13.         default:
  14.             console.log("其他值")
  15.  }

1.2.2while

  1. /* while(true){
  2.      一直执行
  3. } */
  4.    var a=window.confirm("你是否想要下载");
  5.    a=a+10;
  6.    console.log(a);
  7.    while(a){
  8.         alert("请下载")
  9.    }

1.2.3for

  1. for(var i=0;i<=10;i++){
  2.      console.log(i)
  3.  }

1.3break和continue

1.3.1break

  1. /*0,1,2,3
  2. break  跳出循环，中断循环，程序不再执行
  3. */
  4. for(var i=0;i<=3;i++){
  5.    if(i==2){
  6.         break;
  7.        }
  8.         console.log(i);  //0，1
  9.  }

1.3.2continue

  1. /* continue  不会执行continue后面的语句，跳过某次循环  但是程序继续执行*/
  2.     for(var i=0;i<=3;i++){
  3.        if(i==2){
  4.           continue
  5.         }
  6.         console.log(i);  //0，1，3
  7.      }

2.DOM

如何获取节点

  1. 四种方法：
  2. getElementById()
  3. getElementsByTagName()   //标签名
  4. getElementsByClassName() 
  5. getElementsByName    
  6. querySelectorAll()   //选择器
  9. <p name="test" class="one">hello world</p>
  10. <script>
  11.  /* 
  12.    id  直接获取的元素
  13.    class,tagName    HTMLCollection html集合
  14.    name,querySelector  通过选择器获取  nodelist
  15. */
  16.    /* 通过name nodelist  节点的集合 */
  17.     var p=document.getElementsByTagName('p');
  18.     var test=document.getElementsByName("test")
  19.     var one=document.querySelectorAll('.one');
  20.     console.log(p)
  21.     console.log(test)
  22.     console.log(one)
  23. </script>

实现以下

第2章控制语句DOM,BOM，事件 - 图1

  1. <button id="all">全选</button>
  3.     <br>
  5.     <button id="noAll">不选</button>
  7.     <br>
  9.     <button id="reverse">反选</button>
  11.     <br>
  13.     <input type="checkbox">篮球
  15.     <br>
  17.     <input type="checkbox">足球
  19.     <br>
  21.     <input type="checkbox">高尔夫
  23.     <br>
  25.     <input type="checkbox">橄榄球
  27.     <br>
  29.     <input type="checkbox">乒乓球
  31.     <br>
  33.     <script>
  35.         var all = document.getElementById("all");
  37.         var noAll = document.getElementById("noAll");
  39.         var reverse = document.getElementById("reverse");
  41.         var checks = document.getElementsByTagName("input");
  43.         all.onclick = function () {
  45.             for (var i = 0; i < checks.length; i++) {
  47.                 checks[i].checked = true;
  49.             }
  51.         }
  53.         noAll.onclick = function () {
  55.             for (var i = 0; i < checks.length; i++) {
  57.                 checks[i].checked = false;
  59.             }
  61.         }
  63.         reverse.onclick = function () {
  65.             for (var i = 0; i < checks.length; i++) {
  67.                 console.log(inputs[i].checked);
  69.                 checks[i].checked = (checks[i].checked == true) ? false : true;//三目
  71.                 /*inputs[i].checked=!inputs[i].checked;     //取反*/
  73.             }
  75.         }
  77.     </script>

实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示
1.1用DOM实现

  1. <div id="div" style="display:block">hello world</div>
  2. <button id="btn">切换</button>
  3. <script>
  4.         var div = document.getElementById("div");
  5.         var btn = document.getElementById("btn");
  6.         btn.onclick = function(){
  7.             var value = div.style.display;
  8.             if(value == "block"){
  9.                       div.style.display = "none"
  10.             }else{
  11.                 div.style.display = "block"
  12.             }
  13.         }
  14. </script>

1.2用js实现

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <body>
  3.   <div id="test" style="display: block">hello world</div>
  4.   <button id="btn">切换</button>
  5.   <script>
  6.      $("#btn").click(function(){
  7.         /* is(':visible')判断一个元素是否显示 */
  8.       var isShow=$("#test").is(":visible")
  9.       if(isShow){
  10.           $("#test").hide(300)
  11.       }else{
  12.           $("#test").show(300)
  13.       }
  14.    })        
  15.   </script>
  16. </body>

1.3

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <body>
  3.    <div id="test" >hello world</div>
  4.   <button id="btn">切换</button>
  5.   <script>
  6.     $("#btn").click(function(){
  7.       /* toggle()   集成了hide(),show() */
  8.     $("#test").toggle(300)
  9.     })
  10.   </script>
  11. </body>

2.实现隔行变色

  1. <!-- 偶数项字体颜色为粉色  奇数项字体颜色为绿色 -->
  2.     <ul>
  3.         <li>0</li>
  4.         <li>1</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.         <li>4</li>
  8.     </ul>
  9.   <script>
  10.         var lis=document.getElementsByTagName("li")
  11.         /* 1.对li进行遍历 */
  12.         for(var i=0;i<lis.length;i++){
  13.             /* 2.下标值取余%2  为零的情况为偶数 */
  14.             if(i%2==0){
  15.                 lis[i].style.color="pink"
  16.             }else{
  17.                 lis[i].style.color="green"
  18.             }
  19.         }
  20.  </script>

2.1获取DOM

  1. <p id="test">hello world</p>
  2. <script>
  3.   /*html 标签 --节点*/
  4.   /*DOM树  就是由一个个节点组成
  5.   节点的关系：父子关系，兄弟关系
  6.   1.如何获取一个DOM  如何获取一个html元素
  7.   */
  8.   var test=document.getElementById("test");
  9.   /*2.改变背景色*/
  10.   test.style.backgroundColor="#333";
  11.   console.log(test);
  12. </script>

2.2查询DOM

  1. <div class="one">hello world</div>
  2. <div class="one">hello world</div>
  3. <div class="one">hello world</div>
  4. <script>
  5.         /* 通过class  获取的是HTMLCollection,html的集合，它长得像数组，但不是数组
  6.         length  获取集合的长度 
  7.         可以通过下标去读取
  8.         */
  9.         var one=document.getElementsByClassName("one");
  10.         console.log(one)
  11.         console.log(Array.isArray(one))
  12.         one[2].style.color="red";
  13.  </script>

2.3增，删，改，查

2.3.1增加节点 appendChild
  1. <div id="parent">
  2.    <div id="good">good</div>
  3. </div>
  4. <script>
  5.   var parent=document.getElementById("parent")
  6.   var good=document.getElementById("good")
  7.   var p=document.createElement("p")
  8.   p.innerHTML="hello world";
  9.    /* 
  10.    appendChild
  11.    给元素增加节点   往后面增加
  12.   */
  13.   parent.appendChild(p);    //good   hello world
  14. </script>

2.3.1.1在父元素前面增加节点insertBefore(newChild,oldChild)
  1.  <div id="parent">
  2.         <p>第一个</p>
  3.     </div>
  4.     <script>
  5.         /* 
  6.         从父元素的前面插入一个节点
  7.         insertBefore(newChild,oldChild)
  8.          */
  9.         var parent=document.getElementById("parent");
  10.         var p=document.createElement("p");
  11.         var txt=document.createTextNode("第零个");
  12.         p.appendChild(txt)
  14.         parent.insertBefore(p,parent.firstElementChild)
  15.     </script>

2.3.2删除节点 removeChild
  1. <div id="parent">
  2.    <div id="good">good</div>
  3.    <div id="hi">hi</div>
  4. </div>
  5. <script>
  6.   var parent=document.getElementById("parent")
  7.   var good=document.getElementById("good")
  8.   var hi=document.getElementById("hi")
  9.   var p=document.createElement("p")
  10.   p.innerHTML="hello world";
  11.   /*
  12.   removeChild() 从DOM树上移除一个元素
  13.   */
  14.   parent.removeChild(good);  //hi
  15. </script>

2.3.3修改—替换replaceChild

  1.    <div id="parent">
  2.         <p>good</p>
  3.         <!-- <h2>标题</h2> -->
  4.         <!-- 将p替换为h2-->
  5.     </div>
  6.     <script>
  7.         /* DOM就是增删改查元素的标准，可以动态的修改元素的内容，样式，结构 */
  8.         var parent =document.getElementById("parent");
  9.         var p=document.getElementsByTagName("p")[0];
  10.         var h2=document.createElement("h2");
  11.         h2.innerHTML="标题";
  12.         /* 
  13.         修改--替换DOM节点
  14.         replaceChild(newChild,oldChild)
  15.          */
  16.         parent.replaceChild(h2,p)
  17.     </script>

2.4如何创造一个元素节点

hello world

  1. var p=document.createElement("p")     //元素节点
  2. var text=document.createTextNode("p")  //文本节点
  3. p.appendChild(txt)     //将元素节点添加到文本节点中

2.5克隆节点 cloneNode

  1. <p class="test">hello world</p>
  2.     <script>
  3.     /* 克隆节点 cloneNode */
  4.         var test=document.getElementsByClassName("test")[0];
  5.         var cTest=test.cloneNode(true);
  6.         document.body.appendChild(cTest)
  7.     </script>

3.className obj.classList.contains() —>判断某个元素是否有某个class

  1. <style>
  2.   .current{
  3.      color:pink;
  4.    }
  5. </style>
  7. <body>
  8. <div id="test">hello world</div>
  9.     <script>
  10.        var test=document.getElementById("test");
  11.        /* className */
  12.        test.onclick =function(){
  13.         /* obj.classList.contains()  -->判断某个元素是否有某个class */
  14.         if(this.classList.contains("current")){
  15.             this.className=""
  16.         }else{
  17.             this.className="current"
  18.         }
  19.        }
  20.    </script>
  21.  </body>

4.获取节点

  1. firstChild   //获取第一个节点
  2. firstElementChild  //获取第一个元素节点

5.节点的分类

  1.    <div id="parent">ffid<p>hello world</p></div>
  2.     <script>
  3.        /* 
  4.        节点
  5.        元素节点  nodeType==1
  6.        属性节点  nodeType==2
  7.        文本节点  nodeType==3
  8.         */ 
  9.         /* firstChild  -->输出第一个节点 
  10.            firstElementChild  -->输出第一个元素节点
  11.         */
  13.         var parent=document.getElementById("parent");
  14.         var tNode=parent.firstChild;
  15.         var aNode=parent.getAttributeNode("id");
  16.         console.log(parent.firstChild);    //ffid
  17.         console.log(parent.firstElementChild);   //hello world
  18.         console.log(parent.nodeType)    //1
  19.         console.log(tNode.nodeType)    //3
  20.         console.log(aNode.nodeType)    //2
  21.     </script>

6.dataset 自定义属性

  1.  <!--  data-   :自定义属性 -->
  2.     <div id="test" class="one" data-uid="two">hello world</div>
  3.     <script>
  4.         var test=document.getElementById("test");
  5.         console.log(test.id)
  6.         console.log(test.className)
  7.         console.log(test.dataset.uid)
  8.     </script>

例题

实现点击跳转nav

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         .container>div{
  4.             height: 1000px;
  5.         }
  6.         .container>div:nth-child(1){
  7.             background: red;
  8.         }
  9.         .container>div:nth-child(2){
  10.             background: green;
  11.         }
  12.         .container>div:nth-child(3){
  13.             background: pink;
  14.         }
  15.         .container>div:nth-child(4){
  16.             background: blue;
  17.         }
  18.         .nav{
  19.             position: fixed;
  20.             top: 0;
  21.             line-height: 50px;
  22.             background: #eee;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="nav">
  28.         <a href="#html">html</a>
  29.         <a href="#css">css</a>
  30.         <a href="#javascript">javascript</a>
  31.         <a href="#vue">vue</a>
  32.     </div>
  33.     <div class="container">
  34.         <div  id="html">html</div>
  35.         <div id="css">css</div>
  36.         <div id="javascript">javascript</div>
  37.         <div id="vue">vue</div>
  38.     </div>
  39.     <script>
  40.         /* obj.offset().top  获取元素距离顶部的距离 
  41.         attr(param)  获取元素的属性
  42.         $('html,body').animate({scrollTop:param})
  43.         */
  44.         $(".nav a").click(function(){
  45.             /* 1.获取当前元素对应跳转的元素距离顶部的高度 */
  46.             var attr=$(this).attr("href");
  47.             var top=$(attr).offset().top;
  48.             console.log(attr);
  49.             console.log(top);
  50.             /* 2.让窗口滚动对应的高度 */
  51.             $("html,body").animate({scrollTop:top})
  52.              return false;
  53.         })
  54.     </script>

7.修改节点内容、样式、结构

改变样式：this.style.color=”red”

改变内容: this.innerHTML=”change”

  1. <div id="test">hello world</div>
  2.     <script>
  3.         /* 内容，样式，结构 */
  4.         var test=document.getElementById("test");
  5.         /* 
  6.         事件
  7.         onclick   点击事件
  8.         onmouseover  移动到指定对象时触发事件
  9.         onmouseout   移出对象时触发事件
  10.          */
  11.         test.onclick=function(){
  12.             /* this在事件中指向正在执行事件的当前对象  改变样式*/
  13.             this.style.color="red";
  14.             /* innerHTML 改变内容*/
  15.             this.innerHTML="change"
  16.         }
  18.     </script>

8.事件

  1.   onclick   点击事件
  2.   onmouseover  移动到指定对象时触发事件
  3.   onmouseout   移出对象时触发事件
  6. <div id="test">hello world</div>
  7.     <script>
  8.         var test=document.getElementById("test");
  9.         /* 
  10.         事件
  11.         onclick   点击事件
  12.         onmouseover  移动到指定对象时触发事件
  13.         onmouseout   移出对象时触发事件
  14.          */
  16.       /* 鼠标悬停的事件 */
  17.         test.onmousemove=function(){
  18.             this.style.backgroundColor='#333';
  19.         }
  20.         /* 鼠标移出的事件 */
  21.         test.onmouseout=function(){
  22.             this.style.backgroundColor='#999';
  23.         }
  24.     </script>