一、JavaScript的基础
JavaScript的语法
/* */多行注释
// 变量赋值 默认以换行符作为结束符有分号就以分号作为符号
1.js的引入方式
直接写或者去导入文件就行
a.接写
<script>
alter("hello")
</script>
b导入文件
<script src="index .js"></script>
2.变量：
a.和之前一样，就是变化的量，声明变量用关键字var
var i； 声明变量
i= 10； 声明变量然后赋值
alter（i）弹出i的值
b.一行可以声明多个变量并且可以是不同类型
var name="lanbo" , age=21;
c.声明变量的时候可以不用var，但是如果不用var那他就是全局变量
d.变量命名规则：
首字符只能是字母，下划线$美元符三选一，余下的字符可以是下划线、这些都是区分大小写的，
比如X和x是两个变量
那这样，刚才被三个标记法差点给整懵，标记法也就是起的变量名
Camel标记法
首字母是小写的，接下来的字母都是以大写字符开头
var myFirstTest=1111 ， mySecondTest=22222；
Pascal标记法
首字母是大写的接下来的字母都是以大写的字符开头
var MyThirdTest=3333， MyFouthTest=4444；
匈牙利类型标记法
在Pascal标记法前加一个小写的字符
var iMyThirdTest=3333， MyFouthTest=4444；
3.常量和标识符
我们来了解一下称么是常量什么事标识符
a.量：直接在程序中出现的数据值
b.标识符：
1.不以数字开头的字母、数字、下划线（_）美元符（$)组成
2.常用于表示函数、变量等的名称
3.例如：_abc、abc、$abc、abc123是标识符，而1abc就不是标识符
4.js的关键字是不允许做标识符的
4.数据类型
a.数字类型（number）：
整数
浮点型：就是小数点
16进制和8进制
b.字符串类型（string）：
比如 str="hello",带有引号的
c.布尔值（boolean）：
true和false
用于javascript的控制语句
d.Null&Undefined类型：
Undefined类型：
这个类型只有一个值，就是Undefined，当声明的变量没有初始化时，返回Undefined
函数没有明确的返回值是，返回值也是Undefined
Null:
这也是只有一个值得类型，表示尚未存在的对象，就是找不到返回对象时就返回null；
5.运算符
算数运算符
+ - * / % ++ --
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
比较运算符
> < >= <= != == ===（全等于） !==
字符串运算符
+ 连接，两边操作数有一个或两个是字符串就做连接运算
a.算数运算符：
. 自加自减
在这里我就举几个例子，大家自己在电脑上演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);
</script>
</head>
<body>
b.单元运算符
- + 还有不同的意义
- 除了表示减号还可以表示负号
+除了表示加法运算还可以用于字符串连接
js是一门弱类型语言，比python还随便，可能有时候你出错了但是它并没有报错
c.比较运算符
> >= < <= != == === !==
用于控制语句
if (2>1){ console.log("good") }
NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
如果比较的两个项一个是数字类型，一个是字符串类型的话，就会把这个类型转换为数字类型
如果都是字符串类型的话就直接比较第一个字符，若相等就比较第二个，以此类推
boolean和数字比较转换成数子
字符串和数字比较转换成字符串
运算数和字符串比较转换成字符串
元算数和数字比较转换成数字
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true
null和undefined的值想等
这两个是不能转换成其他值的，
d.比较运算符
if（2>1 && [1,2]）{
console.log("条件与")
console.log(1 && 3); and的意思，就是第一个是对的那你也应该再往后面看一下，以后面的为标准 console.log(0 && 3); console.log(0 || 3); console.log(2 || 3);or满足一个就ok
6.流程控制
顺序结构（从上向下顺序执行）
比如星期一到星期六每天都是有顺序的，类似于这样的就叫做顺序结构
<script>
console.log("星期日");
console.log("星期一");
console.log("星期二");
console.log("星期三");
console.log("星期四");
console.log("星期五");
console.log("星期六");
</script>
分支结构
if{
语句1;
}
else{
语句2;
}
循环结构
var x=(new Date()).getDay();
//获取今天的星期值，0为星期天
var y;
if ((x==6) ||(x=0)){
y="周末" }else{
y="工作日" }
console.log(y);
/*等价于
y="工作日"
if ((x==6)||x==0){ y="周末"
}
console.log(y); */
if elif else结构
if (表达式1) {
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}
var score=window.prompt("您的分数:");
if (score>90){
ret="优秀";
}else if (score>80){
ret="良";
}else if (score>60){
ret="及格";
}else {
ret = "不及格";
}
alert(ret);
switch-case结构
switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
switch(x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; case 6:y="星期六"; break; case 7:y="星期日"; break; default: y="未定义"; }
二、JavaScript的对象
1.string对象
2.Array对象
3.Date对象
4.Math对象
5.function对象（重点）
6.BOM对象
7.DOM对象（后面会有具体的实例）
首先我们来看一下DOM节点，那什么是节点呢，HTML中的每一个成分都是一个节点，那什么又是每一个成分呢
在HTML中
整个文档就是一个文档节点
每一个标签又是一个元素节点
每一个文本又是一个文本节点
每一个属性又是一个属性节点
这么多的节点中document与element节点是重点
咱们前面不是老说父标签和子标签么
那么在节点中他们的关系也是这样来称呼的，也会形成一个节点树，
在节点树中，顶端节点被称为根节点（根节点是没有父节点的，其他节点都有父节点）
同级节点被称为兄弟节点，一个节点可以拥有任意节点的子节点，同胞就是父节点相同
节点查找
直接查找结点
1.document.getElementById("idname")
2.document.getElementsByTagName("tagname")
3.document.getElementsByName("name")
4.document.getElementByClassName("name")
导航节点的属性
parentElement //父节点标签
children //所有子标签
firstElementchild //第一个子标签元素
lastElementchild //最后一个子标签
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签
我刚刚才看到，兄弟们，JS中没有办法找到所有的兄弟标签，恕在下愚昧
a.创建节点
createElement(标签名) 例如
var a=document.crateElement("name")
a.setAttribute("type","text");
b.添加节点
追加一个子节点
somenode.appendChild("sex")
如果要把某个新添加的节点放到某个节点的前面就需要这样做
somenode.insertBefore( sex,某个节点)；
c.删除节点
获得要删除的元素
获得它的父元素
通过removechild（）方法删除
比如在我们练习的时候要删除一行内容，
这里多说一嘴，比如想删除表格中的一行，
d.替换节点：
somenode.replaceChild(newnode,某个节点)
节点属性操作
首先是文本节点的值： innerText innerHTML
attribute操作
elementNode.setAttribute(name,value)
element.getAttribute(属性名) 也可以直接这样写 elementNode.属性名 这两种方法的效果是一样的
elementNode.removeAttribute("属性名");
5、关于class的操作：
|
1
2
3
|
elementNode.classNameelementNode.classList.addelementNode.classList.remove |
DOM Event(事件)
这个我就直接粘贴了
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
onload:
比如你的script标签本来在body里面，但是你偏偏要写在head里面，这个时候就可以用onload，，所以他只给body元素加
例如
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; */ function fun() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun()"> <p id="ppp">hello p</p> </body> </html>
onsubmit事件
这个属性只能给from元素使用 当表单在提交时触发.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
我可以直接上例子吗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="submit"> <p>姓名<input type="text" name="user" id="user"></p> <p>年龄<input type="text" name="age" id="age"></p> <input type="submit" > </form> <input type="text" id="test"> <script> var ele_form=document.getElementById("submit"); var ele_user=document.getElementById("user"); var ele_age=document.getElementById("age"); ele_form.onsubmit=function (event) { var username=ele_user.value; var age=ele_age.value; alert(username); alert(age); // 两种阻止默认事件发生的方式 // 方式1 return false // 方式2 // event.preventDefault() } </script> <script> var ele=document.getElementById("test") ele.onkeydown=function (e) { console.log(e.keyCode); if (e.keyCode==13){ alert(666) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表单提交方式1(). //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 alert("验证失败 表单不会提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> </body> </html>
三、DOM对象
四、实例练习
五、js扩展