2018-09-16

web 前端

15 分钟读完 (大约 2314 个字)

js 相关知识点总结

关于javascript:

简称js, javascript是嵌入html中在浏览器中运行的脚本语言, js跟java和c没有任何关系,只是语法相似,用来向html页面添加交互行为, 直接嵌入html页面, 由浏览器解释执行代码,不进行预编译

javascript特点:

可以用任何编辑文本的工具编写js代码
由浏览器内置的javascript引擎执行代码
解释执行:事先不编译,逐行执行
基于对象:内置大量的现成的对象
适宜:
客户端的数据计算
客户端的表单验证
浏览器的事件触发
网页特效制作
服务器的异步提交 ajax

js的注释:

1 2	单行 // 多行 /**/

注意：

js代码区分大小写,大小写敏感
所有js语句用分号结束
标识符的定义:可以包含字母,数字,下划线,$符号,就是不能用数字开头
命名的规范用骆驼(驼峰)命名法

数据类型

原始数据类型(基本数据类型)
1. number: 数字 (整数、小数、NaN)
2. string: 字符串。
3. boolean: true 和 false
4. null: 一个对象为空的占位符
  注：用 typeof() 得到的 null 的类型为 Object
5. undefined: 未定义
引用数据类型: 对象

运算符

在 js 中，如果运算数不是运算符所要求的类型，那么 js 引擎会自动的将运算数进行类型转换

其他类型转 number
1. string 转 number: 字面是数字，按照字面值转换。
  如果字面不是数字，则转为NaN(不是数字的数字类型)
2. boolean 转 number: true 转为 1, false 转为 0
  eg: true+true=2
其他类型转 boolean
1. number: 0 或 NaN 为假，其他为真
2. string: 除了空字符串(“”), 其他都是 true
3. null & undefined: 都是 false
4. 对象: 所有对象都是 true

比较运算符:

比较运算符的比较方式：

类型相同，则直接比较
- 对于字符串，按照字典顺序逐位进行比较，直到得出大小为止
类型不同，先进行类型转换，再进行比较
- === 表示全等于, 在比较之前，先判断类型，如果类型不一样，则直接返回 false

变量的定义使用关键字 var 和不使用 var

使用 var :定义的变量是局部变量
不使用 var :定义的变量是全局变量(即使在方法里面定义)

流程控制语句

在 js 中，switch 语句可以接受任意的原始数据类型
for in

JavaScript 对象

Function: 函数(方法)对象

创建：
1. var fun = new Function(形参列表，方法体);
  该方法了解即可
2. functioin 方法名称(形参列表){
  方法体
  }
3. var 方法名 = function(){
  方法体
  }
推荐后面两种方式
属性
length: 代表形参的个数
特点
1. 方法定义时，形参的类型不用写,返回值类型也不用写
2. 方法是一个对象，如果定义名称相同的方法，(后面定义的)会覆盖之前定义的方法
3. 在 js 中，当进行方法调用时，方法的调用只与方法的名称有关,和参数列表无关
4. 在方法声明中有一个隐藏的内置对象(数组), arguments, 封装所有的实际参数

调用
方法名称(实参);

/*求任意个数的和*/
function add(){
	var sum = 0;	
	for(var i=0;i<arguments.length;i++){
		sum += arguments[i];
	}
	return sum;
}

//调用
function getResult(){
	var sum = add(1,2,3);
	console.log(sum);
}

Array:
- 创建
  1. var arr = new Array(元素列表);
  2. var arr = new Array(默认长度);
  3. var arr = [元素列表];
- 常用方法
  1. join(参数): 将数组中的元素按照指定的分隔符拼接为字符串
  2. push() 向数组的末尾添加一个或更多元素，并返回新的长度
- 属性
  length: 数组的长度。
- 特点
  1. js 中，数组元素的类型是可变的
  2. js 中，数组的长度是可变的。

Date: 日期对象

