js基础

JavaScript

引入js的方式

在这里插入图片描述

数据类型

number: 整数,浮点数,NaN,Infinity(无限大)

字符串 : ‘abc’,“abc”

布尔值 :true,false

逻辑运算 :&& || !

比较运算 : ==(类型不同值相同,true)

​ ===(类型不同值相同,false)

NaN===NaN	//false,NaN与所有的数值都不相等,包括自己
//只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题:存在精度问题,尽量避免使用浮点数进行运算

console.log(1/3===(1-2/3))		// false
console.log(Math.abs(1/3-(1-2/3))<0.000001)		// true

null和undefined

null:空

undefined:未定义

数组:[中括号]

var a=[1,1.1,true,"hello",'world'];

对象:{大括号}

var person={
    name:"ym",
    age:2,
    id:50
}

严格检查模式

'use strict'//严格检查模式(IDEA需要设置支持ES6语法),必须写在js的第一行
//局部变量建议使用let去定义

数据类型

字符串

  1. 正常字符串用单引号或双引号包裹
  2. 转义字符
\'
\n	//换行
\t	//tab键
\u4e2d	//unicode编码,中,\u####
\x41	//A,Ascii字符
  1. 多行字符串编写
var msg=`hello,world,llala`
  1. 模板字符串
let name="ym";
let age=2;
let msg1=`你好呀,${age}岁的${name}`;
  1. 字符串长度 str.length
  2. 字符串长度不可变
  3. 大小写转换
var str="AAAsss"
str.toUpperCase();
str.toLowerCase();
  1. 获取匹配元素的下标
str.indexOf("d");
  1. 截取字符串
str.substring(i);	//从第i个元素开始截取,截取到最后一个元素
str.substring(i,j)	//从第i个元素截取到第j个元素的前一个元素,即[前包后不包)

数组

Array可以包含任意数据类型的元素

var array=[1,2,3,5,"3","1"];
  1. 长度
array.length;1//6,数组长度可变
  1. indexOf下标索引
array.indexOf(5);	//3
  1. arr.slice(i,j)数组截取后返回新的数组
array.slice(2,5);	//[3, 5, "3"],类似于String中的substring(i,j)
  1. push() :向尾部添加元素

    pop() :从尾部弹出元素

array.push(6,7);	//[1, 2, 3, 5, "3", "1", 6, 7]
array.pop();		//[1, 2, 3, 5, "3", "1", 6]
array.pop();		//[1, 2, 3, 5, "3", "1"]
  1. unshift() :向头部添加元素

    shift() :从头部弹出元素

array.unshift("a");	//["a" 1, 2, 3, 5, "3", "1"]
array.unshift("b")	//["b", "a", 1, 2, 3, 5, "3", "1"]
array.shift();	//"b"
array.shift();	//"a"
array.shift();	//1
  1. 排序sort()
array.sort();	// [1, "1", 2, 3, "3", 5]
  1. 元素反转reverse()
array.reverse();	//[5, "3", 3, 2, "1", 1]
  1. 拼接concat()
array.concat([111,222,333]);
(9) [5, "3", 3, 2, "1", 1, 111, 222, 333]
array
(6) [5, "3", 3, 2, "1", 1]

返回一个新的数组,但不会改变原来的数组

  1. 连接符join,打印拼接数组,使用特定的字符串连接
// [5, "3", 3, 2, "1", 1, "a", "b"];
array.join(';')
// "5;3;3;2;1;1;a;b"
 
  1. 多维数组
var arr=[[11,22],[44,55],[6,7]];
// arr[2][1]=7;

对象

//定义了一个person对象,他有三个属性
var person={
    name:"ym",
    age:2,
    email:"2953616124@qq.com"
}
//	{}表示一个对象,键值对描述属性,多个属性之间用逗号,最后一个属性不加逗号

js中,所有的键都是字符串,值是任意对象

1,对象赋值

person.name
"ym"
person.name="ymm"
"ymm"
person.name
"ymm"

2,使用一个不存在的对象属性,不会报错 undefined

person.score
undefined

3,动态的删除对象属性 delete

person
{name: "ymm", age: 2, email: "2953616124@qq.com"}
delete person.name
true
person
{age: 2, email: "2953616124@qq.com"}

4,动态的添加对象属性

person.id=123
123
person
{age: 2, email: "2953616124@qq.com", id: 123}

5,判断属性是否在这个对象中

'id' in person
true

6,判断一个属性是否是这个对象自身拥有的 hasOwnProperty

'toString' in person
true

person.hasOwnProperty('toString')
false

person.hasOwnProperty('id')
true

流程控制

if判断

while循环

for循环

