JavaScript

小白要变大牛

于 2022-04-24 22:28:23 发布

阅读量1.4k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hnhroot/article/details/124390655

版权

let与var：两个都是js的变量，在es6之前使用的都是var，在es6之后用的是let，js中也有常量相当于java中的final，定义了以后就不能再改变
js中的数据类型：
1：原始数据类型：number：①：数字类型 ②：string：字符类型使用单引号双引号都行，建议单引号 ③：boolean：布尔类型 true false ④：null：空类型 ⑤：undefined：未定义类型

//可以使用typeof查看是什么类型    例如下边的a名字的数据   就可以    let type = typeof a;  返回的就是这个a的数据类型


let a = 10;  //number类型

let b = 1.2;   //number类型

let c = '张bi晨';  //String

let x;   //undefind

let date = new Date();  //获取当前系统时间  引用数据类型

console.log(1-'abc');   NaN    报错 因为这不能使用number类型和string类型进行相减

2：引用数据类型：Object

js的运算符：
1： ==与===区别：==是直接比较的内容，只要是内容相等即使数据类型不一样也是true
===：实现比较数据类型，如果两个数据类型不一样直接false如果数据类型一样数值也一样才会是true
!=是==取反 !==是===取反
2：逻辑运算符：&& || ！感觉和java差不多
js中有六种假：false 0 ' ' 或者" " null NaN 0

/*
        逻辑运算符：
          && || !
         注意：
          1. 在js中逻辑运算符不仅仅针对布尔类型的运算，可以是任意类型 字符 数字等，最后结果是布尔类型
          2.在js中有六种假：
            false 0 ''或者"" NaN null undefined
       */
      if(0 && true){//0 && true :0是假的，&&特点是一徦即假
        console.log('真的');
      }else{
        console.log('假的');

      }

      if(10 && true){//0 && true :10是真的，&&特点是一徦即假
        console.log('真的');
      }else{
        console.log('假的');

      }
     
      if((1-'abc') || '锁哥'){//1-'abc' 是NaN 类型 属于假的类型，'锁哥' 是真的，||特点是一真即真
        console.log('真的');
      }else{
        console.log('假的');

      }

数据类型转换：在js中所有对象都可以使用window对象调用，window可以省略
比如将 let s = '123abc'；转换为number类型那么就是这样写的window.parentInt(s) 又因为window可以说省略所以可以这样写 parentInt(s)
在这里parentInt是从前给后来的转换的时候，123abc转换后就是123，遇到了后边的abc就停止了，如果是一开始就是abc那么就NaN，比如parentInt('abc123')那么就是NaN
还可以转化boolean类型的，例如Number(true) //返回的就是1 如果是false那么就是0
js中的函数： js中函数格式:function 函数名(参数) {......}; 调用函数：fn(参数);   在函数中也可以写return 返回值结束函数体
使用匿名函数：function fn(参数1，参数2..){操作。。}；也可以用一个let fn =   function fn(参数1，参数2..){操作。。}；来接收匿名函数

js中的对象:
数组，可以添加任意类型，一个数组可以是1，哈哈，true在一个数组：方式一：let arr = new Array(只有一个number整数类型的)；那么就是表示数组长度，它里面的值为empty
方式二：let arr = new Array('哈哈')；//表示的是长度为1的数组值为哈哈
方式三：let arr = new Array(1,2,3); //表示长度为3的数组值为1，2，3
方式四：let arr = [1,2,3,4]; 直接用[]括号给里面填充值然后当数组的值
这里面方式一如果是小数点那么就会报错，当只有一个number类型的时必须时整数因为代表的是数组长度
数组的长度是可以改变的：例如本来方式三的数组的长度是3，可以再写 arr.length = 2; 那么此时数组的长度就变为了2，值为1，2长度2以后的值就不要了
数组的push:将数据添加到数组的末尾
   例如：let arr = [1,2,4]; arr.push('aa','bb'); 那么这个数组就是 1，2，4，‘aa’,‘bb’
