JavaScript知识点概览

最新推荐文章于 2024-06-03 09:20:03 发布

zeker.xu

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量289

点赞数

分类专栏：前端 - 后端须知文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44501876/article/details/108288192

版权

前端 - 后端须知专栏收录该内容

1 篇文章 0 订阅

订阅专栏

知识点

JavaScript中，每一条语句以分号结尾。

打印

document.write( );

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var a = 10;
		document.write(a);    //页面输出“10”
	</script>
</head>
<body>

</body>
</html>

数据类型

基本数据类型：数字、字符串、布尔值、未定义值、空值。（单引号括起来的字符串只能含有双引号，同理，双引号只能含有单引号。）
引用数据类型：数组、对象。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var a = 10;      //布尔值
		var b = 20;
		if(a<b)
		{
			document.write("a小于b"+'<br/>');
		}

		var n;           //未定义值
		document.write(n);   //页面输出“undefined”
	</script>
</head>
<body>
</body>
</html>

运算符

与运算：&& 。有假则假。
或运算：|| 。有真则真。
非运算：! 。直接取反。
条件运算符：三目运算符。条件?表达式1(true):表达式2(false);

类型转换

隐式转换：自动进行的转换。
显示类型转换

字符串转为数字：1.Number（） 2.parseInt()和parseFloat();前者只是提取整数部分，后者不仅提取整数部分，还提取小数部分。
数字转字符串：1.与空字符串相加 2.toString();

转义字符

':英文单引号，":英文双引号
document.write()中换行用“<br/>”
alter()中换行用“\n”

流程控制

条件判断：if…else if…else…
选择结构：switch
循环结构：while/do…while…/for…

2020/8/27 星期四 10:49:11

函数

//初体验
<!DOCTYPE html>
<html>
<head>
	<title>函数</title>
	<script type="text/javascript">
		function sum(n){
			var m = 0;
			for(var i=1;i<=n;i++)
			{
				m+=i;
			}
			document.write(n+"以内所有整数之和为："+m+"<br/>"+"<button>请按F5刷新重置</button>");
		}

	</script>s
</head>
<body>
<button onclick="sum(50)">点击计算50以内的整数和</button>  //绑定并调用函数赋值；
<button onclick="sum(100)">点击计算100以内的整数和</button>
<button onclick="sum(150)">点击计算150以内的整数和</button>
<button onclick="sum(200)">点击计算200以内的整数和</button>

</body>
</html>

函数调用方法

直接调用

最常见的调用方式，一般用于“没有返回值的函数”。
<script>
function Jmes(){   //定义函数
document.write("你好");
}
Jmes();  //调用函数
</script>

在表达式中调用

一般用于“有返回值的函数”。
<script>
function Jsum(a,b){
var s=a+b;
return s;}
Jsum(5,6);
document.write(s);
</script>

在超链接中调用

在a元素的href属性中使用“javascript:函数名”的形式来调用。
<script>
function Ames(){
alter("你好");}
</script>
<body>
<a herf="javascript:Ames()">请点击</a>
</body>

在事件中调用

给对应的标签绑定事件，触发进行调用

<script>
function Ames(){
alter("你好");}
</script>
<body>
<input type="button" onclick="Ames()" value="触发">
</body>

内置函数

parseInt( ) //提取字符串中的数字，只限提取整数。
parseFloat( ) //提取字符串中的数字，可以提取小数。
isFinite( ) //判断某一个数是否是一个有限数值。
isNaN( ) //判断一个数是否是NaN值。（即非数字的值）
escape( ) //对字符串进行编码
unescape( ) //对字符串进行解码
eval( ) //把一个字符串当做一个表达式去执行

2020/8/30 星期日 11:34:32

JavaScript内置对象

字符串对象(以下str为变量名)

获取字符串长度：str.length
带小写转换：

转小写：str.toLowerCase()
转大写：str.toUpperCase()

获取字符串中第几个字符：str.chartAt(n)；n为0~n数组下标 [空格也是字符串]
截取字符串：str.substring(start,end)；[start,end)
替换字符串：str.replace(“原字符串”，“替换字符串”)或者（“正则表达式”，“替换字符串"）
分割字符串：str.split(“分割符”)或者str.split(“分割符”，截取前N个元素)
检索字符串位置：