forEach循环

var score=[1,3,2,4,5,3,2,4];
score.forEach(function(i){
    console.log(i)
})
//1 3 2 4 5 3 2 4

for in

for(var num in score){
    console.log(num);//索引
    console.log(score[num])
}
//0 1 2 3 4 5 6 7
//1 3 2 4 5 3 2 4

for of

for(var num of score){
    console.log(num);//值
}

Map和Set

Map:

let map = new Map([['tom',60],['jerry',70],['any',80]]);
let tom = map.get('tom');//通过键获取值,60
map.set('aimi',90);//设置键值对
map.delete('tom');//删除键值对

Set:无序不重复的集合

let set = new Set([1,1,3,3,5,7,'q',"a"]);
set.add(9);//添加
set.delete(5);//删除
set.has(1);//true,判断set是否包含某元素
//0: 1
//1: 3
//2: 7
//3: "q"
//4: "a"
//5: 9

iterator

遍历Map和Set

let map = new Map([['tom',60],['jerry',70],['any',80]]);
for(let m of map){
    console.log(m);
}
//["tom", 60]
//["jerry", 70]
//["any", 80]

let set = new Set([1,1,3,3,5,7,'q',"a"]);
for(let s of set){
    console.log(s);
}
//1 3 5 7 q a

函数

定义函数

定义方式一

//绝对值函数abs()
function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
//执行到return就代表函数结束,返回结果
//如果没有执行return,函数执行完也会返回结果

定义方式二

var abs = function(x){
   if(x>=0){
        return x;
    }else{
        return -x;
    } 
}

调用函数

abs(10)	//10
abs(-333)	//333

参数问题:js可以传任意个参数,也可以不传参数

假设不存在参数

var abs = function(x){
    if(typeof(x)!='number'){
        throw 'not a number';//手动抛出异常
    }
   if(x>=0){
        return x;
    }else{
        return -x;
    } 
}
abs();
//VM658:3 Uncaught not a number

arguments

arguments是js免费赠送的关键字,是一个数组,代表传递进来的所有参数

var abs = function(x){
    
    console.log("x=>"+x);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
   if(x>=0){
        return x;
    }else{
        return -x;
    } 
}
abs(2,1,5,6,7)
//x=>2
//	2
//	1
//	5
//	6
//	7
2

问题:arguments包含了所有的参数,但是有时需要排除已有的参数,用多余的参数进行操作,

rest

之前:

if(arguments.length>1){
    for(var i=1;i<arguments.length;i++){
        //...
    }
}

ES6引入的新特性,获取除了已经定义的参数之外的所有参数

function test(a,b,c,...rest){
    console.log('a=>'+a);
    console.log('b=>'+b);
    console.log('c=>'+c);
    console.log(rest);
}
test(2,4,1,2,5.6)
//	a=>2
//  b=>4
//	c=>1
//	[2, 5.6]

rest只能写在参数列表的最后面,用…表示(类似于可变长参数)

变量作用域

在js中,var定义的变量有作用域

假设变量在函数体内声明,则在函数体外不可以使用

function test(){
    var x=1;
    x=x+1;	//	x=2
}
x=x+2 //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名,变量名只要在函数内部,就不冲突

function test(){
    var x=1;
    x=x+1;
}
function test2(){
    var x=1;
    x=x+1;
}

内部函数可以访问外部函数的成员,反之不行

function test(){
    var x=1;
    
	function test2(){
    	var y=x+1;	//y=2
	}
    var z=y+1;	//Uncaught ReferenceError: y is not defined
}

内部函数的变量和外部函数的变量重名

function test(){
    var x=1;
    function test2(){
        var x=2;
        console.log('inner'+x);
    }
    console.log('outer'+x);
    test2();
}
test();	//	outer1	inner2

函数查找变量从自身函数开始查找,由’内’向’外’,假设外部存在同名的函数变量,则内部函数会屏蔽外部函数的变量.

所有的变量定义都放在函数的头部,不要乱放,便于代码维护

function test(){
    var x,y,z,a;
    //.....
}

全局变量

x=1;
function test(){
    console.log(x);	
}
test();//	1
console.log(x);//	1

全局对象window

var x='aaa';
alert(x);
window.alert(x);
window.alert(window.x);

默认所有的全局变量都绑定在window对象下

js中,任何变量(函数也可视为变量),假设没有在函数作用域范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错 RefrenceError

由于所有的全局变量都绑定在window上,如果不同的js文件使用了相同的全局变量,就会冲突

规范:把自己所有的代码放入自己定义的唯一空间名字中,降低全局命名冲突的问题

//唯一全局变量
var test={

};

