JavaScript知识总结!!(总结概括看这篇)

JavaScript:简称JS,基于原型编程,多范式的动态脚本语言,支持面向对象,命令式和声明式风格. (JS区分大小写!!)

功能:

1.嵌入动态文本于HTML页面
2.对浏览器事件做出响应
3.读写HTML元素
4.在数据被提交到服务器前验证证据(例:注册时提示账号密码不能包含特殊字符等)
5.检测访客的浏览器信息,控制cookies,包括创建和修改等
6.基于java技术进行服务器端编程

要点概括:

1.放在script标签内,script标签放在head中或body中.
2.也可link标签导入(类似css做法)
3.一个页面可以用多个script标签
4.js注释与java中一样
5.各输出语句:

• 1.window.alert() 弹出警告框
• 2.document.write() 将内容写到html中(写html内容后面执行会覆盖原有html页面)
• 3.console.log() 写入内容到浏览器控制台
• 4.window.confirm() 弹出带有判断的弹出框(选确定返回true,选取消返回false)
• 5.window.prompt() 输出可以输入的提示框(选确定返回输入值,选取消返回null)*

6.js为弱类型语言,变量无具体数据类型

• var全局变量
• let局部变量*

7.js简单数据(用typeof返回值输出值的类型)

• 1.undefined 只声明未赋值,
• 2.null 空
• 3.boolean 布尔值
• 4.number 数值
• 5.string 字符串
• 6.object 对象

8.js代码只体现一种形式–function(类似函数,方法等作用)

9.数据类型转换:

• 1.其他转String
  一.toString()方法,null和undefined不可用
  二.String(被转换数据名)方法,所有都可用
• 2.其他转Number
  一.Number(被转换数据名)方法
  – 1.字符串转数字:
  ---- (1)纯数字字符串,直接转为对应数字
  ---- (2)有非数字内容,转换为NaN
  ---- (3)空串或全是空格,转为0
  – 2.布尔值转数字:
  ---- true转1,false转0
  –3.null转数字:
  ---- 输出结果为0
  –4.undefined转数字:
  ---- NaN
  二.parseInt(被转换数据名)和parseFloat(被转换数据名)
  ---- [对非String使用会先将其转换为String]
  –1.parseInt()将一个字符串中有效数字(从头开始到非数字)内容取出转换为一个整数
  –2.parseFloat()/parseInt()将一个字符串中有效小数(从头开始到非数字)内容取出转换为一个浮点数
• 3.其他转Boolean
  用Boolean(被转换数据名)方法
  –1.数字转布尔值:
  除了0与NaN,其余都是true
  –2.字符串转布尔值:
  除了空串,其余都是true
  –3.null和undefined转布尔值
  一律为false
  –4.object转布尔值
  一律为true

10.选择器
(通过id查找得到的是一个元素,通过类,标签,name属性查找得到的是一个数组,使用内容需要遍历)

• 1.document.getElementsById() 通过id来查找元素
• 2.document.getElementsByTagName()通过标签名查找元素
• 3.document.getElementsByClassName()通过类名查找元素
• 4.document.getElementsByname 通过指定name值查找元素
  (若修改对象为html已有元素[非新建],需先获取元素对象:
  例: var a=document.getElementsById(“a”); )

11.修改元素内容

• 1.修改内容: 被修改元素对象.innerHTML=修改目标内容
• 2.填充内容: 被填充元素对象.value=填充目标内容

12.修改元素样式
格式: 被修改元素对象.style.修改样式类型=修改目标样式
例: a.style.color=“green”;
a.style.backgroundColor=“red”;
13.修改元素属性
1.添加元素属性: 被修改元素对象.setAttribute(“属性名”,“属性值”)
2.移除元素属性: 被修改元素对象.removeAttribute(“属性名”)
3.获取元素属性: 被修改元素对象.getAttribute(“属性名”)

14.添加/删除元素
父子节点概念:
例:

    <div>
		<p1>段落一</p1>
		<p2>段落二</p2>
	</div>

此时<p1><P2>为<div>的子节点,<div>为<p1><p2>的父节点

节点分为三类:
(1)元素节点
(2)属性节点
(3)文本节点

1.获取节点:
	(1)获取父节点:    .parentNode
	(2)获取子节点:    .childNodes返回所有子节点(区分 .children只返回子元素节点)
	(3)
2.创建节点:
	document.create节点类型
	例: document.createElement  创建标签节点
	     document.createTextNode  创建文本节点

3.操作节点:
	(1)添加节点   父节点.apppendChild(待添加节点)
	(2)删除节点   父节点.removeChild(待删除节点)
	(3)修改节点   父节点.replaceChild(被修改节点,待替换节点)

15.JS事件
JS可以在元素中绑定相关触发事件以达成特殊显示目的
JS这种三种常用绑定事件的方法:
1.直接在DOM元素(HTML各元素标签)中直接绑定
例: <button onclick=go()>按钮1<button>
ps:当然,所用到的出发函数需要写明(在script里写function go(){出发事件内容})
或者:<button onclick="javascript:{触发事件内容}">按钮1</button>
2.在js代码中绑定
例:

  <button id="a">按钮一<button>
		<script>
			var a = document.getElementById("a");
			a.οnclick=function(){
					触发事件
				}

	</script>
3.用addEventListener()或attachEvent()来绑定事件监听函数(不常用)