JavaScript 简单总结

前端阶段 JavaScript

♦掌握基本语法♦掌握对象获取♦掌握标签的基本操作
♦使用JS可以获得指定元素♦使用JS可以对元素的标签体进行操作
♦使用JS可以对指定元素的样式进行操作（获得或修改）
♦编写各种事件 ♦编写定时程序

一.了解JS

1.简介

​ JavaScript 不需要进行编译 ，直接浏览器解释执行。被设计用来向HTML页面添加交互行为，它能够让整个页面具有动态效果，是一种脚本语言。

2.组成部分

ECMAScript ： 核心(语法、变量、数据类型、语句、函数……)
DOM : 文档对象模型	包含操作文档的元素和内容
BOM : 浏览器对象模型	包含所有浏览器相关对象

3.JS的引入

(1)内嵌式引入：通过<script>标签
<script type=text/javascript">
	//此处为JavaScript代码
</script>

(2)外联式引入：
<script src="1.js" type="text/javascript" charset="utf-8"></script>

4.基本语法

(1)变量

1)命名：
	必须以字母或下划线开头，中间可以是数字、字符或下划线,变量名不能包含空格等符号,不能使用javaScript关键字作为变量名，严格区分大小写.每行结尾的分号可有可无(建议大家写上)

2)变量的声明：
	var 变量名；	//JavaScript变量可以不声明，直接使用，默认值：undefined
	
3)变量的赋值
	var 变量名 = 值；	//JavaScript变量是弱类型，即同一个变量可以存放不同类型的数据

(2)原始数据类型

Javascript数据类型分为 原始数据类型 和 引用数据类型；

原始数据类型： string、number、boolean、null、undefined

Undefined  Undefined类型只有一个值，即undefined。当声明的变量未初始化时， 该变量的默认值是undefined。

Null 只有一个专用值null，表示空，一个占位符。值undefined实际上是从值null 派生来的，因此ECMAScript把它们定义为相等的。

Boolean 有两个值 true 和 false

Number 表示任意数字

String 字符串由双引号（“”）或单引号(‘’)声明的

注意：alert(null == undefined); //输出"true"，尽管这两个值相等，但它们的含义不同。

(3)引用数据类型（内置对象）

JavaScript提供众多预定义引用类型（内置对象）：

Array Boolean Date Math Number String  ReqExp

	引用类型通常叫做类（class),也就是说，遇到引用值，所处理的就是对象。javaScript是基于对象而不是面向对象。对象类型的默认值是null.
	
Array 单个变量中存储多个值,长度可变
	创建Array对象的语法：
	new Array();
	new Array(size);
	new Array(element0,element1,....);
	
Boolean对象	对象创建：
	new Boolean(value);	//构造函数
	Boolean(value);	//转换函数
	
Date对象	getTime()方法  返回 1970 年 1 月 1 日至今的毫秒数。

Math和number对象  与java里面的基本一致。

String对象
	match()		找到一个或多个正则表达式的匹配。
	substr()	从起始索引号提取字符串中指定数目的字符。
	substring()	提取字符串中两个指定的索引号之间的字符。

RegExp对象	正则表达式对象
test  检索字符串中指定的值。返回 true 或 false。

(4)运算符

基本与Java相同

(5)基本操作

•	alert()： 向页面中弹出一个提示框！！
•	innerHTML ：向页面的某个元素中写一段内容，将原有的东西覆盖
•	document.write()： 向页面中写内容

(6)JS查找获得DOM元素 *

getElementById：根据指定元素的id属性返回元素
getElementsByName：返回所有指定name属性的元素
getElementsByTagName：返回所有指定标签的元素

HTML5新增的选择器，两种：
querySelector：根据选择器规则返回第一个符合要求的元素
querySelectorAll：根据选择器规则返回所有符合要求的元素

以下两个方法很重要，但是在手册中查不到！

创建文本节点：document.createTextNode()

创建元素节点：document.createElement()

(7)JS选择器*

