JS基础/入门/初级

JavaScript

1.一些基础

alert("警告");//控制浏览器弹出一个警示框
document. write();//可以向body中输出一个内容。
console.log（）;//可以向控制台输出一个内容。

推荐将JS代码编写到外部JS文件中，然后通过script标签引入（推荐）。

<script src="链接.js"> 
</script>

JS严格区分大小写。

使用var关键字申明变量。

• String字符串，单双引号都可以，转义字符\，如 " 即 "
• 最大值：Number.MAX_VALUE；最小值：Number.MIN_VALUE
• 正无穷：Infinity；负无穷：-Infinity
• NaN：一个特殊的数字，表示非数字
• 空：null。
• 未定义：Undefined

比较运算符

• = 赋值
• == 等于（类型不一样，值一样，也会返回true）
• === 绝对等于（类型一样，值一样，返回true）

对象：

var obj = new Object();
var obj2={属性名1：属性值1，属性名2：属性值2，属性名n：属性值n…};
var Person={
    name:"a",
    age:18,
    tags:['js','java']
}

取对象的值：

Person.name
Person.age

2.严格检查模式

<script>
	'use strict';
	let i=1;
</script>

‘use strict’; //严格检查模式，预防JS的随意性导致产生的一些问题。必须写在第一行。前提：需要设置ES6语法。

局部变量推荐使用let定义。

3.数据类型

1.字符串

1.多行字符串编写

var msg=
	`hello
	你好
	hi`

2.模板字符串

let name="a"
let msg=`你好，${name}`

3.字符串长度

str.length

4.大小写转换

str.toUpperCase();//将一个字符串转换成大写并返回。
str.toLowerCase();//将一个字符串转换成小写并返回。

5.检索字符串

检索字符串中是否含有指定内容：

str.indexof('a');//若含有a，则返回第一次出现的索引；若没有，则返回-1。
str.lastIndexOf('a'); 从后往前找

切片：

str.substring(开始位置，结束位置);//不能接受负值，而且会自动调整参数位置，如果第二个参数小于第一个参数，自动交换位置。
str.substr(开始位置，截取长度);
str.split(",");//以,为分隔符把字符串分割成数组

2.数组

var 数组名=[];//可以在中括号里直接添加元素

1.数组长度：arr.length

修改length大于原长度，会空出新部分;小于原长度，多出来的会被删除。

2.检索数组中是否含有指定内容：

arr.indexof(1);//若含有1，则返回第一次出现的索引；若没有，则返回-1。

3.切片：

arr.slice(开始位置，结束位置);//不会改变原数组，而是将截取的元素封装到新数组中。左开右闭。不写结束位置，即截取从开始位置往后的所有元素。传递负值，即从后往前截取。

4.方法：

arr.push(元素);//在数组末尾添加一个或多个元素，并返回数组的新的长度。
arr.pop(元素);//删除数组的最后一个元素，并返回被删除的元素。
arr.unshift(元素);//向数组开头添加一个或多个元素，并返回数组的新的长度。
arr.shift(元素);//删除数组的第一个元素，并返回被删除的元素。
arr.sort();//排序
arr.reverse();//元素反转
arr.contant(数组名1，数组名2…数组名n);//连接两个或多个数组，并将新的数组返回，不会对原数组产生影响
arr.join('-');//将数组转换成一个字符串,指定-作为数组中元素的连接符，默认","，不会对原数组产生影响。

5.遍历数组：

arr.forEach(function(value){
	console.log(value);
}); 
for(var num in age){
    console.log(age[num]);
}

3.对象

1.键值对：键是字符串，值是任意对象

