JS基础学习之路

最新推荐文章于 2023-03-28 11:04:12 发布

欧业

最新推荐文章于 2023-03-28 11:04:12 发布

阅读量776

点赞数

分类专栏：前端之路文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50877746/article/details/120120697

版权

前端之路专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

JS学习之路

JS学习之路

我这里只列举一下重要且常用的js语法

基础小知识

字符串和数字的相互转换

字符串 => 数字

Number(str)
parseInt 和 parseFloat 函数，用于提取首字母为数字的任意字符串
- parseInt 只能提取整数部分
- parseFloat 既可以提取整数也可以提取小数

数字 => 字符串

与空字符串相加
.toString()函数

转义字符在字符串中的作用

我们想要写这样一段话，并使其呈现出来。alert("我真是一个"君子"啊")这时会出错，因为浏览器并不知道哪两个引号配对。解决方法：我们可以在双引号处加一个转义字符,alert("我真是一个\"君子\"啊")

换行符

在document.write("")中的语句换行，我们只需要用html自带的换行符<br>即可
在alert("")语句中换行，我们使用\n来进行换行

JS函数

格式

function f(params){
	······
}

在超链接中调用函数

其他自己触发函数，或用onclick，onchange事件来调用函数这里就不多说了。我们这里看看怎么在超链接中调用函数。

<a href="javascript:f()"></a>

eval()函数

eval函数把字符串当成表达式来执行

内置对象

js的内置对象分为这四种，分别是

字符串对象：String
数组对象：Array
日期对象：Date
数值对象：Math

下面我们就来一一展开论述

字符串对象

获取字符串的长度

字符串的长度用str.length来表示

字符串转换大小写

str.tolowerCase()将字符串转换为小写
str.toupperCase()将字符串转换为大写

获取字符串中的某一个字符

str.charAt(index)，这里的index是索引值

截取字符串

str.substring(start,end)来截取或者说是生成一个子字符串，注意这里能取到start,不能取到end。如果只传入start一个参数，那么字符串的截取就从start开始一直截取到结尾

替换字符串

str.replace(原字符串,替换字符串)
str.replace(正则，替换字符串)

分割字符串

str.split('分割符') => 字符串形成数组

检索字符串的位置

str.indexOf(指定字符串) => 查找该字符串的首次位置
str.lastIndexOf(指定字符串) => 查找该字符串的最后出现的位置
如果该字符串不包含指定的字符串，那么就会返回-1
当然这里还有match(),search()函数，但基于他们的作用相同，我们就不在这里多说

数组对象

创建数组

var 数组名 = new Array(1,2,....,n)
var 数组名 = [1,2,3,... ] —— 简写形式

数组的长度

数组的长度可以用 arr.length

截取数组的部分内容

arr.slice(start,end)和字符串的split函数类似，都是截取到end（不包含end）

添加数组元素

数组开头添加元素 arr.unshift()
数组结尾添加元素 arr.push()

删除数组元素

arr.shift() 删除数组的第一个元素
arr.pop() 删除数组的最后一个元素

排序数组

arr.sort(f) 这里的 f 是一个函数

f(a,b){return a-b}代表的是升序函数
f(a,b){return b-a}代表的是降序函数

颠倒数组排序

arr.reserve()

数组元素连成字符串

arr.join('连接符')

时间对象

var 日期对象名 = new Date()
时间对象里大致分为两类函数，一个是get函数，一个是set函数。这里不需要死记硬背，用到时查询即可

获取年，月，日

getFullYear()	获取年份，取值为4的值
getMonth()	获取月份，取值为0到11的值
getDate()	获取日数

注意：我们获取月份时需要 getMonth()+1

设置年，月，日

下面的函数，第一个参数都是必选参数，其中month的取值为0到11

时间对象.setFullYear(year,month,day)
时间对象.setMonth(month,day)
时间对象.setDate(day)

获取时、分、秒

时间对象.getHours()
时间对象.getMinutes()
时间对象.getSeconds()

设置时、分、秒

下面的函数，第一个参数都是必选参数, millisec指的是毫秒,范围是0~999

时间对象.setHours(hour,min,sec,millisec)
时间对象.setMinutes(min,sec,millisec)
时间对象.setSeconds(sec,millisec)

获取星期几

语法: 时间对象.getDay();
说明：getDay()会返回一个数字，其中0表示星期日，1表示星期一…

数学对象

这里属性和方法，只需用Math.来调用即可

数学属性

属性	对应的数学形式
PI	$\pi$
LN2	ln(2)
LN10	ln(10)
LOG2E	$log_2$ e
LOG10E	$log_{10}$ e
SORT2	$\sqrt{2}$
SORT1_2	$\displaystyle\frac{1}{\sqrt{2}}$