创建
var date = new Date();

常用方法

toLocaleString(): 返回当前 date 对象对应的时间本地字符串格式

getTime(): 获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

function demo(){
	var date = new Date();
	document.write(date+"<br>");
	document.write(date.toLocaleTimeString()+"<br>");
	document.write(date.toLocaleDateString()+"<br>");
	document.write(date.getTime()+"<br>");
	document.write(date.getDay()+"<br>");
	document.write(date.toString()+"<br>");

}

Math: 数学
- 创建
  Math 对象不用创建，直接使用。Math.方法名();
- 常用方法
  1. random(): 返回0~1之间的随机数。含0不含1
- 属性
  PI
RegExp: 正则表达式对象
- 正则表达式: 定义字符串的组成规则
  1. 一些特殊含义的单个字符
    - \d: 单个数字
    - \w: 单个字符
    - 其他
  2. 相关量词符号
    - {m,n}: 表示 m<= 数量 <= n
      - m 如果缺省:{,n}: 表示最多 n 次
      - n 如果缺省:{m,}: 表示最少 m 次
    - 开始和结束
      - ^: 开始
      - $: 结束
    - 其他
- 正则对象
  - 创建
    1. var reg = new RegExp(“正则表达式”);
    2. var reg = /正则表达式/;
      注意在//之间不加引号
  - 方法
    1. test(参数): 验证指定的字符串是否符合正则定义的规范
Global:
- 全局对象, Global 中封装的方法不需要对象就可以直接调用。
- 常用方法:
  - encodeURI(): url 编码
  - decodeURI(): url 解码
  - parseInt(): 将字符串转为数字
  - isNaN(): 判断一个值是不是NaN, NaN参与的==比较全为 false
  - eval(): eval函数用于计算表达式字符串,或者用于执行字符串中js代码

BOM

BOM对象 browser object model浏览器对象模型,用来访问跟浏览器窗口有关的对象
在BOM对象有很多的对象,每个对象还有很多属性和方法, 通过这些方法和属性,移动窗口,更改状态栏文本
和其他跟窗口操作相关的.

window对象:
- window表示浏览器窗口
  是所有javascript全局对象,如果不写window,默认从window访问起
window常用的属性:
- document:在窗口中显示文档树.
- history:浏览器的窗口的后退和前进
- location:窗口文件地址对象.
  window.location.href=”login.html”;
- screen:当前屏幕对象
- navigator:浏览器的相关信息
window对象常用的方法:
- alert();弹出式窗口,模态框(当前窗口不关闭,无法操作后面的窗口)
- confirm();模态框,确认窗口
- setTimeOut() setInterval() 周期性函数
- clearTimeOut() clearInterval();

DOM

DOM 功能：控制 html 文档的内容
document下的相关对象

DOM对象: Document Object model文档对象模型,用来操作文档
将标记语言文档的各个组成部分,封装为对象. 可以使用这些对象,对标记语言文档进行 CRUD 的动态操作
定义了访问和操作html文档的标准方法
应用程序通过对dom树的操作,来实现和html的交互

DOM 编程:

用 js 做 dom 编程的目的，就是为让 html 页面中的内容局部改变

核心 DOM 模型
- Document: 文档对象
  - 创建
    - window.document
    - document
  - 方法
    1. 获取Element对象
      - getElementById()
    2. 创建其他DOM对象
      - createElement()
- Element: 元素对象
  - 获取/创建
  - 方法
    1. removeAttribute(): 删除属性
    2. setAttribute(): 设置属性
- Node :节点对象
  - 所有dom对象都可以被认为是一个节点
查询:
- 通过id查询
- 通过name查询
- 通过标签名查询
- 通过表单名查询
1. 根据id查询
  document.getElementById(“id名”);
  通过id查询返回元素节点,
  在整个html文档中搜索id
  只找到第一个id,返回元素
  如果id错误,返回null
