前端网页三剑客------JavaScript基础

一、基础语法

1、引入方式行内JS：在标签内部编写JS代码，配合事件使用。<input type="button" value="幸运大抽奖" onclick="alert()" >内嵌JS：通过script标签嵌入JS代码，可以出现在任意位置，数量不限。<script>alert('helloworld');alert('are you ok?');</script>外部JS：通过script标签的scr属性，引入脚本文件*.js【只能用于引用，不能再写JS代码】<script src="./js/demo.js"></script>2、注释单行：//多行：/**/3、数据类型（1）Undefined:Undefined类型只有一个值即undefined。当声明的变量未初始化时，默认值就是undefined。（2）Object:表示对象的类型，比如时间、数组等对象（3）Boolean:表示真假，只有两个值true和false。（4）Number:表示任意数字，在JS中所有值类型统称为数字类型。（5）String:字符串类型用单引号或者双引号赋值。4、变量【通过typeof(变量名)查看变量的数据类型】声明：var 变量名 = 变量值；        //  `变量的数据类型随着值的改变而改变`5、运算符【==相等  ===全等】(1)算术运算符:+  -   *  /  %   ++   -- 等。(2)赋值运算符:=   +=   -=   *=  /=   %= 等。(3)比较运算符:> 、< 、>= 、<=、==、!=、===(全等)(4)逻辑运算符:&&(短路与)、||(短路或)、!(非)(5)条件（三元）运算符:表达式 ? 值1 : 值2 (表达式为true取值1，表达式为false取值2) 以上所有运算符的使用与java类似。6、流程控制语句if...else...  switch whiledo...whilefor增强for以上所有流程控制语句和Java类似。7、增强for(1)for...in：【i表示数组索引】for(var i in arr){}(2)for...of：【i表示数组元素】for(var i of arr){}8、函数function 方法名(形参){方法体；return 结果；};js函数的特点：（1）形参类型、返回值类型不用写（2）同名方法被覆盖，不存在重载（3）调用时，之和方法名（函数名）有关

二、常用对象

1、Array数组对象

1、创建数组：（1）var arr = new Array();           //空数组 （2）var arr = new Array(默认长度)    //默认长度的数组（3）var arr = [元素列表];            //具有初始值的数组
2、特点：（1）长度可变（2）存储的数据类型任意
3、length属性：获取数组长度、元素个数
4、常用方法：（1）join(参数); 将数组元素通过指定的字符拼接成字符串（2）push(); 向数组的末尾添加一个或更多元素，并返回新的长度

2、Date日期对象

1、创建var date = new Date()   // 获取当前时间。
2、常用方法（1）toLocaleString()：转换日期格式toLocaleDateString():只显示年月日toLocaleTimeString():只显示时分秒（2）getTime()：返回 1970 年 1 月 1 日至今的毫秒数（3）getHours()：返回小时数。（4）getMinutes()：返回分钟数。（5）getSeconds()：返回秒数

3、Math数学对象

1、Math对象不用创建，直接调用方法使用。
2、常用方法：（1）random()：返回 0 ~ 1 之间的随机数（2）max(x,y)：返回 x 和 y 中的最大值（3）min(x,y)：返回 x 和 y 中的最小值（4）ceil(x)：向上取整       （5）floor(x)：向下取整（6）round(x)：四舍五入取整（7）abs(x)：绝对值
3、属性PI：圆周率

4、String字符串对象

1、创建：var str = "abc"; // string类型  var str = new String("abc"); // object类型
2、常用方法：（1）length()：获取字符串长度（2）startsWith()：是否以某个字符开头（3）endsWith()：是否以某个字符结尾 （4）截取字符串：substring(start,end)：截取，含头不含尾substr(start,end)：截取，指定长度（5）根据某个字符拆分字符串 返回数组 split()(6) 判断字符串中是否存在指定字符  indexOf()(7) 转换大写  toUpperCase()(8) 转换小写  toLowerCase()

三、正则表达式

1、单个字符：如 [a]、 [ab] 、[a-zA-Z0-9]
2、元字符：元字符就是指那些在正则表达式中具有特殊意义的专用字符   \d 任意数字    \w 任意数字字母下划线
3、量词符号：?：表示出现0次或1次*：表示出现0次或多次+：表示出现1次或多次{m,n}：表示m=<数量<=n
4、开始结束符号:^ 开始$ 结束
5、创建正则表达式对象：（1）var reg = new RegExp("正则表达式");（2）var reg = /正则表达式/;
6、测试正则验证的方法：test(参数)：验证指定的字符串是否符合正则定义的规范true/false = 正则表达式对象.test(用户填写的字符串);true：字符串匹配成功false：字符串匹配失败
7、怎么创建正则表达式对象？第一种方式：var regExp = /正则表达式/flags;第二种方式：使用内置支持类RegExpvar regExp = new RegExp("正则表达式",flags);           关于flags：g  全局匹配i  忽略大小写m  多行搜索（ES规范制定之后才支持） 当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。

