一、简单了解JavaScript
1.什么是JavaScript
JavaScript简称js跟java没有任何关系属于Html语言一门弱类型的语言
用于给HTML页面页面上漆加动态效果与交互操作ECMA :相当于J5的语言标准,目前最高是E56
2.如何使用js
1.使用script标签,一般而言都是放在head标签中
2.编写js文件,通过script标签中的src属性引入可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致
3.js的调试
浏览器:控制台(Console)
console.log()打印信息.dir()打印一个对象的所有属性和方法
4.js的语法
JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{}
JavaScript井不强制要求在每个语句的结尾加;
// 行注程
/**/ 块注释
JavaScrip严格区分大小写
5.变量与数据类型
在J5中,所有的变量都是使用van,let关键字声明
并且变量的值与类型都可以发生改变
使用typeof可以查看数据类型
5.1 .3大基本类型
1. Number
1.1JavaScript不区分整数和浮点数,统一用Number表示
1.2NaN :非数字
1/"a"
非数字不能使用--比较,需要调用isHat()方法·
1.3 Infinity:无夯大
1.4parseInt():String -》整数,
1.5Number·
1.6parseInt():String-> 小数,
1.7 % 求余·
1.8除法
由于精度问题会出现结果不精确,
可以调用.fixed()方法保留小数点位数
2.String
可以使用(' ' 和 "")
使用 ` ` 反引号可以创建模板字符串
3.Boolean
|| 或者·
&& 并旦·
! 单目运算符·
比较运算符
=== 比较类型与内容·
== 转换类型再比较-
4. 默认为null值—object
5.未初始化的变量—undefined·
6.js中的弹框-
alert : 提示框
confirm : 询问框
prompt : 输入框
7.基本语句结构-
7.1if结构—接收用户输入的数字1~7,输出对应的是周几
7.2switch结构
由用户给定一个小时数:如果是14-18则输出下午
如果是18-24则输出晚上
其他四件则输出早上
7.3while结构
使用while循环打印三角形,根据用户输入的次数
打印菱形
7.4for结构
循环在页面打印18个h1到h6的标题
根据用户出入的数字来决定打印的次数
Q给定一个数组,找出数组中第一对和为20的两个值
二、js的进阶
1.-自定义函数
1.1函数的返回值问题
js中的函数不需要指定返回类型
js中的函数可以返回任意类型
js中的函数一定会有返回类型,如果没有return,则为undefined
1.2return的作用
用于给函数设置返回值
-用于中断函数运行
1.3函数的参数问题·
参数不需要指定类型
调用函数的时候不会对参数的个数进行判断
2.函数类型
高阶函数
箭头函数
匿名函数( 给一个按钮设置点击事件)
普通函数(给一个按钮设置点击事件)
3. window对象
3.1 screen:有关客户端的屏幕和显示性能的信息
3.2history:关客户访问过的URL的信息-
返回
history.back()7
history.go(-1)
前进
history.forward()·
history.go(1)
3.3-location :有关当前URL的信息
location.reload():刷新当前页面
location.href():跳转页面
4.window对象常用函数
4.1 window.open(): 新开窗口·
4.2window.close():关闭当前窗口-
4.3setTimeout ;设置定时器
4.4setInterval:设置循环定时器·
4.5清除计时器
clearTimeout·
clearInterval
5. 内置对象
5.1Date
5.2Math
5.3 修改元素内容的方法,
innerHTML·
textcontent
三、Dom树
1. DOM概述
1.1Document Object Model
1.2 DOM树
2.查找HTML DOM元素
2.1getElementByld
2.2getElementsByName
2.3getElementsByTagName
2.4getElementsByClassName
2.5document.documentElement
2.6document.body
2.7querySelector
2.8querySelectorAlL
3.改变HTML元素
3.1 elementinnerHTML=*new html contentgetElementsByName
3.2getElementsByTagName
3.3getElementsByClassName
3.4document.documentElement
3.5document.body
3.6querySelector
3.7querySelectorAlL
4.DoM树
4.1document也是一个Element对象,它处于DoM树的最上级
4.2Element对象:HTML标签对象,也是一个节点Node对象
4.3-Node :节点对象
四、DOM编程
1.Element常用属性
1.1Element.children :获得该元素中的所有子元素标签
1.2Element.childElementCount :获得该元素中的子元素的个数
1.3Element.firstElementchild :获得第一个子元素
1.4Element.cloneNode(boolean):复制节点(是否复制子节点)
1.5Element.removeChild(Node):移除子节点
1.6Element.replacechild(Node1,Node2):替换Node1替换子节点Node2
1.7Element.appendchild(Node):在内容末尾添加子节点
1.8Element.insertBefore(Node1,Node2)(Node2为null即可实现未尾插入)
将Node1插入在Element中的子元素Node2前面
1.9Element.after(Node):在节点后面添加节点
1.10Element.before(Node):在节点前面添加节点
2.使用JS操作表格
2.1 DOM结构中,table标签的子节点是tbody
2.2table.rows:表格中的行的集合·
2.3row.cells:一行中的列的集合
2.4table.insertRow(i):在表格中为i的位置插入一行
2.5row.insertCell():在行中为i的位置插入一列
2.6table.deleteRow(i):删除第行·
五、表单验证
1.正则验证
1.1 使用正则表达式来对数据格式进行判断
1.2正则的规则
内容·
\d 数字[0-9]
\D 非数字^[0-9]
\w 数字+英文+下划线[0-9a-zA-Z_]
\W 非数字+英文+下划线^[0-9a-zA-Z_]
. 任意字符
次数·
? 0~1次
+ 至少一次
* 0~任意次
\d {5} 五个数字
\d{5,10}最少五次,最多10次
1.2 正则的注意事项
规则必须以/^开头
规则必须以&/结屋
规则只需要\d,而不是\\d
定义正则对象:var rex=/^\d{5}$/
使用正则对象:rex.test('123')