10.JavaScript

JavaScript

1.关于===运算符和NaN(number类型)

<script>
        // ==:类型可以不一样,只要值一样就为true
        //===:类型和值都一样就为true
        //NaN与所有的类型都不相等,包括自己
        console.log(NaN == NaN);//false
        console.log(NaN === NaN);//false
        console.log(isNaN(NaN));//true
    </script>

2.浮点数精度损失

这一点和java一样,减量避免使用浮点数进行运算,存在精度问题!

console.log(1/3) === (1-2/3); //false

可以利用两浮点数相差小于一个极小的数,近似相等

console.log(Math.abs(1/3-(1-2/3))< 0.00000001); //true

3.对象的定义及使用

Js中对象,{……}表示一个对象,键值对描述属性xxxx: xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
更多的关于对象的知识访问w3cschool

 var person = {
            name: "zhonguo",
            age: 1500,
            tag:['js','java','web','...']
        }
        console.log(person.name); //zhonguo

4.ES6新特性

1)模板字符串

		//利用单引号''或则双引号""多行字符串拼写
        let str1 = '你好呀' +
            'world' +
            'hello';
        //利用``多行字符串拼写
        let str2 = `你好呀
                    world
                    hello`;
        let name = "zhonghuaernv";
        let age = 3000;
        //模板字符串
        let str3 = '你好呀,${mame}${age}';//利用利用单引号''或则双引号""进行模板字符串就不得行
        let str4 = `你好呀,${name}${age}`;//利用``进行模板字符串就可以,这里的功能是拼接字符串

输出结果:
在这里插入图片描述
2)利用”use strict“;可以进行严格检查语法,下面的i变红就表示语法有误(如果不使用则不会变红)。
在这里插入图片描述
3)Map和Set
和java的Map、Set很像,map存储的是键值对数据,set存储的是无序不重复的数据

初始化Map需要一个二维数组,键和值都可以是任何类型的,不一定非要是string类型
Map常用方法:
get(),通过键获取该值
set(),添加新的键值对,添加成功放回true
has(),包含指定键则返回true,否则返回false
delete(),删除指定的键 ,删除成功返回true

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);    //初始化需要一个二维数组
m.get('Michael'); // 95
m.set('Adam', 67); // 添加新的key-value
m.get('Adam'); // 67

m.has('Adam'); // true
m.delete('Adam'); // 删除key 'Adam'

Set常用方法:数据值可以是任何类型的,不一定非要是string类型
add(),添加新的值,添加成功放回true
has(),包含指定键则返回true,否则返回false
delete(),删除指定值,删除成功返回true

var s = new Set([1, 2, 3, 3]); // 含1, 2, 3
s.add(4);
s; // {1, 2, 3, 4}
s.delete(3);
s; // Set {1, 2, 4}
s.has(5);//false

4)iterator遍历数组、Map、Set

//遍历数组
var arr = [3,4,5]
for(var x of arr){
    console.log(x)
}
//遍历Map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x)
}
//遍历Set
var set = new Set([5,6,7]);
for (let x of set){
    console.log(x)
}

5)作用域,let、var、const关键字
var定义的变量作用域在最内层的块级作用域中,如果在最外层块级作用域定义则表示全局变量,内层定义的就是局部变量。被定义为全局的变量会自动绑定到window对象下,可以通过window.变量名访问。

<script>
    var x = 'xxx';//全局变量
    alert(x);
    alert(window.x);//默认所有的全局变量,都会自动绑定在window对象下,所以可以通过.访问
</script>

但有时候会存在局部变量出了块级作用域还能使用(但在函数中var定义的局部变量确实出了块级作用域不能使用,所以下面演示的就是js的一个bug,所以后被ES6的let替代了局部变量的位置),建议大家都用let 去定义局部作用域的变量。

<script>
	function qj(){    
		var x = 1;    
		x = x + 1;
	} 
	x = x + 2;//Uncaught ReferenceError: x is not defined ,说名作用域外不能访问x
	
	/但下面这个i局部变量存在问题
	function f(){
	    for (var i = 0; i <100; i++){
	        console.log(i)
	    }
	    console.log(i+1);//var定义的局部变量出了块级作用域还能使用,bug
	}
</script>
<script>
	function f(){
	    for (let i = 0; i <100, i++){
	        console.log(i)
	    }
	    console.log(i+1);//输出undifiend,说明没有定义
	}
</script>

在ES6 引入了常量关键字const,常量不能被修改。

<script>
    const PI = '3.14'; //只读常量,不能修改
    console.log(PI);
    PI = '123'; //TypeError: Assignment to constant variable
    console.log(PI);
</script>

JavaScript实际上只有一个全局变量,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError。
由于我们所有的全局变量都会绑定到我们的 window 上,如果不同的js文件,使用了相同的全局变量,就会造成冲突。
所以养成规范:把自己的代码全部放到自己定义的唯一空间名字中,降低全局命名冲突的问题~(jQuery就是这样的,在里面有属性,也有方法)。

<script>
    var KuangApp = {};//唯一全局变量对象,这样就避免存在多个全局变量
    KuangApp.name = 'kuangshen';//在全局变量下定义属性
    KuangApp.add = function(a,b){ //在全局变量下定义方法
        return a+b;
    };