四、事件

为页面元素对象绑定事件：（1）在标签中指定事件的属性：<button id="btn" onclick="func01()">点击事件</button>需要在脚本中，先行定义好func01这个方法~（2）获取标签元素绑定事件：document.getElementById("btn").onclick = function(){}第二种绑定事件用到的是匿名函数，直接书写方法体代码即可
常见事件：blur 失去焦点focus 获得焦点keydown 键盘按下keyup 键盘弹起keypress 键盘按住不放click 鼠标点击dblclick 鼠标双击mousedown 鼠标按下mouseover 鼠标悬停mousemove 鼠标移动mouseout 鼠标离开mouseup 鼠标弹起reset 表单重置submit 表单提交change 下拉列表选中项改变，或文本框内容改变select 文本被选定load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加ononXXX这个事件句柄出现在一个标签的属性位置上。（句柄以属性的形式存在）

五、DOM操作【操作html文档对象】

1、获取元素对象

document.getElementById(id)：通过id获取，返回单个元素。
document.getElementsByTagName(name)：通过标签名获取，返回元素数组。
document.getElementsByClassName(name)：通过类名获取，返回元素数组。
document.getElementsByName(name)：通过名称获取，返回元素数组。

2、操作元素属性

第一套方法：获取元素属性:  页面元素.属性名;设置元素属性:  页面元素.属性名 = 值;
第二套方法设置：标签对象.setAttribute("属性名","属性值");获取：标签对象.getAttribute("属性名");删除：标签对象.removeAttribute("属性名");

3、操作元素样式

1、直接操作：页面元素.style.样式名="值"；
2、间接操作：通过修改class属性间接操作元素样式页面元素.setAttribute(“class”, “类名1 类名2”)

4、操作元素内容

innerHTML：操作内容，可以识别标签
innerText：操作内容，只能识别文本双标签：innerHTML属性
单标签input、双标签select、textarea：value属性

六、BOM【浏览器对象模型】

简介：Bom有一个核心的对象window，window对象包含了6个核心模块document:文档对象Frames:html的自框架History:浏览记录Location:页面地址Navigator:浏览器信息Screen:屏幕信息

Window对象

方法：弹窗方法：alert(); 带确认按钮的警告框confirm(); 带确认按钮、取消按钮的对话框 prompt(); 带输入的对话框【不常用】定时器方法：1、周期定时器：按照指定的周期来调用函数或代码串，执行多次。定义：var timeid=Window.setInterval(code,millisec);清除：window.clearInterval(timeid);                       2、超时定时器(一次性定时器)：在指定的毫秒数后调用函数或代码串，只执行一次。定义：var timeid=Window.setTimeout(code,millisec);清除：window.clearTimeout(timeid);参数说明：code:执行代码millisec:时间间隔，以毫秒为单位timeid：定时器

History对象

1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back()  后退
（2）history.forward()   前进(3)history.go(i)i>0：前进i次i<0：后退i次

Location对象

属性：href  路径
方法：reload():刷新当前页面

单位

            timeid：定时器
History对象
1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back() 后退
（2）history.forward() 前进
(3)history.go(i)
i>0：前进i次
i<0：后退i次
Location对象
属性：
href 路径
方法：
reload():刷新当前页面

前端网页三剑客------JavaScript基础相关推荐

前端网页三剑客------CSS基础
前端网页三剑客------CSS基础一.三种引入CSS的方式 1.行内样式:在指定标签元素内部添加style属性,配置css效果,多个效果之间有分号隔开.缺点: 代码可重用性比较低,可维护性比较低 ...
前端网页三剑客------HTML基础
前端网页三剑客------HTML基础一.HTML基础语法基本语法包含:标签和属性 1. 文件的后缀 .html .htm 2. 标签由尖括号包围的关键词 <html> <hea ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
[最完整的前端学习手册]——JavaScript基础一：
一.JS初识 1.JavaScript一种直译式脚本语言: 2.组成部分: (1)ECMAScript语法和基本对象 (2)文档对象模型(DOM)处理网页内容的方法和接口 (3)浏览器对象模型(BOM ...
3.前端笔记之JavaScript基础
作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.htmlhttp://javascript.ruanyifen ...

前端网页三剑客------JavaScript基础

前端网页三剑客------JavaScript基础

一、基础语法

二、常用对象

三、正则表达式

四、事件

五、DOM操作【操作html文档对象】

六、BOM【浏览器对象模型】

前端网页三剑客------JavaScript基础相关推荐

最新文章

热门文章