1. 元素选择器
通过标签查询元素，等同于getElementsByTagName，语法如下：
document.querySelectorAll('a'); //获取页面上的所有a元素并返回元素

2. ID选择器
添加“#”语法如下：
document.querySelector('#id'); //等同于document.getElementById('id');

3. 样式类选择器
获取一个或一类元素，样式名字前使用“.”（英文句号）开头，语法如下：
document.querySelectorAll('.btn'); //获取所有样式类中包含btn类名的元素

4. 分组选择器
两种类型之间使用逗号隔开，语法如下：
document.querySelectorAll('a,p'); //获取页面上所有a元素和p元素，并通过一个列表返回
document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素

5. 属性选择器
获取页面上包含指定属性的元素，属性名称可以是元素原生属性和用户自定义属性，语法如下：
document.querySelectorAll('a[target="_blank"]'); //获取页面上所有target属性为_blank的a元素
document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素

6. 后代选择器
如div a可以理解为查找所有被div包围的所有a元素，语法如下：
document.querySelectorAll('div a'); //获取页面上所有被div包含的a元素
document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素

7. 子元素选择器
只会选择某个元素的一级子元素，子元素用“>”（大于号）表示，代码如下：document.querySelectorAll('html>div'); //只返回一个id为first的div元素

8. 兄弟选择器（比较少用）
选择紧接在另一个元素后的元素，而且两者有相同的父元素，相邻兄弟选择器使用“+”（加号），代码如下：
document.querySelectorAll('div+p'); //只返回一个id为p1的p元素

5.案例

​ ：验证用户名密码不为空,确认密码，验证邮箱格式

<form action="../index.html" onsubmit="return check()；">

