JS的基本语法知识概括（ECMA、DOM、BOM）

1.javaScript的简介：
1.理解：
js是一种解释性、即使编译的编程语言。应用于web应用的脚本语言，非web环境下也可以使用
2.作用：
1.js可以实现html标签的动态效果
2.js可以对便签的增删改查
3.js可以实现对浏览器对象的操作
4.js可以实现前端页面和后台交互：ajax
3.使用：
1.行内引入：
通过标签属性:

<input type='button' value="提交"  onclick="javascript:alert('xx');">

 2.内联引入：通过<script>标签引入，可以写在html的任何位置

<script type="text/javascript">alert("haha");</script>

 3.外联引入：

定义.js后缀的文件通过<script src ="路径">

4.语法特点

1.js代码写在<script>标签内2.js的注释//注释/注释/    /*注释/3.每句代码结束使用分号4.js语法要求不是那么严格

5.js的组成

1.ECMAScript：js的核心语法：变量、函数、事件2.DOM：Document  Object Model：文档对象模型html标签的增删改查3.BOM：Browser Object Model：浏览器对象模型操作浏览器对象：刷新 前进  后退...

6.ECMAScript基本语法：

1.变量的声明

1.var 变量名 = 值：或者var 变量名；（推荐）2.变量名 = 值；或者变量名；

2.数据类型：

     1.undefined(未定义)  var 变量名2.number   数值类型：var a = 1; var b = 3.143.object对象类型：null...4.sting字符串类型：var   str=“root”；5.boolean布尔值：var  flag = true/false;

3.运算符：

1.算数运算符：+、-、、/、+ +、- -2.赋值运算符：=、+=、-=、=、/=、%=3.比较运算符：>、<、>=   、<= 、!= 、=== 、==4.逻辑运算符：&&、||、！5.位运算符：^、>>、<<、>>>、 <<<6.三目运算：表达式?值1：值2;

4.流程控制
1.分支结构

 1.if（条件表达式）{代码块;}2.if（条件表达式）{代码块1；}else{代码块2；}3.if（条件表达式1）{代码块1；}else if（条件表达式2）{代码块2}4.switch(表达式){case  值1：}

2.循环结构：

1.while（循环条件）{代码块；}2.do{代码块}while（循环条件）；3.for循环例：for（var i= 1;i<=10;i++）不同点：1.while循环先判断条件再执行   do....while 先执行在判断2.起始条件如果不满足 while不执行  do...while执行一次3.注意事项：当起始条件满足：初始值相同  循环条件相同  改变循环变量也相同  循环次数就相同

5.函数（java中叫方法）

 1.自定义函数1.无参、无返回值function   func01(){console.log("无参 无返回值")}2.有参、无返回值function   func02(i,j){console.log(“有参无返回值”);}3.无参、有返回值function   func03(){return  "无参  有返回值"}4.有参、有返回值function   func04(name,age)  {return  name}5.匿名函数var   func = function(){console.log("匿名函数")}2.常见函数：1.字符串常见函数2.数组常见函数3.定时器函数4.弹框函数5.dom相关函数6.bom相关的函数6.字符串

     1.定义字符串：var  str01 = "abcedfg"；2.获取字符串的长度：   str01.length3.判断字符串以xx开头：str01.startsWith("a")4.根据下标获取字符：str01.charAt(2)5.判断字符串以xx结尾：str01.endWith("c");6.根据字符获取下标：str01.indexOf("b")7.截取字符串：str01.substring（1，2）；含头不含尾8.str01.substr(2,2);参数一 ：开始下标 参数二：截取长度9.分割字符串 返回一个数组 str01.split("b");

7.数组：js的数组

 1.定义数组:1.var  arr01 = new Array(5);2.var  arr02 = [1,2,3,4,5,true,null]3.var arr04 = new Array(3,2,1,null,false,"hehe")2数组添加元素1.arr01[下标] = 值；arr01[1]= 2;2.arr.push（值）；3.数组元素删除：delete   arr01[下标]4.数组的遍历：for（var  index in  arr01）{arr01[index];}5.数组中的每一个元素拼接成字符串arr01.join（“”）8.常见弹框：

1.弹警告框：alert（“”）；2.弹输入框：prompt("请输入你喜欢的nba球星"，“KOBe”);     参数1：提示信息   参数2：默认值可以不写3.弹提示信息：function  del（）{if    （confirm（“确定删除吗？”））}

9.事件：

 1.点击事件onclick2.双击事件ondbclick3.内容改变事件onchange4.获取焦点事件 onfocus5.失去焦点事件 onblur6.鼠标放上事件 onmouseover7.鼠标移出事件onmouseout8.键盘按下事件  onkeydown9.键盘抬起事件 onkeyup

10.打印：测试使用

1.打印浏览器到控制台：console.log();2.打印浏览器页面：可以打印标签 document.write（）；即给打印的内容加标签修饰