var obj={
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

使用一个不存在的对象属性不会报错。

2.动态删除/添加属性：

delete person.name
person.firstName="tom"//直接添加

3.判断属性值是否在这个对象中：

'age' in person
person.hasOwnProperty('age')//判断是否是该对象自身的属性

4.Map和Set

ES6新特性

Map:

var map = new Map([["tom",99],["jack",80],["rose",100]]);
var name = map.get("tom");//通过key获得value
map.set("lily",88);
set.delete("tom");

Set：无序不重复的集合

var set = new Set([3,1,2]);//可以自动去重
set.add(4);
set.delete(1);
set.has(3);//是否包含某个元素，返回true或false

5.iterator迭代器

ES6新特性

var arr=[3,4,5];
for(var x of arr){
	console.log(x);
}

遍历map、set与遍历数组同理。

4.函数

1.定义函数

function 方法名（形参）{
	语句;
}
fun();//调用函数

如果不存在参数，如何规避？手动抛出异常：

var abs=function(x){
	if(typeof x !== 'number'){
		throw 'Not a Number';
	}
	if(x>=0){
		return x;
	}else{
		return -x;
	}
};

2.arguments、rest

arguments是一个JS免费赠送的关键词，代表传送进来的所有的参数，一个数组。

var fun=function(x){
	for (var i=0;i<arguments.length;i++){
		console.log(arguments[i]);
	}
}

arguments包含所有的参数，需要使用多余的参数来进行附加操作时，如何排除已有参数？

rest：ES6新特性，获取除了已定义的参数的其余参数。

function fun(a,b,...rest){
	console.log(a);
	console.log(b);
	console.log(rest);
}

3.变量的作用域

在函数体中声明，则在函数体外不可以使用。

内部函数可以访问外部函数的成员，反之不成立。

假设内部函数变量和外部函数变量重名，就近原则。

4.常量

const

const PI='3.14';

5.方法

var a={
	name:'a',
	bornYear:2000,
	age:function(){
		var now = new Date().getFullYear();
		return now-this.bornYear;
	}
};
//属性
a.name
//方法
a.age()

this默认指向调用它的那个对象。

apply可以改变this的指向：

function getAge(){
		var now = new Date().getFullYear();
		return now-this.bornYear;
}
var a={
	name:'a',
	bornYear:2000,
	age:getAge
};
getAge.apply(a,[]);//没有传参，this指向a

5.内部对象

1.Date

var now = new Date();//当前时间
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳

now.toLocalString()//转换为显示本地时间的字符串

2.JSON

• JSON是一种轻量级的数据交换格式。
• 简介和清晰的层次结构使得JSON成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS一切皆为对象，任何JS支持的类型都可以用JSON来表示。

格式：

• 对象都用{}
• 数组都用[]
• 所有的键值对都用key：value

var user={
	name:"a",
	age:18,
	sex:'男'
}
var jsonUser=JSON.stringify(user);//对象转换为JSON字符串
JSON.parse('{"name":"a","age":18,"sex":"男"}');//JSON字符串转换为对象

6.面向对象编程

java: 类：模板；对象：类的实例

JS：

面向对象原型继承：

var student={
	run:function(){
		console.log(this.name+"run");
	}
};
var a={
	name:"aa"
};
a.__proto__=student;//a的原型对象是student，类似继承，于是a也可以调用run()

ES6后，面向对象class继承：

class Student{
	constructor(name){
		this.name=name;
	}
	hello(){
		alert('hello');
	}
}
class Pupil extends Student{
    constructor(name,grade){
		super(name);
        this.grade=grade;
	}
    hi(){
        alert('hi');
    }
}
var a = new Student("aa");

本质仍是查看对象原型。

原型链：proto

7.操作BOM对象

BOM：浏览器对象模型

• window 整个浏览器窗口，全局对象
• Navigator 当前浏览器的信息，可以用于识别浏览器
• Location 当前浏览器的地址栏
• History 浏览器的历史记录，无法获取到具体历史记录，只能操作浏览器向前或向后翻页，且只在当次访问时有效
• Screen 用户的显示器的信息

8.操作DOM对象

1.获取元素节点

document.getElementById();//通过id属性获取一个元素节点对象
document.getElementsByTagName();//通过标签名获取一组元素节点对象，返回的是类数组对象，所有查询到的元素都会封装在内数组中
document.getElementsByClassName();//通过class属性值获取一组元素节点对象，不支持ie8以下浏览器
document.getElementsByName();//通过name属性获取一组元素节点对象

获取元素节点的子节点

children//属性，表示当前元素的所有子元素
firstElementChild//属性，表示当前元素的第一个子元素，不支持i8以下浏览器
lastElementChild//属性，表示当前元素的最后一个子元素，不支持i8以下浏览器

获取元素节点的父节点和兄弟节点

parentNode//属性，表示当前节点的父节点
previousElementSibling//属性，获取前一个兄弟元素，不支持i8以下浏览器
nextElementSibling//属性，获取后一个兄弟元素，不支持i8以下浏览器

2.更新节点

innerHTML用于获取元素内部的HTML文本，对于自结束标签如input没有意义。

<div id="id1">
</div>
<script>
	var id1=document.getElementById('id1');
</script>

id1.innerText='123'
id1.innerText='<strong>123</strong>'

如果需要读取元素节点属性，直接使用元素.属性名，但class属性不能采用这种方式，而是元素.className。

3.删除节点

bj.parentElement.removeChild(bj);
conform("确定要删除吗");//带有确认和取消按钮的提示框。点击确认会返回true，点击取消会返回false

4.插入节点、替换节点

var li=document.creatElement("li");//创建一个元素节点对象
var city=document.getElementById('city');//获取父节点
li.innerHTML="广州";
li.setAttribute('id','gz');//可以设置任意属性
city.appendChild(li);//插入在最后

父节点.insertBefore(新节点，旧节点);//在指定的子节点前插入新的子节点
city.insertBefore(gz,bj);//把gz插入到bj之前

父节点.replaceChild(新节点，旧节点);//替换子节点

5.DOM操作内联样式，读取样式表

元素.style.样式名=样式值;//读取内联样式中的样式语法
box1.style.width="300px";

//读取当前元素正在显示的样式,包括内联样式和样式表都可以读取
元素.currentStyle.样式名//只有ie支持
getComputedStyle(要获取样式的元素，null).样式名//第二个参数是伪元素，一般传null。返回一个对象，对象中封装了当前元素对应的样式。
//兼容的方式，但只读
function getStyle(obj,name){//obj 要获取样式的元素，name 要获取的样式名
	return window.getComputedStyle?return getComputedStyle(obj,null)[name]:return obj.currenStyle[name];
}

9.操作表单（验证）

<body>
	<form method="post">
		<span>用户名：</span><input type="text" id="username">
		<input type="radio" name="gender" value="male" id="male_radio">男
        <input type="radio" name="gender" value="female" id="female_radio">女
    </form>
	<script>
		var input_text=document.getElementById('username');
        var male_radio=document.getElementById('male_radio');
        var female_radio=document.getElementById('female_radio');
	</script>
</body>

input_text.value//获取文本框内输入的值
//单选框、多选框等固定value值的按钮可以使用checked判断是否被选中
male_radio.checked//获取男性单选按钮是否被选中

10.JQuery

1.获取JQuery

• 在线引入CDN JQuery
• 下载导包

2.公式

$(selector).action()

<body>
	<a href="#" id="test">点击</a>
	<script>
        //选择器就是CSS的选择器
		$('#test').click(function(){
			alert('hello');
		})
	</script>
</body>

3.事件

鼠标事件

• 鼠标被按下：onmousedown()
• 鼠标移动：onmousemove()
• 鼠标松开：onmouseup()

键盘事件

• 某个键盘按键被按下：onkeydown//一直按着就一直触发。连续触发时，为了防止误操作，第一次和第二次之间的间隔会长一点。
• 返回按键的unicode编码：event.keyCode
• alt、ctrl、shift是否被按下：event.altKey/event.ctrlKey/event.shiftKey
• 某个键盘按键被松开：onkeyup

滚轮事件

• 滚轮滚动：onmousewheel()//火狐不支持，火狐使用DOMMouseScroll，且该事件需要addEventListener()来绑定。
• 判断滚轮滚动方向：event.wheelDelta;//向上滚正数 向下滚负数。火狐用event.detail，且正负相反。

//网页元素加载完毕后响应事件
$(document).ready(function(){
	
})
//简化
$(function(){
	
})

• 事件的冒泡（Bubble）：事件的向上传导，当后代元素上的事件被触发时，其祖宗元素的相同事件也会被触发。大部分冒泡都是有用的。取消冒泡：通过事件对象。event.canclBubble=true;
• 事件的委派：将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。event.target表示触发事件的对象。
• 事件的绑定：使用对象.事件=function(){}的形式绑定响应函数只能绑定一个，绑定多个前边的会被覆盖。

4.操作DOM

• 节点、文本操作

$('#test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('123');//设置值
$('test-ul').html();//获得值
$('test-ul').html('<strong>123</strong>');//设置值

• CSS操作

$('#test-ul li[name=python]').css({"color","red"});

• 元素的显示和隐藏

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

11.正则表达式

1.使用字面量来创建正则表达式：

var 变量 = /正则表达式/匹配模式
var reg=/a/i;//i 忽略大小写。g 全局匹配模式。

2.检查一个字符串是否符合正则表达式的规则：

reg.test(str);

• [a-z]任意小写字母
• [A-Z]任意大写字母
• [A-z]任意字母
• [0-9]任意数字
• [^ ]指除了，如【^ab】指除ab以外的任意字符。

检查字符串中是否有a或b：

var reg=/a|b/;
var reg=/[ab]/;

查找任意字符：

/./
//使用\作为转义字符
var reg=/\\/ //表示查找符号\

• \w 字母、数字、下划线_

• \W 除了字母、数字、下划线_

• \d 任意的数字

• \D 除了数字

• \s 空格

• \S 除了空格

• \b 单词边界

  var reg=/\bchild\b/;//单词必须为child，children此类是不允许的
  

• \B 除了单词边界

3.根据正则表达式去拆分字符串：

var str=“1a2b3c”;
str.split(/[A-z]/)//结果是1,2,3

4.搜索字符串中是否含有指定内容

str.search("abc");//如果搜索到指定内容，则返回第一次出现的索引，若没有则返回-1
str.search(/a[be]c/);//搜索abc或aec
//根据正则表达式，将字符串中符合条件的内容提取出来，并封装在数组中返回
str.match(/[A-z]/);//默认情况下只会找到第一个符合要求的内容，找到后就停止检索
str.match(/[A-z]/g);//全局匹配模式

5.将字符串中指定内容替换成新内容

str.replace(被替换的内容，新内容);//默认只替换第一个，被替换内容接受正则表达式作为参数。
str.replace(/[a-z]/gi,"");//只留下字符串中的数字

6.设置正则表达式内容出现的次数

• {n}出现n次。
• {m,n}出现m-n区间内次。
• {m}出现m次以上。
• +相当于{1,},至少一个。
• *相当于{0,},0个或多个。
• ? 相当于{0,1},0个或1个。

量词只对它前边的一个内容起作用。如/a{3}/ 指aaa。

7.检查字符串的开头/结尾

/^a/ //检查一个字符串是否以a开头：^
/a$/ //检查一个字符串是否以a结尾：$

如果同时使用^ $，则要求字符串必须完全符合正则表达式。

8.电子邮件格式判断