用得比较多的是PI，在实际开发中，所有的角度都是以弧度为单位，转化为度数的公式为度数*Math.PI/180

数学方法

方法	说明
max(a,b,…,n)	返回最大值
min(a,b,…,n)	返回最小值
sin(x)	正弦
cos(x)	余弦
tan(x)	正切
asin(x)	反正弦
acos(x)	反余弦
atan(x)	反正切
ceil(x)	向上取整
floor()	向下取整
random()	生成随机数
abs(x)	返回x的绝对值
sqrt(x)	返回x的平方根
log(x)	返回自然对数
pow(x,y)	返回x的y次幂
exp(x)	返回e的指数

DOM基础

获取Dom元素

getElementById()

语法：document.getElementById('id名')
通过id来选中单个元素,返回的是一个元素节点，如<div>你好呀</div>

getElementsByTagName()

语法：document.getElementsByTagName('标签名')
返回值是一个伪数组，通过下标来获取单个元素，还能获取数组的长度

getElementsByClassName()

语法：document.getElementsByClassName(’类名‘)
返回值和getElementsByTagName一样，返回一个伪数组

querySelector()和querySelectorAll()

这两个函数使得我们可以使用CSS选择器的语法来获取相应的元素
语法：

document.querySelector('选择器')
document.querySelectorAll('选择器')

querySelector()表示选取满足条件的第一个元素，返回的是一个元素节点
querySelectorAll()放回的是所有满足条件的元素节点的伪数组

getElementsByName()

对于表单元素，它有name属性。想要通过name属性来获取表单元素，我们可以通过getElementsByName()。也就是说 getElementsByName()用于表单元素，一般只用于单选按钮和复选框
语法: document.getElementsByName('name名')
该函数获取的也是类数组。

document.title和document.body

我们可以通过document.title和document.body来获取标题和body元素

创建元素

创建元素节点，createElement()
创建文本节点，createTextNode()

这种方式又被称为“动态DOM操作”，即用js创建的元素
语法：

var el = document.createElement('元素名');
var txt = document.createTextNode('文本内容');
el.appendChild(txt);\\将文本节点插入元素节点中
e2.appendChild(el);\\把组装好的元素插入已存在的元素中

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
	var o = document.querySelector("#list li:nth-child(2)");
	var a = document.createElement('strong');
	var b = document.createTextNode('b');
	a.appendChild(b);
	o.appendChild(a);
}
</script>
</head>
<body>
	<ul id="list">
		<li>a</li>
		<li></li>
		<li>c</li>
		<li>d</li>
	</ul>
</body>
</html>

这里值得注意的一点是：在动态操作DOM时，设置class用的是className而不是class，因为class已经作为保留字了，所以用className

插入元素

将创建好的元素插入已经存在的元素中。

appendChild()
语法：A.appendChild(B)
A是父元素，B是子元素，B将插入A的末尾

insertBefore()
语法：A.insertBefore(B,ref)
说明：A是父元素，B是子元素，ref表示指定子元素，A.insertBefore(B,ref)则表示在ref之后插入B。ref可以通过list.childNodes[num]来指定哪一个节点，或着用firstElementChild,lastElementChild
例子（接近todoList）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function f(){
	var a  = document.getElementById("list");
	var b = document.getElementById("txt");
	var text = document.createTextNode(b.value);
	var oLi = document.createElement('li');
	oLi.appendChild(text);
	a.insertBefore(oLi,a.firstElementChild);
}
</script>
</head>
<body>
	<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<input id="txt" type="text"/>
	<input id="btn" type="button" value="插入" onclick="f()"/>
</body>
</html>

删除元素

语法：A.removeChild(B)
说明：A表示父元素，B表示父元素内部的某个子元素
应用：我们可以用removeChild()来删除父元素下的某个子元素

删除第一个元素 A.removeChild(A.firstElementChild)
删除最后一个元素 A.removeChild(A.lastElementChild)
想要删除第二个或者任意一个元素，我们需要使用DOM遍历来实现
想要删除所有的子元素，我们直接A.removeChild()

复制元素

语法：obj.cloneNode(bool)
说明：参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下

1或true：表示复制元素本身以及复制该元素的所有子元素
0 或false：表示仅仅复制元素本身，不复制该元素下的子元素

替换元素

语法： A.replaceChild(new,old)
说明：A表示父元素，new表示新的元素，old表示旧的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function(){
		var oFirst = document.querySelector("body *:first-child");
		
		var oTag = document.getElementById("tag"); 
		var oTxt = document.getElementById("txt");
		
		var newTag = document.createElement(oTag.value);
		var newTxt = document.createTextNode(oTxt.value);
		newTag.appendChild(newTxt);
		
		document.body.replaceChild(newTag,oFirst);
	}
}
</script>
</head>
<body>

