首页 / JAVASCRIPT / 最系统的JavaScript关键点总结（不含有语言基础语法）

最系统的JavaScript关键点总结（不含有语言基础语法）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了最系统的JavaScript关键点总结（不含有语言基础语法），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10912字，纯文字阅读大概需要16分钟。

内容图文

一，变量
1.可以用new Array（"1","2"）；来定义数组。
2.可以通过为变量赋值为null来清除变量，如：

//首先定义一个变量
var i1=10;
i1=null;
//此时的i1就被清除了

在函数里面这样定义变量的时候要注意

funtion demo(){
     x=10;
}
//而此前的代码中都没有出现x，那么这里就是定义了x，在调用demo函数以后，x就是一个全局变量了。

二.运算符==和===

var i="5";
var j=5;
if(i==j) alert(""hello);
if(i===j) alert("world");

//上面的代码运行后只会弹出hello，因为i和j的值是相等的，但是i和j的数据类型是不等的。所以==只要求值相等，但是===不但要求值相等还要要求数据类型也相等。

三，异常捕获

try{
     if() throw "";
}catch(err){
     alert(throw);
}

四，事件
onload 网页加载事件
onclick 点击事件
onfocus 光标聚集事件
onselect 文本框选中事件
onmouseover 鼠标经过事件
onmouserout 鼠标移出事件

五，dom操作
1，介绍：当网页被加载时，浏览器就会创建页面的文档对象模型。

2、DOM操作HTML
1）js能够改变页面中的所有HTML元素
①改变输出流：document.write();会覆盖掉文档所有的内容！慎用！
②获得元素：document.getElementById();
document.getElementByClass();
document.getElementByTagName();等

其中像tagname和那么这种有可能会获得多个元素的方法，获得的元素变成一个对象数组，按顺序排列

document.getElementById("btn").addEventListener("click",function(){
  var x=document.getElementsByName("people");
  var y=x[2].value;
  alert(y);
  });

③改变Html内容：innerHTML；
④改变属性内容：获得对象后.属性=“属性值”则可，还可以用setAttribute()方法:第一个参数是属性名，第二个参数是属性值
document.getElementById("pid").setAttribute("class","pid2");

获得属性值的方法使用getAttribute();

alert(document.getElementById("name").getAttribute("name"));

dom控制html的一些方法：

          1，设置属性：如var attr=document.getElementById("demo1");
                              attr.setAttribute("title","dhello");//设置属性
                              var st=attr.getAttribute("title");//得到属性

                              alert(st);


          2.得到子节点：
                         var child=document.getElementsByTagName("ul")[1].childNodes;
                         alert(child.length);


          3得到父节点： var parent=document.getElementsByTagName("li")[0].parentNode;
                          alert(parent.nodeName);

          4创建元素节点：   var body=document.body;
                         var inp=document.createElement("input");//创建一个input节点
                         inp.type="button";//节点类型
                         inp.value="ann";
                         body.appendChild(inp);//把新的子节点添加到指定节点。（添加到末尾 ）

          5创建文本节点


          6删除子节点：<p id="p1">
                         <p id="p1">这是一个段落。</p>
                         <p id="p2">这是另一个段落。</p>
                         </p>

                         var parent=document.getElementById("p1");//找到 id="p1" 的元素：

                         var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素：

                         parent.removeChild(child);//从父元素中删除子元素：


                         第二种方法：var child=document.getElementById("p1");
                                       child.parentNode.removeChild(child);


          7动态添加节点(课选择添加的位置)
                                       var p=document.getElementById("p");
                                       var node=document.getElementById("pid");
                                       var newnode=document.creatElement("p");
                                       p.inserBefore(newnode,node);
                                                      要添加的 在这之前的

2）js能够改变页面中所有的HTML属性
<!DOCTYPE HTML>
<html>
<head>

 <title>hello world</title>

</head>
<body>

 <a id="aid"/>
 <p id=pid>hello world!!</p>

 document.getElementById("aid").href="www.baidu.com";//改变属性值

</script>
</body>
</html>

3）js能够改变页面中的所有CSS样式

document.getElementById("pid").style.backgrouneColor="red";

4）js能够对页面中所有事件做出反应

5）DOM对象控制HTML