str.indexOf(“指定字符串”)；有就返回“指定字符串”开始的下标，没有就返回-1
str.lastIndexOf(“指定字符串”)；返回字符串最后出现的下标

数组对象(以下str为数组名)

数组的创建：

var 数组名 = new Array(元素1，元素2，。。。，元素n)； //完整形式
简写：var 数组名 = [元素1，元素2，。。。，元素n]

数组的获取：document.write(str[0-n]);
数组的长度：str.length
截取数组某部份：str.slice(strat,end)；[start,end)
为数组添加元素：//可同时添加多个元素，以逗号隔开

从数组开头添加元素：str.unshift()
从数组末尾添加元素：str.push()

删除数组元素：

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

数组大小比较：str.sort()

<script>
function up(a,b)  //定义一个升序函数
{
return a-b;
}
function down(a,b)  //定义一个降序函数
{
return b-a;
}
var str = [2,34,4,5,3]；
str.sort(up);
document.write(“升序：”+str.join(","));   //输出：升序：2,3,4,5,34
str.sort(down);
document.write(“降序：”+str.join(","));   //输出：降序：34,5,4,3,2
</script>

数组颠倒排序：str.reverse（）
将数组元素连接成字符串：str.join(“连接符”)

时间对象

var 对象名 = new Date();

获取星期几：时间对象.getDay() //返回的是数字，比如星期4
weekday[时间对象.getDay()] //返回的是中文，比如星期四

用于获取时间的getXxx()方法

getFullYear()：获取年份，四位数
getMonth()：获取月份[0-11]
getDate()：获取日数[1-31]
getHours()：获取小时数[0-23]
getMinutes()：获取分钟数[0-59]
getSeconds()：获取秒数[0-59]

设置时间则将前缀改为setXxx()

时间对象.setFullYear(year,month,day)
时间对象.setMonth(month,day)
时间对象.setDate(day)
时间对象.setHours(hour,min,sec,millisec)
时间对象.setMinutes(min,sec,millisec)
时间对象.setSeconds(sec,millisec)

数学对象（无须new，直接调用属性跟方法,如：Math.PI）

Math对象的属性

PI：圆周率 π
LN2：2的自然对数 ln(2)
LN10：10的自然对数 ln(10)
LOG2E：以2为底的e的对数
LOG10E：以10为底的e的对数
SORT2：2的平方根
SORT1_2：2的平方根的倒数
度数*Math.PI/180 ：用来表示角度
//比如document.write(“sin30：”+Math.sin(30*Math.PI/180))), 输出sin30：0.49999999999999994

Math对象的方法

max(a,b,c…,n)：返回一组数的最大值
min(a,b,c…,n)：返回一组数的最小值
sin(x)：正弦
cos(x)：余弦
tan(x)：正切
asin(x)：反正弦
acos(x)：反余弦
atan(x)：反正切
atan2(x)：反正切
floor(x)：向下取整
ceil(x)：向上取整
random(x)：生成随机数

random(x); 只能生成0到1之间的数，不包括1。
如果要生成0到10，需要这样写Math.random()*10
8~18：Math.random()*10+8
-8~2：Math.random()*10-8
10~0：Math.random()*10-10 //都可以通过带入最小值0，最大值1来取得范围

2020/9/2 星期三 0:51:53

JavaScript核心技术 DOM基础

首先解释一下DOM，即文档对象模型（Document Object Model）,是W3C定义的一种标准，我们平时所用的hover，鼠标移到改变颜色等特效都是DOM提供的方法来实现的。可以说，DOM是对元素进行操作的。
DOM采用“树形结构"，页面中的每一个元素都以”树节点"来表示。
比如一个网页的DOM树形结构。html元素为树根，即根元素。html下一层又分为head和body,head当中又分为title和meta；body下又可以分P标签，a标签等等。这样一层一层的，就形成了DOM树形结构。

总结：每个元素就是一个节点，一个节点就是一个对象。所以对元素的操作，可以理解为使用这个对象的属性和方法。

最常见的DOM节点有三种：元素节点、属性节点、文本节点

比如：<div id="menu">你好！</div> //div标签就是元素节点，id=“menu”就是属性节点，“你好！"就是文本节点。
值得注意的是，节点 != 元素，而是节点包括元素。

nodeType属性

nodeType值可以区分节点类型。比如元素节点的nodeType值为1，属性节点为2，文本节点为3。

