JavaScript秘籍从初学者到进阶...

 

JavaScript基础知识

一套JavaScript基本语法，用于在Javascript中添加、执行和编写基本编程范式

页面脚本

向HTML添加内部JavaScript

<script type="text/javascript"> //JS code goes here </script> 

外部JS文件

向HTML添加外部JavaScript

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

功能

JavaScript函数语法

function nameOfFunction () {
// function body 
} 

DOM元素

更改DOM元素的内容

document.getElementById("elementID").innerHTML = "Hello 
World!";

输出

这将打印JavaScript控制台的值

console.log(a);

条件声明

条件语句用于根据某些条件执行操作。

if语句

当指定的条件为真时，要执行的代码块。

if (condition) {
// block of code to be executed if the condition is true
}

if-else语句

如果if块的条件为false，则将执行其他块。

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

if语句

一个基本的if-else if-else

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}

switch语句

在JavaScript中切换大小写语句

switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

迭代语句（Loops）

迭代语句方便程序员重复执行任意块代码行，并且可以根据程序员添加的条件进行控制。

for循环

在javascript中用于循环语法

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

while循环

运行代码直到指定条件为真

while (condition) {
// code block to be executed
}

do while循环

尽管条件为真或假，但至少执行一次 do while 循环

do {
// run this code in block
i++;
} while (condition);

字符串

字符串是用于存储和管理文本数据的字符序列。

charAt方法

从指定的索引返回字符。

str.charAt(3)

concat方法

将两条或两条以上的字符串连接在一起。

str1.concat(str2)

index of 方法

如果找不到，则从字符串 else-1 返回指定字符首次出现的索引。

str.indexOf('substr')

match方法

搜索字符串，寻找与正则表达式的匹配项。

str.match(/(chapter \d+(\.\d)*)/i;)

replace方法

搜索字符串，寻找与指定字符串或字符匹配项，并通过替换指定值返回新字符串。

str1.replace(str2)

search方法

根据指定的值搜索字符串。

str.search('term')

split方法

将字符串拆分为由子字符串组成的数组。

str.split('\n')

substring方法

返回包含指定索引字符的字符串的子字符串。

str.substring(0,5)

数组

数组是同一类型数据项的集合。简单来说就是一个包含多个值的变量。

变量

用于存储数据的容器。

var fruit = ["element1", "element2", "element3"];

concat方法

将两个或多个数组连接在一起。

concat()

indexOf 方法

从数组返回指定项的索引。

indexOf()

join方法

将数组元素转换为字符串。

join()

pop方法

删除数组的最后一个元素。

pop()

reverse方法

此方法颠倒数组元素的顺序。

reverse()

sort方法

以指定方式对数组元素进行排序。

sort()

toString方法

将数组元素转换为字符串。

toString()

valueOf 方法

返回保存传递参数值的相关数字对象

valueOf()

Number方法

JS数学和数字对象提供了几种常量和方法来执行数学操作。

toExponential 方法

将数字转换为指数形式。

toExponential()

toPrecision方法

将数字格式化为指定长度。

toPrecision()

toString方法

将对象转换为字符串

toString()

valueOf 方法

返回一个数字的原始值。

valueOf()

数学方法

ceil方法
将一个数字向上四舍五入到最近的整数，并返回结果

ceil(x)

exp方法

返回E^x的值。

exp(x)

log方法

返回x的对数值。

log(x)

pow方法

将 x 的值返回到幂 y。

pow(x,y)

random方法

返回0到1之间的随机数。

random()

sqrt 方法

返回数字x的平方根

sqrt(x)

日期

日期对象用于获取年份、月份和日期。它有获取和设置日、月、年、小时、分钟和秒的方法。

从日期对象中提取日期
从日期对象返回日期

getDate()

从日期对象中提取日
从日期对象返回日期

getDay()

从日期对象中提取小时数
返回日期对象的小时数

