前面已经简单复习了SSM框架,现在来复习js的东西。
js是一门由浏览器执行直接嵌入到html的解释性弱类型的脚本语言。
它的作用是操作html,使前端用户和后台进行交互
由三部分组成:
语法:变量声明,数据类型,运算符,语句,函数,事件,绑定事件
BOM(浏览器对象模型),可以通过它操作浏览器
DOM(文档对象模型),通过它可以操作整个html页面
js和html的整合:
方式一:内嵌式
通过<script></script>实现
方式二:外联式
通过script的src属性引入即可
注意:
script放在页面的任何位置都ok,一般放在head中
script一旦使用了src属性,他的标签体失效
变量声明:
var 变量名称 = 初始化赋值;
注意:
var可以省略,但是不建议
末尾的分号也可以省略,但是不建议
数据类型
原始类型:(5种)
Undefined:undefined
Null:null
Number:一切数字
String:一切被引号引起来的字符串
Boolean:true|false
typeof:通过台typeof就可判读值属于什么类型
函数:
方式1:
function 函数名称(参数列表){}
方式2:匿名函数
函数名称 = function(参数列表){}
返回值:
直接写return 不需要声明类型
注意:
参数列表可以不写类型
事件:
表单提交事件:
onsubmit
单击事件
onclick
页面加载成功事件
onload
绑定事件
方式1:绑定事件
通过标签的事件属性 <xxx οnclick="函数名()">
方式2:派发事件
标签.onclick = function(){}
获取标签对象:
document.getElementById("id值");
案例1:完善表单校验
需求分析:
单击注册时,校验用户输入所有的信息,如果不满足条件,在相应的输入框后显示提示信息,满足则提交
技术分析:
事件:onsubmit();
DOM:
获取元素对象:
document.getElementById("id"); 获取一个元素对象
获取value的值
元素.value;
设置value的值
元素.value = "";
获取标签体的内容:
元素.innerHTML;
设置标签体的值
元素.innerHTML = "";
正则表达式:
1.编写正则表达式
用户名:/^[a-z0-9_-]{3,16}$/
电子邮箱:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
校验为空: /^\s*$/
2.校验
var boolean = 正则表达式.test(str);
件:
掌握:
表单提交
单击事件
成功加载
焦点事件:
获取焦点:onfocus
失去焦点:onblur
了解(知道)
鼠标事件
onmouseover();放上去
onmouseout();移出
onmousedown();按下
onmouseup();弹起
onmousemove();移动
ondblclick();双击事件
键盘事件
onkeydown();按下
onkeyup();弹起
onkeypress();按下并弹起
表单事件:
onreset();
onchange();
DOM:文档对象模型
html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点
节点:
文档节点
元素节点
属性节点
文本节点
查询:
document.getElementById("id"); 获取一个元素对象
document.getElementsByTagName("标签名"); 获取一种元素对象 数组
document.getElementsByClassName("class属性值"); 获取一类元素对象 数组接收
document.getElementsByName("name属性值"); 获取多个元素对象 数组接收
操作:
操作value
元素.value;
操作style
元素.style.css属性="赋值"; css属性名的"-"去掉,且"-"后面单词的首字母大写
操作标签体
元素.innerHTML;
元素.innerHTML="<font></font>";
扩展---查询其他API
去找XML DOM
DOcumen
createElement(); 创建元素节点
createAttribute(name); 创建属性节点
createTextNode(); 创建文本节点
Element对象:
appendChild(); 追加