Web前端入门——JavaScript基础总结

最新推荐文章于 2020-11-25 17:05:54 发布

喜只狼果冻

最新推荐文章于 2020-11-25 17:05:54 发布

阅读量523

点赞数

分类专栏：此恨绵绵无绝期

本文链接：https://blog.csdn.net/qq_36750352/article/details/88712739

版权

此恨绵绵无绝期专栏收录该内容

27 篇文章 0 订阅

订阅专栏

参考资料

http://www.lvyestudy.com/les_js/js_list.aspx

章节排序及内容以书籍为准

知识梳理：

1、基本语法

数据类型——选择与循环——函数——字符串——数组对象——时间对象——数学对象

2、dom

获取对象——操作元素——操作样式——DOM操作——遍历DOM

3、补充

事件——监听器——对话框

js引入：

标签

<script type="text/javascript">js代码</script>

外部

<script src="xx.js"></script>

第二十五章——语法基础

1、常量与变量

变量

由字母、下划线（_）或美元符号组成，且第一个字符不能是数字；

不能是系统关键字和保留字；

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：

Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

常量

常量名全部大写

2、数据类型

所有变量都用var声明，var可以省略

基本数据类型

（1）数字型（Number型）

（2）字符串型（String型）

（3）布尔型（Boolean型）

（4）空值（null型）

（5）未定义值（undefined型）

特殊数据类型

对象型（Object型）

3、运算符

（1）算术运算符：%、++、--；

（2）比较运算符：==；

（3）赋值运算符：*=，/=；

（4）逻辑运算符：&&；

（5）条件运算符：条件 ? 表达式1 : 表达式2;；

字符串型→数值型

parseInt("字符串")  //将字符串型转换为整型
parseFloat("字符串")  //将字符串型转换为浮点型

数值型→字符串型

任何变量与字符串相加，都会向字符串转型

变量.toString()

5、注释

//单行注释内容
/*多行注释内容*/

第二十六章——流程控制

if与if else

支持嵌套结构

while与for

{}不能省略

break与continue

跳出循环

switch

switch(表达式)
{
    case 取值1:
        语块1;break;
    case 取值2:
        语块3;break;
    ……
    case 取值n:
        语块n;break;
    default:
        语句块;
}

第二十七章——函数

1、定义

function 函数名(参数1,参数2,….,参数n)
{
    //函数体语句
    return 表达式;
}

2、调用

直接调用

表达式
事件
超链接调用

<a href="javascript:函数名"></a>

第二十八章——字符串对象

方法	描述
charAt()	返回在指定位置的字符。
concat()	连接字符串。
indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
replace()	替换匹配的字符串。
search()	检索匹配的值字符串，返回一个整数
split()	把字符串分割为字符串数组。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toString()	返回字符串。

第二十九章——数组对象

1、创建

var 数组名=new Array(n);

var 数组名=new Array(元素1,元素2,...元素n);

长度

数组名.length

2、数组方法

方法	说明
slice()	获取数组中的某段数组元素
unshift()	在数组开头添加元素
push()	在数组末尾添加元素
shift()	删除数组中第一个元素
pop()	删除数组最后一个元素
toString()	将数组转换为字符串
join()	将数组元素连接成字符串
concat()	多个数组连接为字符串
sort()	按照自定义规则，将数组元素进行排序
reverse()	将数组元素反向

排序sort()方法

function asc(a,b){
        //升序比较函数
        function asc(a,b)
        {
            return a-b;
        }
        //降序比较函数
        function des(a,b)
        {
            return b-a;
        }
        //创建数组的同时对元素赋值
        var arr=new Array(3,9,1,12,50,21);
        arr.sort(asc);
        arr.sort(des);
}

第三十章——时间对象

var 日期对象名 = new Date();

var 日期对象名 = new Date(日期字符串);
日期字符串可以是以下几种形式：
"2015-5-3"
"May 3,2015"
"2015/5/3"