splice：删除数据也可以添加数据：例如：let arr = [1,2,4];
删除： arr.splice(1,2)l那么就是删除第一个索引开始删除两个最后数组就是1
新增： arr.splice(1,0,'哈哈'，‘嘻嘻’); 就是在第一个索引前新增，0是代表新增，0后面的参数就是新增的内容最后就是1，2，4，哈哈，嘻嘻
正则表达式：两种方式：①:let reg = new RegExp("^正则符号$");
②：let reg = /^正则表达式$/;
然后用reg.test('需要校验的数据');返回的是boolean

 /*
      js中的正则对象RegExp讲解
      1.在js中创建正则有两种方式：
        1）new RegExp("^正则符号$");
        2）/^正则符号$/; 建议使用
        注意：在js中书写验证的正则中必须加边界词： ^  $
      2.RegExp正则对象中的验证函数
      test(被验证的字符串) 如果被验证的字符串满足正则对象中的表达式则test函数返回true，否则返回false
     */
    //需求：验证指定字符串长度是否是6
    //1.创建正则表达式对象
    /*
      1)^ 在正则中表示以什么开始
      2）. ： 在正则中表示任意字符
      3）{6}表示前面的正则即点代表的任意字符出现的6次
      4）$：表示结尾
    */
    // let reg = new RegExp("^.{6}$");
    let reg = /^.{6}$/;

    //2.使用正则对象调用test方法验证字符串是否满足正则表达式
    let result = reg.test('a4bdef');

js中的对象：格式
let person={
属性：xxxx，
属性：xxxx，
函数名：函数（参数）{};
}
调用的时候可以直接person.属性名在对象中的函数里面想要用对象中属性的值也可以this.属性名，this在这个对象中就是值得这个对象
String:它里面和java差不多都有charAt(index); 还有一个indexOf(数据) 如果里面有这个数据就返回一次出现的索引如果没有就返回-1 例如

    /*
      String字符串对象
     */
    //1.创建字符串对象
    let s = new String('abc');//了解
    //输出字符串
    console.log(s);//打印的不是字符串abc的值，是对象
    console.log(s.toString());//使用toString方法将s中的abc转换为字符串 abc

    //2.创建字符串对象
    let s1 = "abc";
    console.log(s1);

    let s2 = 'abc';//推荐使用
    console.log(s2);

    //输出字符串长度，使用String对象中的length属性，不是函数
    console.log(s2.length);//3************************是length不是length()*********************************************

    //String的常见函数：
    // charAt(intdex)	返回在指定位置的字符。index	必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
   console.log(s2.charAt(1));//b  1表示字符b对应的索引

   //indexOf(searchvalue)	检索字符串。searchvalue	必需。规定需检索的字符串值。
   console.log(s2.indexOf('bc'));//1   这里返回的1的原因是因为bc在字符串'abc'中出现的位置是1索引
   console.log(s2.indexOf('bd'));//-1  因为'abc'中没有子字符串bd,索引返回-1

定时器：

  /*
        1.确认框
          let result = window.confirm(提示信息);//可以省略window对象
            点击确定按钮，返回true
            点击取消按钮，返回false
       */
      // let result = window.confirm('这么好的商品，确认删除吗?');
      // console.log(result);
      

      /*
        2.定时器：
          let 变量名 = window.setInterval(匿名函数,毫秒); 
            说明：
              1.匿名函数作为  setInterval()函数的第一个参数传递到setInterval函数底层
              2.该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体

          取消定时器：
          window.clearInterval(定时器变量名);
       */
      //  console.log('hello');
      //开启定时器，每隔1秒输出一次hello
      // window.setInterval(function(){// 2.该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
      //   //输出
      //   console.log('hello');
      // },1000);

      //开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
      // let timer = window.setInterval(function(){
      //   //输出
      //   console.log('hello');
      //    //取消定时器
      //    window.clearInterval(timer);//timer表示上述定时器的返回值
      // },3000);


      /*
        let 变量名 = window.setTimeout(匿名函数,毫秒)
         说明：该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体,只会执行一次
       */
      //开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
      window.setTimeout(function(){
        console.log('hello');
      },3000);