六、事件句柄EventListener
事件句柄就是触发事件发生的一个动作。例如onclick就是当被点击的时候的句柄。
在js中可以添加事件句柄，这样可以减少很多代码量，
例如下面是传统的事件触发方式
<button onclick="demo()">按钮</button>
在js代码中添加的事件句柄就如下:处理函数不能加（）括号符！
var x=document.getElementById("btn");
x.addEventListener("click",demo);//这里有两个参数，一个是事件的句柄，后面的是处理事件的函数

删除句柄用removeEventListener();

七，事件
1.事件流：页面中接受事件的顺序，有两个顺序，分别是事件冒泡（从里到外），事件捕获（从外到里）。

2.事件处理：
1）HTML事件处理：直接添加到HTML结构中

<button onclick="demo()"><button>

2）dom 0级事件处理：把一个函数赋值给一个事件处理程序属性

<button id="btn"></button>
<script>
var btn1=document.getElementById("btn");
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";
};     
</script>

//0级事件处理清除事件处理很简单只要把onclick赋值为空即可。设置的时候是对象的时间设置为null而不是对象设置为null！
btn1.onclick=null;

//当有多个同个事件的处理程序的时候，前面的会被后面的事件处理程序清理掉。

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

3）dom 2级事件处理：

 addEventListener("事件名"，“事件处理函数”，“true/false”)；

true:事件捕获
false：事件冒泡
清除事件处理要使用removeEventListener();

//dom 2级事件处理程序不会被覆盖而是会一步一步的解析执行。

4）IE事件处理程序。（小于等于IE8的版本中使用，跟addEventListener的使用方法相似。）

添加一个事件attachEvent
删除一个事件detachEvent

5）可以根据浏览器的版本不一样写不同的代码

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3.事件对象：在触发dom事件的时候都会产生一个对象。

事件对象的属性：
1）type：获取事件类型

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

2）target：获取事件目标：哪里触发的这个事件，就是这个事件的对象是html元素中的什么元素。

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

3）stopPropagation（）：阻止事件冒泡：触发了最里面的元素事件的发生，但是这个事件发生之后包含此元素的上层元素的事件也会被触发！所以有的时候我们不希望这种情况的发生就会阻止事件冒泡的发生了。
event.stopPropagation();

4）preventDefault（）：阻止事件默认行为
event.preventDefault();

//dom 0级事件处理
// var btn1=document.getElementById("btn");
// btn1.onclick= function () {
// document.getElementById("pid").style.backgroundColor="red";
// };
//
// btn1.onclick=null;
////dom 2级事件处理,处理函数不能加（）括号符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理！");
//
// document.getElementById("pid").innerHTML="dom 2级事件处理！";
//}

//事件对象

//1.获取事件对象的类型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
// alert(e.type);
//}

//2.获取事件对象的目标

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
// alert(e.target);
//}

八，内置对象
1.什么是对象：js中所有事物都是对象，例如字符串，数组，时间，数值，函数等，每个对象都会带有属性和方法；
2.创建对象：
1）使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2）直接创建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函数创建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

3.字符串对象：String：字符串可以使用双引号也可以使用单引号！

属性：length：str.length可得到字符串的长度、
indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，则将字符串1打印出来，如果没有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

toUpperCase()转换成大写
toLowerCase()转换成小写
split()分隔线，将一个字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date对象
1）创建Date对象：
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)获取具体年份：getFullYear（）；
3）获取毫秒数：getTime();
4)设置具体的日期：setFullYear();
5)获取星期：getDay();

6）设置每秒更新一次
setTimeout(function(){

 showTime();},1000);

//每秒调用一次showTime函数

5.数组对象：
1)数组的创建：var a=["1","krys","ok"];
var a=new Array(); a[0]="hell0"; a[1]="world";
var a=new Array("hello","world","welcome");
2)数组常用的方法：
concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
设置为降序：a.sort(funtion(a,b){return a-b;})
push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;

6.math对象
1）常用函数
round()四舍五入 Math.round(2.5)=3;
random()返回0~1之间的随机数 Math.random();
可以转换成整数：parseInt(Matn.random()*10);
max()返回最大值
min()返回最小值
abs()返回绝对值

九，浏览器的内置对象BOM（browser object model）
1，window对象：大部分对象的祖先，最高级别对象之一。

1）简介：Window对象是指当前的浏览器窗口，所有的js全局变量函数以及变量都是Window对象的成员。
其中，全局变量是window对象的属性，全局函数是window对象的方法。

2）获得浏览器内部窗口的尺寸（即内容区域的尺寸，不包括滚动条工具栏等）：
window.innerHeight浏览器窗口的内部高度,window.innerWidth，浏览器的内部宽度。