<p>JS</p>
<hr/>
输入标签：<input id="tag" type="text"/><br>
输入内容: <input id="txt" type="text"><br>
<br>
<input id="btn" type="button" value="替换">

</body>
</html>

DOM进阶

获取HTML属性值

语法：obj.attr
说明：attr 是属性名，通过点运算符来(.)获取它的属性值

设置HTML属性值

语法：obj.attr = "值"

HTML属性操作（对象方法）

getAttribute()

语法：obj.getAttribute("attr")
说明：用这个函数来获取某个元素某个属性的值，和obj.attr是等价的。记得不要漏掉引号
优点：可以获取对象的自定义属性，如<button data="a"></button>中的data，而obj.attr获取不了，会显示undefined

setAttribute()

语法：obj.setAttribute("attr","值")
等效于 obj.attr = “值”
优点：可以修改用户自定义属性

removeAttribute

语法： obj.removeAtrr("attr")
说明：用这个函数来删除元素的某个属性

CSS属性操作

获取CSS属性值

语法：getComputedStyle(obj).attr
说明：这里的attr表示的是CSS的属性名，这里的属性名使用的是“骆驼峰形”的- CSS属性，如font-size应该写为fontSize
另外一种写法：getComputed(oBox)[“backgroundColor”]
PS: 实际上，凡是对象都有这两种写法，如oBtn.id 可以写成 oBtn[“id”],即点符号.可以用数组的索引来表示

设置CSS属性值

想要设置一个CSS的值，有两种方法可以实现

style对象
cssText 属性

style对象

语法：obj.style.attr = "值"
说明：attr指的是css属性名

cssText属性

在js中我们使用cssText属性来同时设置多个CSS属性
语法：obj.style.cssText = "值"
说明：obj表示DOM对象，cssText的值是一个字符串，例如

oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray"

说明：但是往往我们更倾向于给元素添加一个class属性值，从而给元素添加样式

DOM遍历

DOM遍历可以简单理解为查找元素，以当前所选元素为基点，大致分为几种

查找父元素
查找子元素
查找兄弟元素

查找父元素

js中我们可以使用parentNode属性来获得某个元素的父元素
语法：obj.parentNode
说明：这里返回的是父元素的对象
例子：

 var oParent = this.parentNode;
 oParent.style.color = "white"
 oParent.style.backgroundColor = "red";

查找子元素

在JS中，我们可以使用以下两组方式来获得父元素中所有子元素或某个子元素

obj.childNodes,obj.firstChild,obj.lastChild
obj.children,obj.firstElementChild,obj.lastElementChild

其中，childNodes获取的是所有的子节点，包括元素节点和文本节点
而children获取的是所有的元素节点，不包括文本节点.

PS: 这里要注意的一点是childNodes获取的文本节点中，换行符也属于文本节点。
然后文本节点的nodeType为3，元素节点的nodeType为1

为了避免文本节点的干扰，我们还是比较推荐使用第二种的写法

查找兄弟元素

我们使用一下两种方式来获得兄弟元素

obj.previousSibling,obj.nextSibling
obj.previousElementSibling,obj.nextElementSibling

顾名思义，前者是寻找上一个兄弟元素，后者是寻找下一个兄弟元素。当前者找出来是文本节点或者元素节点，后者只能找出元素节点，所以更建议使用第二种方式。

innerHTML和innerText

上面创建动态DOM元素，不太适用于插入复杂的元素

使用innerHTML来获取或者设置一个元素的内部元素
使用innerText属性获取和设置一个元素的内部文本

在书写innerHTML的时候，其后面的字符串可以通过在每行加上一个反斜杠（\）就可以达到换行的效果。

事件基础

js常见的事件共有一下5种：

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

事件调用方式

在script标签中调用

语法：

obj.事件名 = function(){
	.....
};

这相当于给元素添加了一个事件属性

在元素中调用元素

给元素设置onclick，onchange这些元素添加事件

鼠标事件

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

键盘事件

键盘按下：onkeydown
键盘松开：onkeyupnnnn

表单事件

onfocus和onblur

onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反的操作。
具有获取焦点和失去焦点的特性的元素只有两种：

表单元素（单选框，复选框，单行文本框，多行文本框，下拉列表）
超链接
在实际开发中，onfocus和onblur一般用于单行文本框和多行文本框里。

另外obj.focus()函数可以使文本框获得焦点

onselect

当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件
select()函数可以实现全选文本。

onchange

js事件中，onchange事件常用于“具有多个选项的表单元素”的操作

单选框选择某一项时触发
复选框选择某一项时触发
下拉列表选择某一项时触发

编辑事件

oncopy
onselectstart
oncontextmenu

oncopy

js中我们可以使用oncopy事件来防止页面内容被复制
语法：

document.body.oncopy = function(){
	return false;
}

onselectstart