获取元素

getElementById( ); //通过id来选中元素。
**注意：**在浏览器页面必须加载完，才能用getElementById(),因为没加载完，可能就找不到对应id名，就会报错。我们可以使用window.onload = function(){ };来告诉浏览器：“先加载完页面，再解析window.onload内部的代码"。
getElementsByTagName（），注意别少写了个“s”。
顾名思义，取标签名进行获取。一个网页中相同标签名有很多，所以他获取的是多个相同的标签元素，也就是获取的一个类数组。那么我们怎么取得想要的那个标签？

这里可以根据数组下标来选择。比如 < div id=“list” >下有多个li标签。需要选中第二个li标签。
var oul = document.getElementById("list")； //为什么不直接写第二句获取li,因为只写第二句就获取的是整个页面的li,写这一句是精确定位。
var oli = document.getElementByTagName("li")；
oli[1] //这就表示取得<div id="list">下的第二个li元素，其中oli.length可以获取类数组长度，可灵活使用。

补充：只有1.getElementsByTagName（）可以操作动态创建的DOM元素，getElementById( )不能。2.getElementById( )前面只能接document

getElementsByClassName( );通过class来选中。该方法也多了一个“s"，说明也是获取了一个类数组集合。
querySelector(" CSS选择器 " )；来选中满足条件的第一个元素。 //比如 document.querySelector("#main/.main");
querySelectorAll(" CSS选择器 " )；来选中满足条件的所有元素。也可结合数组下标进行选择。
getElementsByName( );该方法也有“s"，说明也是获取类数组集合。通过表单元素的name，来获取。一般只用于单选按钮和复选框。
document.title,由于一个页面只有一个title，所以可以直接用此方法修改。 //如 document.title="hello "
document.body,由于一个页面只有一个body，所以可以直接用此方法修改。

创建元素

理解：最开始在HTML中不存在某些元素，我们可以使用JavaScript创建元素，这种创建方式，我们可以称为“动态DOM操作”。

创建元素节点：createElement( )
创建文本节点：createTxtNode( )
创建好了节点，那么我们怎么把它们放到HTML中去呢？
A.appendChild(B):将节点B放入节点A中。
如

//创建简单元素(不带属性)
var e = document.createElement( "元素名" );
var txt = document.createTxtNode( "文本内容" );
e.appendChild(txt);
//创建复杂元素（带属性）
//比如
var oInput = document.createElement( "input" );
oInput.id="submit";    //给元素属性赋值，即设置属性
oInput.type="button";
oInput.value="提交";
document.body.appendChild(oInput);   //将oInput加入到body

动态创建图片

var oImg = document.creatElement("img");
oImg.className = "pic";    //注意这里是className而不是class
oImg.src = "images/xx.png";  
oImg.style.border = "1px solid silver";   //注意这里的样式添加格式
document.body.appendChild(oImg);

插入元素

A.appendChild(B):将元素B插入到A的末尾，比如插入ul的最后一个li
A.insertBefore(B,ref):将元素B插入到A中的子元素ref 之前，比如插入ul的第一个li。
（获取ul下的第一个子元素，我们可以用ul.firstElementChild方法，最后一个是lastElementChild）

删除元素

A.removeChild(B):删除A中的B元素

复制元素

obj.cloneNode(bool)
obj表示被复制的元素，bool值为真（1/true）,则复制元素及元素下的所有子元素。为假（0/false）则只复制元素本身。

替换元素

A.replaceChild(new,old)
将A元素中的旧元素old,替换成新元素new

JavaScript核心技术 DOM进阶

获取HTML属性操作

获取HTML属性值： obj.attr
obj为DOM对象，attr为属性名。比如 oBtn.id 表示获取按钮的id属性（oBtn表示按钮创建的对象）
设置HTML属性值：obj.abbr = "值"

HTML属性操作(对象方法)

obj.getAttribute(“attr”)
获取元素的某个属性的值，等价于 obj.attr，区别在于**obj.getAttribute(“attr”)**可以获取自定义属性（比如data属性），而obj.attr不能。
obj.setAttribute(“attr”，“值”)
同样的，等同于 obj.abbr = “值” ，区别也在于自定义属性。
obj.removeAttribute(“attr”)
删除属性
obj.hasAttribute(“attr”)
判断元素中是否包含某个属性值，返回的是true/false