<script type="text/javascript">
	function check(){
	//1用户名
		var loginName = document.getElementByld("loginnameld").value;
		if(loginName == ""){
		alert (”用户名不能为空”）;
        return false;
	}
	//2密码
		var loginpwd = document.getElementByld("loginpwdld").value;
		if (loginpwd ==""）{
		alert (”密码不能为空n);
        return false; 
	//3确认密码
		var reloginpwd = document.getElementByld("reloginpwdld").value; 
		if(reloginpwd != loginpwd){
		alert (”密码和确认密码不一致”）;
        return false;
	}
	//4邮箱
		var email = 
			document.getElementByld("emailId").value;
		if(! /A([0-9a-zA-Z_-])+@([0-9a-zA-Z_-]) + (\. [0-9a-zA-Z]+)$/.test(email) ) { 			 
        alert (”邮箱格式不正确”）;
		document • getElementByld (”email Id”）.focus () ;	//提示信息之后获得焦点
		return false;
		}
	return true;
	}
</script>

6.正则匹配的方式

*使用String对象中的match方法.
*使用正则对象中的test方法.

if(! /A([0-9a-zA-Z_-])+@([0-9a-zA-Z_-]) + (\. [0-9a-zA-Z]+)$/.test(email) ) { 			 
        alert (”邮箱格式不正确”）;

7.JS中的函数编写方式

<script type="text/javascript">
//方式1:声明函数 
function demo01() { 
	alert (”案例 1”）;
}
//方式2:声明匿名函数
var demo02 = function(){ 
	alert (”案例 2”）；
}；
</script>

二.BOM 对象(Browser Obj ect Mode)

Browser 对象
	Window
	Navigator 
	Screen 
	History 
	Location

1.定时器（window对象）

setlnterval :

window.setlnterval (code, millisec)按照指定的周期（间隔）来执行函数或代码片段。 
参数1:code必需。执行的函数名或执行的代码字符串。
参数2: millisec必须,时间间隔，单位：毫秒。
返回值：一个可以传递给window.clearlnterval()从而取消对code的周期性执行的值。 
例如：
*	 方式 1:函数名，	setlnterval (show , 100);
*	 方式 2:函数字符串，setlnterval ( "show () ”，100);

window对象提供都是全局函数，调用函数时window可以省略。
■	window.setlnterval()等效 setlnterval()

setTimeout:

setTimeout()	在指定的毫秒数后调用函数或执行代码片段。
	setTimeout(code,millisec)
		code必需，要调用的函数或要执行的代码字符串。
        millisec必需，在执行代码前需等待的毫秒数。
        
•	setlnterval()以指定周期执行函数或代码片段。（上一个案例己经讲解）
•	clearlnterval()取消由 setlnterval()设置的 timeout。
•	setTimeout()在指定的毫秒数后调用函数或执行代码片段。
•	clearTimeout()取消由setTimeout()方法设置的timeout。（本案例不使用，此处一并讲解）

2.消息框（window对象）

alert()	显示带有一段消息和一个确认按钮的警告框。

confirm()	显示带有一段消息以及确认按钮和取消按钮的确认框。

prompt()	确认框：确定返回true 取消返回false,显示可提示用户输入的提示框。 

3.例子：JS样式获得和修改

<div id="divId" style="height:10Opx;width:10Opx;margin:lOpx;padding:20px"></div>

<script type="text/javascript">
	//1获得div对象
	var divObj = document.getElementByld("divId");
	//2获得高度
	//* divOb j . style . height 数据为”100px”
	//*使用parselnt()，将字符串“lOOpx”转换成数字“100 ” 
	var height = window.parseInt(divObj.style.height);
	//3将原始高度翻倍，再设置给div。
	// *注意：必须添加单位，否则无效
	divObj.style.height = height * 2 + "px";
</script>

4.Location 对象 History 对象（了解）

Location只需了解href属性： 设置或返回完整的URL。

<script type="text/javascript"> 
	function change(){
	location.href = "http://www.itheima.com";
}
</script>

<input type= "button" value=”点我” onclick="change ()"/>

History 对象（了解）

1.go()方法：跳转到指定页面
	a) go(-l)  加载前一个连接，等效back()
	b) go(l)  加载后一个链接，等效forward()

2.back()	  加载history列表中的前一个URL.

3.forward()	加载history列表中的下一个URL.

三.DOM 对象

javascript的DOM操作 ：

Document:	整个html文件都称为一个document文档
Element:	所有的标签都是Element元素
Attribute：	标签里面的属性
Text：	标签中间夹着的内容为text文本
Node:	document、element、attribute、text统称为节点node.

1.Document对象

getElementById：根据指定元素的id属性返回元素
getElementsByName：返回所有指定name属性的元素
getElementsByTagName：返回所有指定标签的元素

HTML5新增的选择器，两种：
querySelector：根据选择器规则返回第一个符合要求的元素
querySelectorAll：根据选择器规则返回所有符合要求的元素

以下方法很重要，但是在手册中查不到！

​ 创建文本节点：document.createTextNode()

​ 创建元素节点：document.createElement()

​ appendChild() ？？

2.Element对象

我们所认知的html页面中所有的标签都是element元素；

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。

element.firstChild	返回元素的首个子节点。

element.getAttribute()	返回元素节点的指定属性值。

element.innerHTML	设置或返回元素的内容。

element.insertBefore()	在指定的已有的子节点之前插入新节点。

element.lastChild	返回元素的最后一个子元素。

element.setAttribute()	把指定属性设置或更改为指定值。

element.removeChild()	从元素中移除子节点。

element.replaceChild()	替换元素中的子节点。

3.Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute ;

attr.value  设置或返回属性的值

1.例子：设置和获取标签体内容：innerHTML

innerHTML - HTML元素的内部文本
获得：document.getElementByld ("divld").innerHTML
设置：document.getElementByld ("divld").innerHTML="xxx"

向整个页面写入内容：document.write(“xxx”);

获得焦点：

//获得焦点

function focus (objId) {
	//指定标签获得焦点
	document.getElementByld(objId).focus();
}

2.事件

事件名	描述
onload	某个页面或图像被完成加载
onsubmit	提交按钮被点击
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
cmmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动