获取Element：

 /*
    获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组

     */
    //1. getElementById：根据id属性值获取，返回一个Element对象
    //获取img标签：<img id="light" src="imgs/off.gif">
    let objImg = document.getElementById('light');
    console.log(objImg);

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    //获取上述所有的div标签
    let arrDivs = document.getElementsByTagName('div');
    console.log(arrDivs.length);//2
   
    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    //获取上述所有的name属性值是hobby的标签
    let arrHobbies = document.getElementsByName('hobby');//<input type="checkbox" name="hobby">
    console.log(arrHobbies.length);//3
   
    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
    //获取class是cls的标签
    let arrCls = document.getElementsByClassName('cls');
    console.log(arrCls.length);//2

Element对象：

<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Title</title>
</head>
<body>
<img id="light" src="imgs/off.gif"> <br>

<div class="cls">传智教育</div>
<br>
<div class="cls">黑马程序员</div>
<br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
     //1. getElementById：根据id属性值获取，返回一个Element对象
     var objImg = document.getElementById("light");//<img id="light" src="imgs/off.gif">
    // 修改图片地址变为on.gif
    //objImg表示整个<img id="light" src="imgs/off.gif">标签对象
    //当前需求是修改src的属性值，那么我们应该使用objImg对象调用src属性并修改值
    objImg.src="imgs/on.gif";

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML：设置元素内容
    */
    //需求：设置字体颜色为红色
    //2.1遍历数组取出divs中的每个div标签对象
    for(let i=0;i<divs.length;i++){
        //2.2取出divs数组中每个div标签对象
        //数组不能直接调用div标签的属性和函数，必须取出数组中每个div标签对象，才可以使用div标签对象调用div标签所属对象的属性和函数
        let objDiv = divs[i];
        //2.3使用取出的div标签对象调用调用div标签对象的属性设置字体颜色
        //使用Div的父对象Element中的属性：style	设置或返回元素的 style 属性。
        objDiv.style.color="red";//color表示字体颜色，属于使用js对象操作css样式名
        //更改文本,使用Div的父对象Element中的属性：innerHTML：设置元素内容
        objDiv.innerHTML="传智播客";
    }
  

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //设置复选框被选中
        hobbys[i].checked=true;//给checked属性设置为true表示标签被选中
    }

</script>
</body>
</html>

js的绑定事件:

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Title</title>
</head>
<body>
<!-- 给下面的标签绑定单击事件 -->
<!-- 
  onclick="fn()" 表示给标签input绑定一个单击事件，单击该input标签的时候就会调用fn函数，执行fn函数体代码

 -->
<input type="button"  value="点我试试" onclick="fn()"/>
<script type="text/javascript">
  /*
    事件名作为标签属性名，在属性值中调用js函数。
   */
 function fn(){
   console.log('别点我了，受不了了');
 }
</script>
<!-- 给下面的标签绑定单击事件 -->
<input type="button" value="点我试试" id="btn"/>

<script type="text/javascript">
  /*
    标签对象.事件名=function(){

    }
   */
  let objBtn = document.getElementById('btn');
  //使用获取的标签对象给<input type="button" value="点我试试" id="btn"/>标签绑定单击事件
  objBtn.onclick=function(){
    console.log('试试就试试');
  }
 
</script>

</body>
</html>

Element绑定然后获取里面的value：

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Title</title>
</head>
<body>

<form id="register" action="#">
    <input type="text" name="username" id="username"/>

    <input type="submit" value="提交">
</form>

<script>
    //需求：给form表单绑定提交事件，然后将数据提交到后台服务器
    /*
        说明：
            1.提交绑定执行的事件名是onsubmit
    */
   //1.给form标签绑定事件
   //1.1获取form标签对象
   let objForm = document.getElementById('register');
   //1.2绑定事件
   objForm.onsubmit=function(){
       //2.获取form表单中的input标签的value值，对于input标签输入的值赋值给value
       //objInput: <input type="text" name="username" id="username"/>
       let objInput = document.getElementById('username');
       //3.获取input标签的value属性值即输入框输入的值
       let val = objInput.value;
       //4.输出val值
       console.log(val);
    //    alert(val);
   }

    

</script>

</body>
</html>