</script>

6)对象原型继承、class继承
原型继承:xiaoming对象要使用run方法是不可能的,只有通过xiaoming.proto =student(xiaoming原型继承student),这样就可以使用xiaoming.run()。
在这里插入图片描述
通过对象的prototype找到原型来添加方法
在这里插入图片描述
class继承:(越来越像java了)

class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
class XiaoStudent extends Student{	//与xiaostudent.__proto__=student一样
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong");

5.this、function的apply方法

this:表示调用该方法的对象
apply():第一个参数表示要访问的对象this,第二个数组参数是表示调用apply()的函数的实参(下图中因为 getAge函数是没有参数的,所以要么不写,要么为空数组)

<script>
        var kuangshen = {
            name: 'qinjiang',
            birth: 2000,
            age: getAge
            // age:function () {
            //     let now = new Date().getFullYear();
            //     return now-this.birth;
            // }
        }

        function getAge(){
            let now = new Date().getFullYear();
            return now-this.birth;
        }
        kuangshen.age();    //21	this就是kuangshen
        getAge();   //NaN	this就是window,但明显window没有birth属性
        getAge.apply(kuangshen,[]); //21	this就是kuangshen,getAge没有参数,所以第二个参数为空数组
    </script>

6.BOM

7.DOM

1)获得DOM节点
document.getElementsByTagName():通过标签名获取所有该标签节点对象,返回一个数组
document.getElementById():通过id获取该标签节点对象
document.getElementsByClassName():通过class获取所有该相同class值的节点对象,返回一个数组
2)更新DOM节点
innerHTML://设置或返回该标签节点内容
style:添加css样式
3)删除DOM节点
删除节点步骤:先获取父节点,通过父节点删除,不能自己删自己

  <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
  </div>

  <script>
      //获得
      var h1 = document.getElementsByTagName('h1');   //通过标签获得该标签元素对象节点数组
      var p1 = document.getElementById('p1');  //通过id获得该标签元素对象节点
      var p2 = document.getElementsByClassName('p2');    //通过class获得该标签元素对象节点数组
      //更新
      h1[0].innerHTML = "改变内容";   //设置或返回该标签节点内容
      p1.style.color = "red";
      //删除
      //1.获取父节点
      var father = p1.parentElement;//间接获取,和p1.parentNode效果一样,都是获取父节点对象
      // 直接获取 var father = document.getElementById("father")
      father.removeChild(p1);//参数为要删除的子节点对象
      //删除是一个动态的过程,删除一个少一个
      father.removeChild(father.children[0])
      father.removeChild(father.children[0])
  </script>

4)插入DOM节点
我们获得某个DOM节点,假设这个dom节点是空的,我们通过 innerHTML 就可以增加一个元素了。如果这个DOM节点已经存在元素了,我们就不能这么干了,会产生覆盖!
appendChild():添加子节点到该父节点的最后,参数为要添加的子节点对象
insertBefore():在指定的子节点前插入新的子节点。

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavEE</p>
    <p id="me">JavaME</p>
 </div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    var ee = document.getElementById('ee');
    var me = document.getElementById('me');
    //从已有节点对象中作为子节点进行添加
    list.appendChild(js); //id为js的p标签添加到了id为list的div标签的最后

    //通过创建新的标签对象来作为子节点进行添加
    var newP = document.createElement('p'); //创建一个p标签对象
    newP.id = 'newP';
    newP.innerHTML = 'Hello,world';
    list.appendChild(newP);
    list.insertBefore(me,ee);
</script>

在这里插入图片描述

8.表单验证之md5加密

不用md5加密技术,在输入密码是打开网络查看元素能看到用户输入的密码,使用md5加密技术以后密码会被加密显示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 添加md5加密文件-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>用户名:</span> <input type="text" id="username" name="username" >
    </p>
    <p>
        <span>密码:</span> <input type="password" id="password" name="password">
    </p>
    <!--    绑定事件 onclick 被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    function aaa(){
        var username = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(username.value)
        console.log(pwd.value)
        // pwd.value = '******'; //低端操作
        //MD5 算法 (高端操作)
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

在这里插入图片描述

9.JQuery

JQuery是js的一个快速便捷开发库
API文档:https://jquery.cuishifeng.cn/
导入方式1: 浏览器搜索cdn jquery,然后复制链接,导入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery库-->
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
</head>

导入方式2: 浏览器搜索jquery官网,下载jquery源文件(非压缩的文件,开发或调试期间使用),然后在项目中新建lib目录将jquery源文件放在其中,
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地导入jquery库-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>

jquery语法: ( s e l e c t o r ) . a c t i o n ( ) , 其 中 (selector).action(),其中 (selector).action()是jquery缩写,selector是选择器(和css一样),action是要对选择的该元素进行的操作。 如图语法使用:

<a href="" id="test-jquery">点我</a>
    <script>
        选择id为test-jquery的a标签对象,当a标签对象被点击时执行function内的代码
        $('#test-jquery').click(function (){
            alert('hello,jQuery')
        })
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值