用于获日期时间的getXxx
方法	说明
getFullYear()	返回一个表示年份的4位数字
getMonth()	返回值是0（一月）到11（十二月）之间的一个整数
getDate()	返回值是1~31之间的一个整数
getHours()	返回值是0~23之间的一个整数，来表示小时数
getMinutes()	返回值是0~59之间的一个整数，来表示分钟数
getSeconds()	返回值是0~59之间的一个整数，来表示秒数

用于设置日期时间的setXxx
方法	说明
setFullYear(year,month,day)	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日数
setHours(hour,min,sec,millisec)	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

表3 将日期时间转换为字符串的toXxx
方法	说明
toString()	将日期时间转换为普通字符串
toUTCString()	将日期时间转换为世界时间（UTC）格式的字符串
toLocaleString()	将日期时间转换为本地时间格式的字符串

日期对象.toString()

日期对象.toUTCString()

日期对象.toLocaleString()

获取星期

getUTCDay()获得整数

第三十一章——数学对象


方法	说明
ceil(x)	对数进行上舍入
floor(x)	对数进行下舍入
max(x,y)	返回x和y中的最大值
min(x,y)	返回x和y中的最小值
random()	返回0~1之间的随机数
round(x)	把数四舍五入为最接近的整数

Math.random()

第三十六章——windows对象

window对象方法
方法	说明
open()、close()	打开窗口、关闭窗口
setTimeout()、cleanTimeout()	设置或取消“一次性”执行的定时器
setInterval()、clearInterval()	设置或取消“重复性”执行的定时器

打开窗口

window.open(URL, target);

关闭当前窗口

window.close();
close();
this.close();

关闭子窗口

窗口名.close();

定时器

参数code可以是一段代码，也可以是一个调用的函数名；

var 变量名 = setTimeout(code , time);
var 变量名 = setInterval (code , time);

location对象

self.location.href="/url" 当前页面打开URL页面

alert()对话框

alert(变量+"HTML;\nCSS;\nJavaScript;\njQuery;\n")；

confirm()方法

confirm(message)

prompt()方法

输入并返回用户输入的字符串

var name = prompt("请输入你的名字");

第三十七章——document对象

document对象，即文档对象。顾名思义，用于操作HTML文档。包含了标题（document.title）、URL（document.URL）等属性

浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口的HTML文档生成一个document对象

document对象方法
方法	说明
document.write()	输入文本到当前打开的文档

document.write("输出的内容")

第三十二章——DOM基础

DOM，全称“Document Object Model（文档对象模型）”

获取的对象一般以o开头，表示这是一个DOM对象，document 通常是整个 DOM 树的根节点

1、节点

DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容（根节点、父节点、子节点、兄弟节点）

常见的节点：元素节点、属性节点、文本节点

只有元素节点才能拥有子节点

2、document对象获取元素

getElementById()

通过id选中元素

getElementsByName()

通过此方法来取得表单元素，因为一般元素没有name属性

getElementsByTagName()

通过标签名来获取多个元素，可以动态操作DOM

getElementsByClassName（）

通过类名class属性得到一个“类数组”

选择器

与css选择器写法完全一样
document.querySelector("选择器");
document.querySelectorAll("选择器");

3、创建节点

var e = document.createElement("元素名");       //创建元素节点
var t = document.createTextNode("文本内容");  //创建文本节点
e.appendChild(t);

操作属性

每一个节点都可以看做一个对象对它赋值

 var oIn = document.createElement("input");
        oIn.id = "submit";
        oIn.type = "button";
        oIn.value = "提交";
        document.body.appendChild(e);

4、插入节点

fObj.appendChild(obj)

将obj插入父节点内部的末尾

fObj.insertBefore(new,old)

将old插入父节点内部指定位置之前

5、删除节点

删除此节点内部的某个节点。

Obj.removeChild();

6、复制节点

Obj.cloneNode(bool)

（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；

（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

7、替换节点

替换当前节点内部的子节点

obj.replaceChild(new,old)

第三十三章——DOM进阶

1、HTML对象属性

obj是DOM对象，attr是属性名

获取

obj.attr

设置

obj.attr="值"

2、HTML对象方法

obj.getAttribute("attr")