3）使用window.open(url)可以打开一个窗口，使用window.close()可以关闭当前窗口。

2,history对象
window.history()对象包含浏览器的历史（url）的集合
有三个方法：
1）history.back()后退，返回到前一页
2）history.forward()，前进，进入到下一页
3)history.go()，带参数，参数就是要进入的页数，-1是前一页，-2是前两页，依次类推，当前页是0.

3，计时器
通过使用js，在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
有两个函数
一个是setInterval()-间隔指定的毫秒数持续的执行指定的代码
一个是setTimeout()-暂停指定的毫秒数后执行指定的代码。
可以使用setTimeout来实现setInterval()的功能：就是在调用的函数代码里调用自己！
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

可以使用clearInterval（），clearTimeout()来清楚这个调用，

4，Location对象
用于获得当前页面的地址，并把浏览器重定向到新的页面（其实我的理解就是解析当前地址）

Location对象的属性：
location.hostname:返回web主机的域名
location.pathname:返回当前页面的路径和文件名
location.port:返回web主机的端口
location.protocol:返回所使用的web协议
location.href:返回当前页面的url
location.assign()加载新的文档，参数是所要加载文档的路径。

window.location.hostname;

5，screen对象
window.screen对象包含有关用户屏幕的信息
screen.avaiilWidth;//可用的屏幕高度
screen.availHeight;//可用的屏幕宽度
screen.height;//屏幕高度
screen.width;//屏幕宽度

6，navigation对象
7，弹出窗口，cookie

十，js面向对象思想

JavaScript重要知识点总结1

JavaScript事件 "事件对象"的注意要点_javascript技巧

内容总结

以上是互联网集市为您收集整理的最系统的JavaScript关键点总结（不含有语言基础语法）全部内容，希望文章能够帮你解决最系统的JavaScript关键点总结（不含有语言基础语法）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285516.html

来源：【匿名】

【上一篇】一起了解javascriptdom编程，实战经验记录笔记【下一篇】javascript 怎么调用php方法

更多 ►

【最系统的JavaScript关键点总结（不含有语言基础语法）】教程文章相关的互联网学习教程文章

javascript --学习基础总结【代码】