CSS属性操作

获取CSS属性值：getComputedStyle(obj).attr
attr表示CSS属性名，注意，这里的属性名比如font-size要写成fontSize,需要去掉“ - ”(因为“-”在JS代表减号)，再写成驼峰命名法。
比如getComputedStyle(oBox).backgroundColor
设置CSS属性值：
1. obj.style.attr = "值"
这个是通过style对象来设置css属性，这里是等价于设置行内样式
比如：oDiv.style.fontSize = "17px";
2. obj.style.cssText = "值"
这个可以不按照驼峰命名法，直接用平常的CSS写法。
如：oDiv.style.cssText = "width：100px;height: 100px;background-color:red;"
getComputedStyle(obj).attr 和 obj.style.cssText 其实都可以获取css属性，区别在于后者只能获取行内式，而不能获取内联式和外联式。前者都可以。

DOM遍历（即查找元素）（两个元素之间的“换行空格”也是一个节点）

查找父元素

obj.parentNode
顾名思义,查找当前元素的父元素

查找子元素

childNodes、firstChild、lastChild
childNodes获取所有子节点，包括元素节点和文本节点。firstChild第一个子节点。lastChild最后一个子节点。
children、firstElementChild、lastElementChild
children只获取子元素节点、firstElementChild第一个子元素节点、lastElementChild最后一个子元素节点。
如果想要获取指定子元素，可以用children[ i ]来实现。

查找兄弟元素

previousSibling、nextSibling、previousElementSibling、nextElementSibling
previousSibling查找前一个节点、nextSibling查找后一个节点。
previousElementSibling查找前一个元素节点、nextElementSibling查找后一个元素节点。

innerHTML 和 innerText

innerHTML
可以很方便的获取和设置一个元素的“内部元素”（其中获取的是元素节点内部所有的代码内容，包括子元素节点、子属性节点、子文本节点）

var oP = document.createElement("p");  //一个属性一个属性地设置
oP.className = "test";
oP.style.border = "1px soild silver";  
document.body.appendChild(oP);

document.body.innerHTML = '<p class="test" style="border：1px soild silver" />';  //用innerHTML更方便

innerText
获取和设置一个元素的“内部文本”，注意，仅仅是文本内容。
以前的firefox浏览器不支持innerText。都是用textcontent,因为他兼容所有浏览器。以前的textcontent等价于innerText，而现在这两种方式，所有的浏览器都支持。

事件基础

JavaScript下常见的事件有五种：

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

事件调用方式

在script中调用 <script> </script>
在元素中调用 <input type="button" onclick=“alter('hello')” value="点击" />

鼠标事件

onclick：鼠标单击。不局限于按钮，都可以设置。oBtn.onclick = function( ){alter("hello"); };
onmouseover：鼠标移入。oP.onmouseover = function( ){ this.style.color = "black" ;};
onmouseout：鼠标移出。oP.onmouseout = function( ){ this.style.color = "red" ;}; //一般两者搭配使用
onmousedown：鼠标按下。oBtn.onmousedown = function( ){ this.style.color = "blue" ;};
onmouseup：鼠标松开。oBtn.onmouseup = function( ){ this.style.color = "pink" ;}; //一般两者搭配使用

键盘事件

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

表单事件

onfocus和onblur

onfocus表示获取焦点时触发的事件。onblur表示失去焦点时触发的事件。搭配使用。
判断元素是否有焦点，打开浏览器按Tab键，能选中的就是有焦点特性的元素。
(这个就比如输入框中的提示文本，有焦点的时候，提示文本就会消失，没有焦点时，提示文本就会出现。而这种效果在H5中，可以用placeholder属性实现)
另外，比如百度首页，一打开，文本搜索框就自动获取到了焦点。这个是通过 “ focus( )" 实现的。

onselect

选中“单行文本”或“多行文本”中的内容时，就会触发onselect事件。
同样的，有时候我们点击搜素框中的文字，会自动选中，这种是通过“ select() ”实现的。一般用this.select()选中当前对象。

onchange
单选框、复选框、下拉菜单中选择一项时触发。

编辑事件

oncopy：防止页面被复制

document.body.oncopy = function ()
{
  return false;
}   //就算鼠标右键可以复制，但是粘贴不出来。

onselectstart：防止页面内容被选取

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

