快速版-JS基础01书写位置

1.书写位置

2.标识符

3.变量

var：声明变量。

（1）.变量的重新赋值

（2）.变量的提升

打印结果：console.log(变量名)

第一个是你写在里面的。

第二个是实际运行的先后之分，变量名字在最前面。变量提升。

最后打印出来的结果

4.js引入到文件。

（1）嵌入到html

（2）引入本地独立的js文件 

（3）引入网络来源文件

5.注释与输出方式

注释

//和/* */

输出

alert：输出弹出框。

 <script>

    alert("我是懒羊羊")

  </script>

<script>

    document.write("我是输出到页面")

  </script>

console.log:输出在控制台。

6.数据类型

null、字符串、undefined、数值、boolean、对象

（1）原始数据类型：boolean、字符串、数值。

所有被双引号或者单引号包裹的都是字符串。

注意：下方单引号和双引号使用。

2.合成数据类型

null和undefined代表空值。

7.typeof运算符

控制台看运行结果。

8.算数运算符

++在后面先打印出来在自增。

9.赋值运算符

10.比较运算符

==：比较数值相等。

===：比较数值和类型相等。

11.boolean运算符

（2）&&且运算

都要

（3）||或运算

一个也行

12.条件语句-if语句

得出结果：x=2

（2）if  else

（3）条件语句之switch

如果不加break，他会把符合那个值得结果以及下面的都打印出来。

13.三元运算符

14.for循环

表达式可以省略，但是；不可以省略。

15.while循环

  var  i = 0;
        while(i <= 100){
          console.log(i);
          i++
        }

 var sum = 0;
          var i = 0;
          while(i <= 100){
            sum += i ;
            i++
          }
          console.log(sum);

16.break语句和continue语句

所以当前就不打印5，就打印6...了。

 17.字符串

只能单双嵌套或者双单嵌套。不能双双嵌套或者单单嵌套。

 var str4 = "懒羊羊当'好的'大厨"
          document.write(str4)

（2）如果非要单单或者双双使用。

 var str4 = "懒羊羊当\"好的\"大厨"

          document.write(str4)

（3）字符串非要换行呢？

18.字符串方法charAt（）：返回指定字符

19.字符串方法concat（）：拼接字符

concat：合并多个数组; 合并多个字符串

多个参数，逗号隔开。

 var i = "hello";
          var a = "world";
          var d = "!"
          var num = 100;
          var s = i.concat(a,d,num);
          console.log(s);

（2）简便方法：直接用+

但是他不会改变数值类型，如果是数字相加就是普通加法，若果是字符串相加就是拼接在一起。

20.substring：取出子链

substring：子链。

包头不包尾。

21.substr（）：取出字串

22.indexOf（）：出现的位置

23.trim（）去除两旁空格、制表符等

不能去除中间的空格。

24.split：分割字符

26.数组

（2多维数组）

（3）下标读取

有括号叫方法，没有括号叫属性。

（4）数组越界，返回undefined

27.数组遍历

（1）遍历数组三种方法：for 、while

   var username = ["amy" , "frank" , "ime" , "bob"];
    for(var i =0; i < 4 ; i++){
      console.log(username[i]);
    }
    console.log(username.length)
    // 改良
    for(var i =0; i < username.length ; i++){
      console.log(username[i]);
    }
    //while
    var i = 0;
    while(i < username.length){
      console.log(username[i]);
      i++;
    }

（2）for in

不用定义var i= 0；

28.数组静态方法Array.isArray()判断是否为数组

判断是否为数组。

30.数组方法push（）和pop（）：添加删除数组，会改变原数组。

（2）push方法：可同时添加多条数据。

（3）pop：删除最后一个。

      var username = ["amy" , "frank" , "ime" , "bob"];
      username.pop()
      console.log(username);

31.数组方法shift（）和unshift（）。

可以打印出删除后的结果和删除的东西。

（2）shift可以遍历和清空数组。

这个打印出结果是undefined。

（3）unshift（）

      var username = ["amy" , "frank" , "ime" , "bob"];
      username.unshift("xhh" , "htl");
      console.log(username);