//定义全局变量
test.name="ym";
test.add=function(a,b){
    return a+b;
}
test.name;//	"ym"
test.add(3,9);//	12

局部作用域 let

function test(){
    for(var i=0;i<3;i++){
        console.log(i);
	}
	console.log(i+10)
}
test();// 0 1 2 13
//问题来了,i出了作用域还能使用!!!

ES6 let关键字,解决了局部作用域冲突问题

function test(){
    for(let i=0;i<3;i++){
        console.log(i);
	}
	console.log(i+10)
}
test();//0 1 2 Uncaught ReferenceError: i is not defined at test

用let定义局部作用域的变量

常量 const

在ES6之前,定义常量:

//用大写字母命名的量就是常量,如下
var PI='3.14';

在ES6引入了常量关键字 const

const PI='3.14';
console.log(PI);	//3.14
PI='111';
console.log(PI);//Uncaught TypeError: Assignment to constant variable.

方法

定义方法

对象有 : 属性,方法

方法就是把函数放在对象里面

var person={
    name:'ym',
    birth:2020,
    age:function(){
        var now=new Date().getFullYear();
        return now-this.birth;
    }
}
person.name;
person.age();

this代表什么?把上面的代码拆开看看

function getAge(){
    var now=new Date().getFullYear();
    return now-this.birth;
}
var person={
    name:'ym',
    birth:2020,
    age:getAge
}
person.age();//1
getAge();//NaN

this无法指向,this默认指向调用它的那个对象

apply

在js中通过apply()控制this的指向

function getAge(){
    var now=new Date().getFullYear();
    return now-this.birth;
}
var person={
    name:'ym',
    birth:2020,
    age:getAge
}
getAge.apply(person,[]);//this指向了person对象,参数为空

内部对象

标准对象

typeof 123
"number"
typeof NaN
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof [123]
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

基本使用

<script>
        var date = new Date();//Wed Mar 31 2021 15:42:22 GMT+0800 (中国标准时间)
        
        date.getFullYear();//   年,2021
        date.getMonth();//  月,2,0~11月
        date.getDate();//   日,31
	 	date.getDay();//    星期几,3
        date.getHours();//  时,15
        date.getMinutes();//    分,40
        date.getSeconds();//    秒,8
        date.getTime();//   时间戳,全世界统一,从1970.1.1.0:00:00开始到现在的毫秒数,1617176542168,
        
        console.log(new Date(1617176542168));//时间戳转为时间 ,Wed Mar 31 2021 15:42:22 GMT+0800 (中国标准时间)
        
        date.toLocaleString();//    "2021/3/31下午3:42:22"
        
        date.toGMTString();//   "Wed, 31 Mar 2021 07:42:22 GMT"
        
</script>

Json

json是什么

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

  • 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

在js中一切皆对象,任何js支持的类型都可以用json来表示(number,string,function,……)

格式

  • 对象 { }

  • 数组 [ ]

  • 键值对 key:value

js对象和json字符串的转换

<script>
        var student={
            name:'ym',
            id:123,
            age:1
        }
        //把student对象转为json字符串,stringify()
        var JsonStu = JSON.stringify(student);

        //把json字符串转为student对象,stringify()
        var stuObj = JSON.parse(JsonStu);
        
</script>

在这里插入图片描述

js对象和json字符串

var obj={name:'ym',age:1};
var json="{"name":"ym","age":1}";

在这里插入图片描述

面向对象编程

类:模板

对象:具体的实例

原型对象 xm.__ proto __=stu;

		var stu={
            name:'ym',
            age:1,
            run:function(){
                console.log(this.name+"  can run");
            }
        }
        stu.run();// ym  can run
        var xm={
            name:"xiaoming"
        }
        xm.name;
        //原型对象,xm的原型时stu
        xm.__proto__=stu;
        console.log(xm.run());//xiaoming  can run

function Stu(name){
            this.name=name;
        }
        //给Stu新增一个方法
        Stu.prototype.hello=function(){
            console.log(('hahha'));
        }
        var xm = new Stu("xiaoming");
        console.log(xm.name);//  "xiaoming"
        xm.hello();//   hahha

class关键字,在ES6引入

定义一个Student类,属性,方法

class Student{
    constructor(name) {
        this.name=name;
    }
    run(){
        console.log(this.name+"  can  run");
    }
}
var xh = new Student("xiaohong");
console.log(xh.name);//xiaohong
xh.run();//xiaohong  can  run

继承

class xiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
}
var tom = new xiaoStudent("tom",2);
console.log(tom.grade+"年级的"+tom.name);//2年级的tom
tom.run();//tom  can  run

原型链

参考大佬的

操作BOM对象(重点)