oncontextmenu：禁止鼠标右键

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

页面事件

onload：表示文档加载完后再执行一个事件

window.onload = function ()
{
   ......
}

onbeforeunload：离开页面之前触发的一个事件

window.onbeforeunload = function ()
{
   returnValue = "欢迎下次光临！";
}

事件进阶

事件处理器：就是前面用到的onclick这一类。
有时候我们需要给同一个元素添加多个相同的事件，但是用JavaScript只能执行最后一个onclick。所以就不能实现。但是事件监听器可以。

事件监听器

绑定事件：obj.addEventListener(type，fn，false) （为元素添加多个事件就用事件监听器。）

type 表一个字符串，指的是事件类型。比如单击事件用“click”,鼠标移入事件用“mouseover”，这里不需要加 “ on ”。
fn 为函数名，或者匿名函数。
false 表示事件在冒泡阶段调用。

解绑事件：obj.removeEventListener(type，fn，false) (其中fn必须是一个具体的函数名，不能匿名)

event对象

event对象的属性

type：事件类型
keyCode：键码值,返回的是一个数值，即按键对应的键码值。
shiftKey：是否按下shfit键，返回布尔值
ctrlKey：是否按下Ctrl键，返回布尔值
altKey：是否按下Alt键，返回布尔值

调用这些属性的时候，可以直接用“e.type”,e可写成其他变量名，这是一个隐藏参数，即event对象，写成ev,a都可以。

this

指向当前对象。哪个DOM对象（元素节点）调用了this所在函数，那么this就指向哪个DOM对象。

window对象

一个浏览器窗口就是一个window对象。当我们打开一个窗口，浏览器就自动为页面创建一个window对象。

window对象的子对象

document：文档对象，用于操作页面元素
一个窗口是一个window对象，窗口里面的HTML文档就是一个document对象，即document对象是window对象的子对象。
location：地址对象，用于操作url元素
navigator：浏览器对象，用于获取浏览器版本信息
history：历史对象，用于操作浏览器历史
screen：屏幕对象，用于操作屏幕宽度

window对象的常用方法

alter()：提示对话框
通常window.alter()可以简写成alter()，下同。alter()中的实现文本换行，用的是“\n”
confirm()：判断对话框
confirm()提高文字提示，并有“确认"和”取消"两个按钮，分别对应返回true或false。
prompt()：输入对话框
不仅提示文字，还能返回一个输入框中的字符串。
open()：打开窗口
window.open(url,target)。url表示新窗口的地址，target表示打开方式，跟a标签中用法一样。
close()：关闭窗口

定时器

setTimeout()：开启“一次性”定时器
setTimeout(code,time); code可以是一段代码或者函数或者函数名(一般不需要带括号，带括号就要在外面加双引号)，time为时间，单位ms

window.onload = function()
{
    setTimeout('alter("你好");'，3000)；
}

clearTimeout()：关闭“一次性”定时器
setInterval()：开启“重复性”定时器
同setTimeout()语法一样，只是setInterval()是反复执行。
clearInterval()：关闭“重复性”定时器

location对象

其属性有

href 获取当前页面地址，也可以是设置地址

var url = window.loaction.href;
document.write("当前页面地址为："+url);

search 当前页面地址“ ? ”后面的内容
hash 当前页面地址“ # ”后面的内容

navigator对象

获取浏览器的类型

window.navigator.userAgent

document对象

通过window对象，我们可以操作窗口，比如打开窗口、关闭窗口。这些称为“BOM”,即浏览器对象模型。
通过前面所学，可以知道，BOM包括DOM。

document对象常用的属性

document.title，获取文档的title
document.body，获取文档的body
document.forms，获取所有forms元素
document.images，获取所有img元素
document.links，获取所有a元素
document.cookies，文档的cookie
document.URL，获取当前文档的URL，但不能设置地址
document.referrer，返回使浏览者达到当前文档的URL

document对象常用的方法

此处省去document.getXxxByXxx( )这一系列方法介绍，因为前面已经介绍。
document.write()：输出内容
document.writeln()：输出内容并换行

2020/9/5 星期六 14:27:25

Edit By zeker , learning notes

zeker.xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript知识点概览

知识点JavaScript中，每一条语句以分号结尾。打印document.write( );<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var a = 10; document.write(a); //页面输出“10” </scr
复制链接

扫一扫