32.数组方法join（）：把数组变成字符串。

（1）常见分割

（2）如果是null或者undefined

（3)join和split可以实现数组和字符串的互换。

33.数组方法concat。--合并数组。 

（1）+和concat的区别

      var username = ["amy" , "frank" , "ime" , "bob"];
      var i = ["123" , "ABC"];
      console.log(i + username);//用+打印出来是数组
      console.log(username.concat(i));//这才是拼接

不仅可以合并一个，可以合并多个。

（2）可以合并其他参数

eg：

         var i = ["123" , "ABC"];

    console.log(i.concat(20 ,30));

结果：

34.数组方法reverse（）：反转。

      // var username = ["amy" , "frank" , "ime" , "bob"];
      // console.log(username.reverse());
      // console.log()

(2)字符串反转

先分割字符spilt成数组，在反转数组revers，在join他成字符串。

      var i = "helloworld";
      var o = i.split("");
      o.reverse();
      console.log(o.join(""));

35.数组方法indexOf

返回第一次出现的位置，就算数组中有很多个，返回结果是第一次出现的位置

      var username = ["amy" , "frank" , "ime" , "bob"];
      console.log(username.indexOf("ime"));
      console.log(username.indexOf("30"));

（2）从指定位置后开始搜索：搜索的东西，指定的位置。

      var username = ["amy" , "frank" , "ime" , "bob" ,"amy"];
        console.log(username.indexOf("amy" , 2));

36.函数

定义：可反复调用代码块。

（1）函数声明

        function add(){
          console.log("结果");
        }
        // 调用函数
        add();

（2）函数名的提升

可以先调用，后创建

（3）函数参数

        function add( x , y ){
          console.log( x + y);
        }
        add(5,5);
        add(2,8);

（4）函数返回值

return后面的代码无效。

        function  add(x , y){
          return x + y
        }
        var i = add(2,8);
        console.log(i);

37.对象：object

数字13也要加‘’

        var i = {
          age:'13',
          name:'xhh'
        };

（2）在里面可调用方法、数组等。

调用数组时变量名+function

        var i = {
          age:'13',
          name:'xhh',
          arry:["xhh" , "htl" ,"lyy"],
          flag:true,
          getname:function(){
            console.log("iwen");
          }
        }

（3）对象的调用：对象名.属性

        var i = {
          age:'13',
          name:'xhh',
          arry:["xhh" , "htl" ,"lyy"],
          flag:true,
          getname:function(){
            console.log("iwen");
          }
        }

        console.log(i.age);
        // 方法的调用不同于以上
        i.getname();

（4）链式调用

        var i = {
          o:{
            p:[10 ,20],
            a:[30 , 40]
            }
          };
       console.log(i.o.p); 

38.Math对象

(1)Math.abs()          绝对值的英文是 "absolute value"。

      var i =-100 ;
      console.log(Math.abs(i));

(2)Math.max()  \   Math.min()

      console.log(Math.max(10 ,29));

（3）Math.floor()  \   Math.ceil()

      console.log(Math.floor(10.29));
      console.log(Math.ceil(11.5));

（4）Math.random()

console.log(Math.random());

（5）生成一个10-20的随机数

      function i(min ,max){
        var re = Math.random() * (max - min) + min ;
        re = Math.floor(re);
        console.log(re);
      }
      i(10,20);

38.DATE对象

（1）Date.now()

      console.log(Date.now());//1716623007895
      console.log(Date(1716623007895));
      // 或者直接new进去，获取一个最新的。第二种方法
      console.log( new Date);

\

月份要加一

      // 月份从0-11.0是一月，11：是12月。所以要在后面加一
      console.log(new Date(1716623007895).getMoth() + 1);

打印结果：2024-5-25

      var year = new Date(1716623007895).getFullYear();

      var moth = new Date(1716623007895).getMonth() + 1;

      var day = new Date(1716623007895).getDate();

      console.log(year +"-" + moth + "-" + day);

更准确的一点

39.DOM

(1)节点

（2）节点类型

（3）节点数

（4）document

代码：

结果：

（5）三层节点关系

(6)Node.nodeType属性