闭包　　下面是百度百科的解释:　　　　闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。　　也就是说一个代码块中使用了自由变量var d=10;function df(){console.log(d);//这个时候d就是自由变量了 } 　　那下面来看一个简单的闭包的例子:let t1=(function d(){var dd=1;returnfunction(){return dd++;}; })();//立即执...

javaScript基础【代码】

目录javascript :引入方式:javaScript 语言基础：-- javaScript 中的所有事物都是对象数据类型:运算符流程控制函数函数作用域:词法分析:自定义对象:date对象JSON对象REGExp 对象（re正则）math对象javascript :--脚本语言，插入 HTML 页面后，可由所有的现代浏览器执行。引入方式:#引入方式： 1.script标签内部直接书写 <script> alert(123) </script> zgu 2.通过script标签src书写引入外部js文件 <script src="js.js"></scrip...

JavaScript基础篇最全【代码】【图】

本章内容：简介定义注释引入文件变量运算符算术运算符比较运算符逻辑运算符数据类型数字字符串布尔类型数组Math语句条件语句（if、switch）循环语句（for、for in、while、do-while）label语句异常处理函数定义函数3种方式函数参数（arguments）作用域与作用链闭包面向对象（特性，构造模式，原型模式prototype）prototype 验证方法（isPrototypeOf、hasOwnProperty、in）其它序列化转义eval正则表达式时间处理简介定义　　javasc...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

网易前端微专业，JavaScript程序设计基础篇:数组【代码】

任何一种语言数组都是比较重要的，其作为一种基础对象应用很多，如Java你肯定少不了集合（List，Map)这些。因此本篇主要记录JS的数组使用和常用方法。要点如下：1，数组创建两种方式：var stu = new Array();var stu1 = [];这就和定义对象一样：var cat = new Object(); var cat1 = {};推荐用后者，比较简洁。如：var score = [1, 2, 3];数组里的东西可以是不同类型的，数组里面可以是基础类型也可以是对象或数组：var array = [16...

javascript基础（Array）【代码】

1，join()Array.join()，不改变原数组，将数组中所有元素转换为字符串并连接在一起，返回最后生成的字符串let a=[1,2,3]; a.join(); // =>"1,2,3" a.join(" "); // =>"1 2 3" a.join("-"); // =>"1-2-3" let b=new Array(5); b.join("-"); // => "----" 4个连字号 2，reverse()Array.reverse()，改变原数组，将数组中的元素颠倒顺序，返回逆序后的数组let a=[1,2,3]; a.reverse(); // =>[3,2,1]3，sort()Array.sort()，改变原...

Leetcode刷题预备基础知识（JavaScript版）【图】

参考：https://www.bilibili.com/video/BV14f4y1C7hg 宝藏up主！1.时间复杂度O(1)O(n)复杂度看最高的O(n2) 如果只是两个并列的for循环，时间复杂度还是O（n），100个并列的for循环，也是O(n)这里有继承，两个循环分摊一个任务O(logn)二分搜索O(nlogn)排序优化的方法:从低-级的复杂度寻找灵感O(n)->O(logn)使用二分搜索O(nlogn) -> O(n)遇到需要排序的题，想想能否通过数组,set, map,heap解O(n2)-> O(nlogn)遇到嵌套循环，想想能不能...

JavaScript语言基础14【图】

JavaScript循环语句------------------while循环语句。while在循环条件为true时，一直保持循环状态，直到循环条件为false时退出循环。模板如下：<HTML> <HEAD><TITLE>Hello World</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <SCRIPT Language="JavaScript" TYPE="text/javascript">var value=10;while(value>1){document.write(value+"<br>");value--;} </SCRIPT> </BODY> </HTML> while循环语句包含一个循环条件和循环体，上述当va...

JavascriptDom的基础知识回顾【代码】

1. 节点及其类型: 1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert(‘hello world‘);">Click Me!</button> 　　缺点: ①. js 和 html 强耦合, 不利用代码的维护 ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然...

【JavaScript基础笔记】Ajax，同源策略【图】

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。GET 还是 POST？与 POST 相比，GET...

JavaScript基础【代码】【图】

1、JavaScript是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。2、用法：在HTML中位置有三块：（1）head里面（2）body里面（3）</html>之后为了保险起见，一般写在</html>之后。　　<script language="javascript">代码必须放在这里面</script>3、三个常用对话框 alert("")警告对话框，作用是弹出一个警告对话框。 confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返...

【JavaScript基础】------有待完善

最近开始学习JavaScript，整理了一些相关的基础知识，日后继续完善~~~ JS注释方式：// 单行注释（Ctrl+/ ）/* 段落注释(Ctrl+shift+/ )*/JavaScript基础JavaScript：基于浏览器、基于（面向）对象、事件驱动、脚本语言JavaScript的作用：表单验证,减轻服务的压力，添加页面动画效果，动态更改页面内容，Ajax网络请求（Ajax：可以实现页面局部刷新）JavaScript组成部分；ECMAScript（5.1/6）、DOM、BOMECMAScript脚本程序语言：语法...

JavaScript 基础一

内部： <Script Language="JavaScript" type="text/javascript"> JavaScript代码 </Script>外部引用： <Script Language="JavaScript" src="文件名.js"> JavaScript代码 </Script> 编写规则：JavaScript区分大小写JavaScript脚本程序必须嵌入在HTML文件中JavaScript脚本程序中不能包含HTML标记代码（但是，包含在双引号中就可以用了）四种基本的数据类型：数值（整数和实数）字符串型（用“”号或‘’括起来的字符或数值）布尔...

11-23网页基础--JavaScript基础知识【图】

第一课 JavaScript简介一、定义：JavaScript是脚本语言，需要宿主文件，它的宿主文件是html文件。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、用法：在html中的位置有三块：1）head里面；2）body里面；3）</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代...

JavaScript基础三【代码】

一、BOM1、windows对象所有浏览器都支持 window 对象。它表示浏览器窗口。一些常用的Window方法：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度window.open() - 打开新窗口window.close() - 关闭当前窗口 2.windows子对象navigator对象//web浏览器全程navigator.appCodeName; "Mozilla"// Web浏览器厂商和版本的详细字符串navigator.appVersion; "5.0 (Windows NT 10.0; Win64; x64) AppleW...

首页 / JAVASCRIPT / 最系统的JavaScript关键点总结（不含有语言基础语法）

最系统的JavaScript关键点总结（不含有语言基础语法）

内容导读

内容图文

内容总结

内容备注

内容手机端

【最系统的JavaScript关键点总结（不含有语言基础语法）】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

系统 - 相关标签

语法 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程