11.定时器：

     1.一次性定时器：只能执行一次var  id = setTImeout（回调函数，时间）；定义一次性定时器。参数一：执行的动作   匿名函数 或者函数名   参数2：时间msclearTimeout（id）:清除定时器2.循环定时器：var  id = setInterval（回调函数,时间）定义循环定时器      参数1：执行的动作    匿名函数或者函数名    参数2:时间ms多久执行一次clearInterval（id）:清除循环定时器

2.DOM（Document Object Model）：文档对象模型
1.作用：元素标签的增删改查
2.查：

1.基本查询返回的都是集合元素1.通过id值获取标签元素：document.getElementById（“id值”）;2.通过class值来获取标签元素：document.getElementsByClassName（“class值”）3.通过标签名获取检查元素：document.getElementsByTagName（“标签名”）4.通过标签的name值获取标签元素：document.getElementsByName（“name值”）；2.补充（两个特殊案例）：1.innerHTML：获取标签中的所有内容包括标签2.innerText：获取标签中的文本内容3.元素标签对象.value:获取标签中value值3.高级查询：1.获取节点（对标签中所有的内容进行操作）：包括：空格、换行、文本、标签元素1.获取父节点parentNode2.获取第一个子节点firstChild3.获取最后一个子节点 lastChild4.获取下一个节点：nextSibling5.获取上一个节点：previousSibling2.获取标签元素：1.firstElementChild：获取第一个子元素标签2.lastElementChild：获取最后一个子元素标签3.nextElementSibling：获取下一个而元素标签4.previousElementSibling：获取上一个元素标签

3.增
1.创建元素标签：

1.var  p = document.createElement（“标签名”）；创建标签2.p.属性名 = 值；设置属性值3.document.body.appendChild（标签元素）；将标签追加到body后边4.document.body.insertBefore（标签1，标签2）；将标签1插入到标签2的前面

4.删

 1.删除元素标签：1.标签元素.remove（）：删除自己2.标签元素.parentNode.removeChild(标签元素)；通过父亲删除儿子

5.改

 1.替换标签1.标签元素对象.innerHTML="xxx":直接赋值2.标签元素对象.parentNode.replaceChild（参数1，参数2）；参数1：替换后的标签    参数2：要替换的标签2.元素标签属性和样式的操作：1.标签元素对象.style.样式名2.设置属性：setAttribute（“属性名”，属性值）3.获取属性：getAttribute（“属性名”）；4.删除属性：removeAttribute（“属性名”）；3.BOM操作：（浏览器对象模型：实现浏览器交互）

1.BOM的对象：（核心对象window）
如：window.alert();window.setInterval等
2.window下的对象：

1.document对象
2.history页面的历史记录有history.foward():前进相当于浏览器的前进按钮有history.back（）：后退相当于浏览器的后退按钮
3.location 当前页面的地址1.location.protocol：协议名2.location.port：端口号3.location.hostname：域名4.location.pathname：当前页面的路径5.location.href：当前页面的访问全路径
4.navigator：包含浏览器的相关信息
5.screen：获取屏幕相关信息

JS的基本语法知识概括（ECMA、DOM、BOM）相关推荐

前端体系结构知识概括
前端体系结构知识概括前端体系三大框架 CSS HTML JavaScript AJAX axios UI 组件 Node.JS MVMM 前端体系前端体系简介: 前端开发的核心是HTML + C ...
Angular2知识概括
Angular2知识概括 Angular版本更迭 angular2入门 Angular2架构 Angular 2 模板语法脚手架cli 路由Router UI库 Angular2入门之模块与组件 R ...
js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Servlet知识概括详解
Servlet知识概括 Servlet介绍 ServletConfig与ServletContext HTTP协议 HttpServletRequest类 HttpServletResponse类 w ...
JS基础核心语法（1）
JS基础核心语法 JS的简介 JS的组成 JS的特点 JS的使用 JS的输出 JS的调试 JS的语法规范报错类型标识符 JS的执行代码过程: 有无var关键字声明变量的区别 JS的简介视图(vi ...
Java与报表知识概括
Java与报表知识概括 Excel表格(POI) CSV文件(opencsv) word文档(POI) 其他(POI) easyPOI PDF文档图表报表 Excel表格(POI) Excel报表简 ...
什么是JavaScript；JS的基本语法
JavaScript 什么是JavaScript JavaScript是一个轻量级的脚本语言.不具备开发操作系统的能力,只是用来编写或控制其他大型应用程序的脚本(在其他大型程序内部运行的语言). Ja ...
腾讯系:微信，公众号，小程序，企业微信开发知识概括
腾讯系:公众号,小程序,企业微信等等开发知识概括企业微信公众号小程序微信开放平台总结企业微信第三方应用开发(sass服务商): 概述:第三方应用接口旨在方便企业微信管理员通过简单的操作来 ...

JS的基本语法知识概括（ECMA、DOM、BOM）

JS的基本语法知识概括（ECMA、DOM、BOM）相关推荐

最新文章

热门文章