40.document对象 --方法/获取元素

（1）document.getElementsByTagName()

类似数组

<body>
  
  <div>hello</div>
  <div>world</div>



    <script>
      var divs = document.getElementsByTagName("div");
      console.log(divs);
      console.log(divs[0]);
      console.log(divs[1]);

    </script>


</body>

（2）document.getElementsByClassName()

例子二：

（3）document.getElementsByName()

（4）document.getElementById()

只读一个，不是一群

（5）H5之后的新的：document.querySelector()

跟id差不多，只返回第一个

注意，打印nav时候前面有.

    <div class="nav">1</div>
    <div class="nav2">2</div>

    <script>
      var nav = document.querySelector(".nav");
      var nav2 = document.querySelector(".nav2");
      console.log(nav);
      console.log(nav2);

    </script>

（6）获取多个

41.document--创建元素

（1）document.createElement()

    <script>

      var text = document.createElement("p");
      console.log(text);
    </script>

(2)document.createTextNode()

    <div class="nav">111</div>
    <script>

      var text = document.createElement("p");
      var content = document.createTextNode("我是威威");
      console.log(text);
      console.log(content);
    </script>

(3)将文本放入标签中text.appendChild(content);

    <div class="nav">111</div>
    <script>

      var text = document.createElement("p");
      var content = document.createTextNode("我是威威");
      console.log(text);
      console.log(content);
      text.appendChild(content);
      console.log(text);
    </script>
    

（4）document.createAttribute()

只有属性才是添加才是：setAttributeNode。其他都是appendChild

     <script>
      
      var id = document.createAttribute("id");
      //赋值
      id.value = "root";
      console.log(id);
     </script>

    <div id="container"></div>
    <script>

      var text = document.createElement("p");
      var content = document.createTextNode("我是威威");
      //创建属性
      var id = document.createAttribute("id");
      //赋值
      id.value = "root";

      //将文本塞进标签：将子元素放进容器里面
      text.appendChild(content);

      // 将属性放进标签
      text.setAttributeNode(id);
      console.log(text);

      // 将这些放进页面里面
      var container = document.getElementById("container");
      // console.log(container);
      container.appendChild(text);
    </script>

42.Element对象_属性

（1）Element.id

    <div class="box"  id ="root">hello</div>

    <script>
      var root = document.getElementById("root");
      // console.log(root.id);//root
      root.id = "roots";//将root变为roots

    </script>

（2）Element.className

（3）Element.classList

<div class="box"  id ="root">hello</div>

   <script>
    var root = document.getElementById("root");
    console.log(root.classList.add("mybox")); 
    root.classList.remove("box");
    if(root.classList.contains("box")){
      console.log("you");
    }else{
      console.log("meiyou");
    }


   </script>

(4).Element.innerHTML

<div class="box"  id ="root">hello</div>

   <script>
    var root = document.getElementById("root");

    console.log(root.innerHTML);//读取
    console.log(root.innerHTML = "大家好全啊");//改写内容


   </script>

43.Element获取元素位置

（1）Element.clientHeight  ,    Element.clientWidth

  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 5px  solid red;
      padding: 10px;
      margin: 20px;
      background: green;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>

  <script>
    var box = document.getElementById("box");
    console.log(box.clientWidth);
    console.log(box.clientHeight);
  </script>

(2)Element.scrollHeight  ,    Element.scrollWidth

(3)Element.scrollLeft , Element.scrollTop

(3)Element.offsetHeight    Element.offsetWidth

(4)Element.offsetLeft    , Element.offsetTop

44.CSS操作

（1）setAttribute

   <div class="box" id="box"></div>

   <script>

    var box = document.getElementById("box")
    box.setAttribute("style","width:200px ; height:200px; background:red;" )
   </script>

(2)style属性

   <div class="box" id="box"></div>

   <script>

    var box = document.getElementById("box")
    // box.setAttribute("style","width:200px ; height:200px; background:red;" )
   box.style.width = "300px";
   box.style.height ="300px";
   box.style.backgroundColor ="red";
   
   
   
   </script>