getHours()

从日期对象中提取分钟
返回日期对象的分钟

getMinutes()

从日期对象中抽取秒
返回日期对象的秒

getSeconds()

从日期对象中提取时间
从日期对象返回时间

getTime()

鼠标事件

对象状态的任何变化都称为事件。借助 JS，您可以处理事件，即当用户做某事时，任何特定的 HTML 标签将如何工作。

点击

单击元素时触发

element.addEventListener('click', ()=>{
// Code to be executed when the event is fired
});

oncontextmenu

当元素右键单击时触发

element.addEventListener('contextmenu', ()=>{
// Code to be executed when the event is fired
});

dblclick

当元素被双击时触发

element.addEventListener('dblclick', ()=>{
// Code to be executed when the event is fired
});

鼠标输入

当元素被鼠标箭头输入时触发

element.addEventListener('mouseenter', ()=>{
// Code to be executed when the event is fired
});

鼠标离开

当元素被鼠标箭头退出时触发

element.addEventListener('mouseleave', ()=>{
// Code to be executed when the event is fired
});

鼠标移动

鼠标在元素内部移动时触发

element.addEventListener('mousemove', ()=>{
// Code to be executed when the event is fired
});

键盘事件

关闭

当用户按下键盘上的键时触发

element.addEventListener('keydown', ()=>{
// Code to be executed when the event is fired
});

按键

当用户按下键盘上的键时触发

element.addEventListener('keypress', ()=>{
// Code to be executed when the event is fired
});

键控

当用户在键盘上释放密钥时触发

element.addEventListener('keyup', ()=>{
// Code to be executed when the event is fired
});

错误

编译器或解释器在代码中发现任何错误时都会抛出错误，并且可以是任何类型的，如语法错误、运行时错误、逻辑错误等。JS提供了一些处理错误的功能。

try and catch

尝试代码块，在抛出err时执行捕获

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

window方法

从窗口对象中可用的方法

alert方法

用于提醒屏幕上的某些内容

alert()

blur方法

blur()方法从当前窗口中删除焦点。

blur()

设置间隔

保持一定的时间间隔执行代码

setInterval(() => {
// Code to be executed
}, 1000);

设置超时

在一定时间间隔后执行代码

setTimeout(() => {
// Code to be executed
}, 1000);

关闭

Window.close()方法关闭当前窗口

window.close()

确认

window.confirm()指示浏览器显示带有可选消息的对话框，并等待用户确认或取消

window.confirm('Are you sure?')

打开
打开一个新窗口

window.open("https://www.anmolraj.com");

提示

用文本提示用户并取值。第二个参数是默认值

var name = prompt("What is your name?", "Anmol");

滚动

window.scrollBy(100, 0); // Scroll 100px to the right

滚动到

将文档滚动到指定的坐标。

window.scrollTo(500, 0); // Scroll to horizontal position 500

清除间隔

清除 setInterval.var 是 setInterval 调用返回的值

clearInterval(var)

清除超时

清除 setTimeout.var 是 setTimeout 调用返回的值

clearTimeout(var)

停止

停止进一步的资源加载

stop()

查询/获取元素

每当网页加载时，浏览器都会创建一个DOM（文档对象模型），借助HTML DOM，您可以访问和修改HTML文档的所有元素。

查询选择器
选择器，以选择第一个匹配的元素

document.querySelector('css-selectors')

querySelectorAll

选择所有匹配元素的选择器

document.querySelectorAll('css-selectors', ...)

getElementsByTagName

按标签名称选择元素

document.getElementsByTagName('element-name')

getElementsByClassName

按类名选择元素

document.getElementsByClassName('class-name')

通过ID获取元素

通过元素的id选择元素

document.getElementById('id')

创建元素

在DOM中创建新元素

创建元素
创建新元素

document.createElement('div')

createTextNode
新建一个文本节点

document.createTextNode('some text here')