js中，使用onselectstart事件来防止页面内容被选取
语法：

document.body.onselectstart = function(){
	return false;
}

oncontextmenu

js中，我们可以使用oncontextmenu事件来禁止使用鼠标右键
语法：

document.oncontextmenu = function(){
	return false;
}

页面事件

onload
onbeforeunload

onload

js中onload表示文档加载完成后再执行的一个事件
语法：

window.onload = function(){}

浏览器从上到下解析语句，解析到window.onload时，会先跳过window.onload而继续往下解析，直到解析完HTML文档才回去执行这个window.onload里的语句

onbeforeunload

js中，onbeforeunload表示离开页面之前触发的一个事件。
语法：

window.onbeforeunload = function(){}

事件进阶

要给元素添加一个事件，我们可以采用下面两种方式

事件处理器
事件监听器
事件处理器不能为一个元素添加多个相同的元素，具有一定的局限性，这时候需要用到事件的方式——事件监听器

事件监听器

绑定事件

语法：

obj.addEventListener(type,fn,false);

说明：

obj是一个DOM对象，即一个元素节点；
type是一个字符串，指的是事件类型，如单击事件用click，鼠标移入事件用mouseover等。这里的事件前面都不需要加上on
fn 是一个函数名，或者是一个匿名函数
false表示冒泡阶段调用，可写可不写

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

解绑事件

语法：obj.removeEventListener(type,fn,false)
这里注意的是fn必须是一个函数名，而不能是一个函数
实际上，removeEventListen()只能解除“事件监听器”添加的事件，不能解除“事件处理器”添加的事件，如果要解除“事件处理器”添加的事件，我们可以使用obj.事件名=null

event对象

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下【Shift】键
ctrlKey	是否按下【Ctrl】键
altKey	是否按下【Alt】键

这里注意一下this,一般来说，哪个DOM对象调用了this所在的函数，那么this指向就是哪个DOM元素

window对象

在这里插入图片描述

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigation	浏览器对象，用于获取浏览器的版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

window 常用方法

方法	说明
alert()	提示对话框
confirm()	判断对话框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

窗口操作

打开窗口

语法：window.open(url,target)
说明：window.open可以简写为open()。open()函数的参数有很多，但url和target是可以用得上的。

url指的是新窗口的地址，如果url为空就会打开一个空白窗口。
target表示的是打开方式，常用的取值有两个—— _blank, _self。当target为“ _blank(默认值)时”，表示在新窗口中打开；当target为"_self"表示在当前窗口打开。

这个函数返回的是一个新窗口的window对象。如果打开的是同一个域名下的域名下的页面或空白窗口，就可以像上面那样操作新窗口的元素或样式；但是如果打开的是另一个域名下的域名，涉及的跨域问题，是不允许操作新窗口的内容的

关闭窗口

语法：window.close()

对话框

alert()

alert()一般只用于提示文字。在alert()实现文本换行用的是\n

confirm()

confirm()对话框不仅提示文字，还提供确认。
语法：confirm("提示文字")
说明：如果用户点击【确定】，confirm会返回true；如果用户点击【取消】按钮，则会返回false

prompt()

prompt()对话框不仅会提示文字，还会返回一个字符串
语法: prompt('提示文字')
例子：

 oBtn.onclick = function(){
            var name = prompt("请输入你的名字");
            document.write("欢迎来到这里，<strong>"+name+"</strong>")
    }

定时器

setTimeout()和clearTimeout()

setTimeout()是一次性的定时器，而clearTimeout()可以取消setTimeout（）
语法：setTimeout(code,time)
说明：参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
time是时间，单位是毫秒，即过多长时间才执行code的代码
三种写法
- setTimeout(function(){...},2000)
- setTimeout(alertMes,2000)
- setTimeout(alertMes(),2000)

setInterval() 和 clearInterval()

如果我们使用setInterval()来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval(),其他用法和上面相同

location 对象

对于location对象，我们只需要掌握3个属性即可

属性	说明
href	当前页面地址
search	当前页面地址“?”后面的内容
hash	当前页面地址“#”后面的内容

window.location.href

通过window.location.href我们可以获取或者设置当前页面的地址，就可以实现跳转的功能

window.location.search

语法：window.location.search
通过这个我们可以获取或设置到地址中"?"后面的内容，即querystring，一般用于数据库的查询

window.location.hash

我们可以通过location对象的hash属性来获取和设置当前页面’#‘后面的内容，即为描点链接

navigator对象

我们通过这个对象来获取浏览器的类型
语法：window.navigator.userAgent

document对象

document对象属性

下面列出常见的几种

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.forms	获取所有form元素
document.iamges	获取所有的img元素
document.links	获取所有的a元素
document.cookie	获取文档的coolie
document.URL	当前文档的URL
document.referrer	返回使浏览器到达当前文档的URL