与 obj.attr 等价

obj.setAttribute("attr","值")

与 obj.attr="值" 等价

obj.removeAttribute("attr")

也可以使用对象(元素节点).className=""

obj.hasAttribute("attr")

返回一个布尔值

3、css属性操作

attr属性名要转换成“驼峰式”的命名

获取

getComputedStyle(obj).attr
getComputedStyle(obj)["attr"]

设置

设置行内样式，为style属性设置值

obj.style.attr="值";
obj.style["attr"]="值";

多个css属性

语句遵循css写法

obj.style.cssText="语句"

4、css类名操作

obj.className = "值";
obj.setAttribute("class","值");

5、DOM遍历

obj.parentNode	获取当前节点的父节点

文本节点、属性节点、元素节点
属性	说明
childNodes	获取当前节点的子节点集合
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
previousSibling	获取当前节点的前一个兄弟节点
nextSibling	获取当前节点的后一个兄弟节点

元素节点
属性	说明
children	获取所有的元素节点
childElementNodes	获取当前节点的子节点集合
firstElementChild	获取当前节点的第一个子节点
lastElementChild	获取当前节点的最后一个子节点
previousElementSibling	获取当前节点的前一个兄弟节点
nextElementSibling	获取当前节点的后一个兄弟节点

6、innerHTML和innerText

obj.innerHTML=
"<span style='color:red;font-weight:bold;'>绿叶学习网</span>
 <span style='color:blue;font-weight:bold;'>JS入门教程</span>";

innerHTML和innerText属性返回值的区别
HTML代码	innerHTML返回值	innerText返回值
<div>绿叶学习网</div>	"绿叶学习网"	"绿叶学习网"
<div><b>绿叶学习网</b></div>	"<b>绿叶学习网</b>"	"绿叶学习网"
<div><b></b></div>	"<b></b>"	""（空字符串）

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记

innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容

第三十四章——事件处理器

不能为同一个元素添加多个相同事件

1、调用

在script标签中

var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
变量名.事件处理器 = function()
{
    ……
}

元素中调用

onclick="alert('绿叶学习网')"
onclick="alertMessage()"

2、鼠标事件

JavaScript鼠标事件
事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

3、键盘事件

JavaScript键盘事件
事件	说明
onkeydown	按下键事件（包括数字键、功能键）
onkeypress	按下键事件（只包含数字键）
onkeyup	放开键事件（包括数字键、功能键）

4、表单事件

JavaScript表单事件
事件	说明
onfocus	获取焦点时触发的事件
onblur	失去焦点时触发的事件
onselect	选中文本框时触发的事件
onchange	选项元素发生变化时

5、编辑事件

JavaScript编辑事件
事件	说明
oncopy	防止页面内容被复制
onselectstart	防止页面内容被选取
oncontextmenu	禁用鼠标右键

6、页面事件

JavaScript页面事件
事件	说明
onload	加载完成时
onbeforeunload	页面离开时

第三十五章——事件监听器

事件监听器可以为同一个事件添加多个相同事件

1、事件监听器

type是一个字符串，指事件类型

fn是一个函数名，或一个匿名函数

false表示冒泡阶段调用

绑定事件

obj.addEventLister(type，fn,false);

解绑事件

obj.removeEventLister(type，fn,false);

对于事件处理器可以使用“obj.事件名=null”来实现

2、event对象

每次调用一个事件的时候，js都会默认给事件函数添加一个隐藏的参数即event对象，一般是第一个传入

属性	描述
type	事件类型
keyCode	键码值
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。

3、this

哪个DOM对象调用了this所在的函数，那么this指向的就是哪个DOM对象

喜只狼果冻

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web前端入门——JavaScript基础总结

参考资料http://www.lvyestudy.com/les_js/js_list.aspx章节排序及内容以书籍为准知识梳理：1、基本语法数据类型——选择与循环——函数——字符串——数组对象——时间对象——数学对象2、dom获取对象——操作元素——操作样式——DOM操作——遍历DOM3、补充事件——监听器——对话框js引入：标签&...
复制链接

扫一扫