bom:浏览器对象模型

浏览器介绍

js的诞生就是为了能够在浏览器中运行

  • IE 6~11
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

1,window对象

window 代表 浏览器窗口
在这里插入图片描述

在这里插入图片描述

2,navigator

navigator封装了浏览器对象

3,screen

screen.width
1280
screen.height
720

4,location

location 代表 当前页面的url信息

location
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=88093251_33_hao_pg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()
replace: ƒ replace()
search: "?tn=88093251_33_hao_pg"
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

5,document

document 代表 当前页面

在这里插入图片描述

获取文档树节点

<dl id="app">
	<dt>java</dt>
	<dd>class</dd>
</dl>

<script>
	var d = document.getElementById("app")
</script>

6,history

history代表浏览器的历史信息

history.back()//回退
history.forword()//前进

操作DOM对象

核心

浏览器网页就是一个Dom树形结构

  • 更新Dom节点
  • 遍历Dom节点
  • 删除D节点
  • 添加Dom节点

要操作一个Dom节点,就必须先获得这个Dom节点

获得Dom节点

document.getElementsByTagName("h1");
document.getElementById("p1");
document.getElementsByClassName("p2");

更新Dom节点

<div id="id1">

</div>

<script>
    var id1=document.getElementById("id1");
</script>
  • 操作文本
id1.innerText="abc";
id1.innerHTML="<strong>abc</strong>";
  • 操作css
id1.style.fontSize='50px';
id1.style.color='red';

删除节点

删除节点的步骤:先获取父节点,再通过父节点删除自己

father.removeChild(self);

插入节点

获得某个Dom节点

如果这个Dom节点是空的,可通过innerHTML增加一个元素

如果这个Dom节点已经存在元素了,就不能这样了

append追加

<body>
<p id="js">js</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    let list2 = list.appendChild(js);
	
//创建新的节点后插入list中
    let newP = document.createElement("p");
    newP.id="newP";
    newP.innerText="hello,world";
    list.appendChild(newP);

	let newA = document.createElement("a");
    newA.innerText="点击跳转到百度";
    newA.setAttribute("href","https://www.baidu.com");
    list.appendChild(newA);
</script>

在这里插入图片描述

把节点追加到指定节点的前面

<p id="js">js</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    let js = document.getElementById('js');
    let me = document.getElementById("me");
    let list = document.getElementById("list");
    list.insertBefore(js,me);
</script>

在这里插入图片描述

操作表单

表单

text,passowrd,radio,checkbox,select,hidden,button,submit,reset

表单的目的:提交信息

获取要提交的信息

document.getElementsByTagName(“input[0]”).value=“123”
“123”
document.getElementsByTagName(“input[0]”).value
“123”

提交表单,MD5加密,优化表单

<!--
表单绑定提交事件、οnsubmit="return aaa()"
onsubmit绑定一个提交检测函数,true,false
-->
<form action="https://www.baidu.com" method="get" onsubmit="return aaa()">
    <p>
        <span>用户名:</span>
        <input type="text" name="username" id="username"/>
    </p>
    <p>
        <span>密码:</span>
        <input type="password"  id="input_password"/>
    </p>
    <!-- 密码框隐藏 -->
    <input type="hidden" name="password" id="md5_password">

    <button>提交</button>
</form>

<script>
    function aaa(){
        let username = document.getElementById("username");
        let input_password = document.getElementById("input_password");
        
        // input_password.value = md5(input_password.value);//提交的瞬间密码变长
        
        md5_password.value = md5(input_password.value);
        
        // return false;//检验不通过则不提交
        return true;
    }
</script>

jQuery

jQuery库

在这里插入图片描述

引入jQuery
<script src="lib/jquery-3.4.1.min.js"></script>

公式:
$(selector).action()

事件

鼠标移动事件mousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.min.js"></script>
    <style>
        #id1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
    <script>
        //页面加载完成之后
        $(function () {
        
            $("#id1").mousemove(function (e) {
                $("#mouseXY").text("x:"+e.pageX+"  y:"+e.pageY);
            })
        })
    </script>
</head>
<body>

mouse: <span id="mouseXY"></span>
<div id="id1">
    移动鼠标查看坐标
</div>

</body>
</html>

在这里插入图片描述

节点文本操作

$("#id1").text("123");//设置文本
$("#id1").text();//获得文本

$("#id1").html("123");//设置文本
$("#id1").html();//获得文本

css操作

$("#python").css("color","red");

显示与隐藏(display)

$("#python").show();
$("#python").hide();

小技巧

巩固js(看jQuery源码,看游戏源码)

巩固html,css(扒网站,修改看源码)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值