2. 根据层次查询节点:
  -parentNode
  遵循文档的上下文层次结构,查找单个父节点
  比如:
  1
  2
  3
  4
  5
  6
  7
  8
  9
  <table id="tblid">
  <tr>
  <td id="tdid"></td>
  <td></td>
  </tr>
  </table>
  var td_ele=document.getElementById("tdid");
  var tr_ele=td_ele.parentNode;
  var table_ele=td_ele.parentNode.parentNode;
  -childNodes
  遵循文档的上下文层次结构,查找多个子节点
  比如:上面的例子
  var td_ele=document.getElementById(“tdid”);
  //获取当前td对象的所有兄弟
  var tds_ele=td_ele.parentNode.childNodes;
  //获取当前td的父亲,和所有叔叔节点
  var trs_ele=td_ele.parentNode.parentNode.childNodes;
3. 根据标签名查询节点:
  getElementsByTagName(“标签名”);
  从当前对象往下寻找符合标签名的所有元素对象
  返回结果是一个数组
  标签名错误,返回长度为0,
  比如:
  1
  2
  3
  4
  5
  6
  7
  8
  <table id="tblid">
  <tr>
  <td id="tdid"></td>
  <td></td>
  </tr>
  </table>
  var table_ele=document.getElementById("tblid");
  var trs_ele=table_ele.getElementsByTagName("tr");
4. 根据name属性查询节点
  document.getElementsByName(“元素的name属性值”);
  注意:不是所有的元素节点都有name属性
5. 根据document.表单名字.表单控间名
  docuemnt.forms[数字].表单控件名

创建元素节点:
document.createElement(元素节点名);
返回结果是创建的节点对象
创建文本节点:
document.createTextNode(“文本信息”);
返回结果是一个文本节点对象
添加新节点:
parentNode.appendChild(newNode);
追加newNode节点到父节点的所有子节点的最后.

parentNode.insertBefore(newNode,refNode);
把newNode插入到refNode的前面
newNode和refNode是兄弟关系
删除节点:
node.removeChild(childNode)
删除node节点下的childNode的节点对象

定位节点:
parentNode.firstChild;第一个子节点
parentNode.lastChild;最后一个子节点

自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script language="javascript" type="text/javascript">
		/*直接创建对象*/
		function testObject(){
			var personObj = new Object();
			//添加属性
			personObj.name = "张三";
			personObj.age = 30;

			//添加方法
			personObj.say=function(){
				alert("hello  "+this.name+" "+this.age);
			}
			//使用新添加的属性和方法
			personObj.say();
			alert(personObj.name+"  "+personObj.age);
		}
		/*构造函数创建对象*/
		function Person(n,a,ad){
			//定义 name 和 age 属性
			this.name = n;
			this.age = a;
			this.address = ad;
			//定义方法, 且直接给方法体
			this.showInfo=function(){
				alert(this.name+" "+this.age+" "+this.address);
			}
			//定义方法, 且间接给方法体
			this.showAddress=introAddress;
		}
		function introAddress(){
			alert(this.address);
		}
		function testObject1(){
			var p = new Person("李四",26,"北京");
			alert(p.name+" "+p.age+" "+p.address);
			p.showInfo();
			p.showAddress();
		}
		/*用json创建对象*/
		function testObject2(){
			var jsonObj = {"name":"王五","age":30,"address":"兰州"};
			alert(jsonObj.name+" "+jsonObj.age+" "+jsonObj.address);
		}
	</script>
</head>
<body>
	<div onclick="testObject();">直接创建对象的演示</div>
	<div onclick="testObject1();">用构造函数创建对象的演示</div>
	<div onclick="testObject2();">用json创建对象的演示</div>
</body>
</html>

事件

踩过的坑

把JS代码写在head标签里面
“Uncaught TypeError: Cannot set property ‘onclick’ of null”
节点需要先加载完才能执行onclick事件。

# JS, Java