（3）cssText属性

   <div class="box" id="box"></div>

   <script>

    var box = document.getElementById("box")
    // box.setAttribute("style","width:200px ; height:200px; background:red;" )
  //  box.style.width = "300px";
  //  box.style.height ="300px";
  //  box.style.backgroundColor ="red";
  box.style.cssText = "width:200px ; height:200px; background:red;"
   
   
   
   </script>

45.事件处理程序

（1）HTML事件处理

  <button  onclick="clickHandle()">按钮</button>

  <script>
    function clickHandle(){
      console.log("点击了按钮");
    }

  </script>

（2）DOM0级事件处理

  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
      console.log("点击了吧");
    }

（3）DOM2级事件处理

  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");
    btn.addEventListener("click",function(){
      console.log("点击了");
    })

46.事件类型之鼠标事件

前面要加on

    <button   id="btn1">单击</button>
    <button   id="btn2">双击</button>
    <button   id="btn3">鼠标按下</button>
    <button   id="btn4">鼠标抬起</button>


     <script>
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      var btn3 = document.getElementById("btn3");
      var btn4 = document.getElementById("btn4");

      btn1.onclick = function(){
        console.log("单击事件");
      }
      btn2.ondbclick = function(){
        console.log("双击事件");
      }
      
      btn3.onmouseup= function(){
        console.log("鼠标抬起");
      }
      btn4.onmousedown= function(){
        console.log("鼠标按下");
      }


     </script>

  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box" id="btn4"></div>

  <script>

    var btn4 = document.getElementById("btn4")
    btn4.onmousemove = function(){
      console.log("内部移动");
    }
  </script>

47.Event事件对象

<button id="btn">按钮</button>

  <script>
    var btn = document.getElementById("btn");
    //Even事件对象，其实就是参数
    btn.onclick = function(event){
      console.log(event);
    }

  </script>

（1）Event.target:点什么就返回什么

<button id="btn">按钮</button>

  <script>
    var btn = document.getElementById("btn");
    //Even事件对象，其实就是参数
    btn.onclick = function(event){
      // console.log();
      event.target.innerHTML = "点击之后"//点击  按钮  变成  点击之后
    }

  </script>

（2）Event.type

<body>
<button id="btn">按钮</button>

  <script>
    var btn = document.getElementById("btn");
    //Even事件对象，其实就是参数
    btn.onclick = function(event){
      console.log(event.type);//click    看添加的是什么事件
     
    }

  </script>

(3) 阻止浏览器跳转preventDefault();

    <a href="https://itbaizhan.com" id="it">itbaizhan</a>

    <script>

      var it = document.getElementById("it");
      it.onclick = function(e){
        e.preventDefault();
        console.log("dianji ");
      }
    </script>

（4）stopPropagation();

  <style>
    .root{
      width: 200px;
      height: 200px;
      background-color: #999;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="root" id="root">
    <div class="box" id="box"></div>
  </div>

  <script>
    var root = document.getElementById("root");
    var box = document.getElementById("box");

    root.onclick = function(){
      console.log("root");
    }
    box.onclick = function(e){
      e.stopPropagation();
      console.log("box");
    }


  </script>

点击红色的盒子不加e 会显示root和box，但加了e只会显示box

48.键盘事件

49.表单事件

（1）input事件

    <input type="text" id="username">

    <script>
var username = document.getElementById("username");
username.oninput = function(e){
  console.log(e.target.value);
}

    </script>

（2）select事件

（3）change事件：不会连续触发，统一完成之后才会触发

（4）reset事件和submit事件

50.事件代理

51. 定时器setTimeout

  <script>

    setTimeout(function(){
      console.log("三秒之后打印");
    },3000)
  </script>

以下是举例说明

如果想要只想局部，将 var that = this

(2)取消定时器

  <script>

    var TIMER =  setTimeout(function(){
      console.log("三秒之后打印");
    },3000)
    clearTimeout(TIMER)
  </script>

52.定时器setlnterval()

    <script>
// 每间隔一秒打印一回
      var i = 0;
      setInterval(function(){
        i++
        console.log(i);
      },1000)
    </script>

53.防抖（debounce）

54.节流