1.JS变量
1.1基本数据类型
相似于java中的基本数据类型。java
| 属性名ide |
属性说明函数 |
| stringspa |
字符串类型。3d "" 和 '' 都是字符串。 JavaScript中没有单个字符orm
|
| boolean对象 |
布尔类型。 blog 固定值为true和falseseo
|
| number事件 |
数字类型。 任意数字及NaN标记
NaN（Not A Number）没有特定意义，仅标记当前值不是一个数字。 但NaN标记属于数字类型
|
| null |
空，一个占位符
|
| undefined |
未定义类型。 该类型只有一个固定值，即undefined， 表示变量声明却 未定义具体的值。
能够理解为Java中，int类型的0，String类型的空字符串，都是为赋值时的默认值 |
1.2 引用数据类型
- Java 中的引用数据类型 都是Class（类）
- JavaScript中的引用数据类型 都是对象。
标准建立方式：
- var str = new String();//和java相同
- var str = new String; //js独有的方式
引用数据类型默认值：null
2. js 运算符
- 比较运算符
- == 逻辑等。仅仅对比 数据值。
- === 全等。 对比数据值而且对比类型。
- 若是值和类型都相同，则为true；值和类型有一个不一样，则为false
<script> /* * == 仅仅比较值是否相同。 若是相同，返回true，不然返回false * === 比较值和数据类型。 若是值和数据类型都相等，返回true； 不然返回false * */ var aa = "10"; alert(aa==10);//true alert(aa===10);//类型不一样，false alert(aa==="10");//true 值和类型都相等 </script>
3. JS函数
function 方法名(参数列表){
}
- return可忽略
- 必定有返回值。 默认值：undefined
目前阶段：JS函数没有重载，只有覆盖
4.JS正则对象
Java正则：“字符串”
JS正则：正则对象
- var reg = /^表达式$/; 直接量（开发中经常使用）
直接量中存在边界，即^表明开始，$表明结束
直接量方式的正则是对象，不是字符串，别用引号
| test(string) |
匹配传入的字符串是否匹配正则。 字符串所有匹配正则，返回true 有一个字符不匹配，返回false |
<script> var str = " ccc "; //定义一个正则对象 var reg = /^\s*$/;// \s空白符--空格 。 空格能够有0个或多个 alert(reg.test(str)); </script>
5.js事件
- onclick
- onsubmit
- 写在<form>
- onsubmit=”return 方法名()”
- 被绑定的方法必须有boolean返回值。
true:表单正常提交
false:阻止表单提交
HTML-DOM绑定方式：
document.getElementById(“”).事件名=方法名;
document.getElementById(“”).事件名=function(){
};
onchange事件
域内容发生改变时
<select> 域
<script>
function run(){
alert("xxxxxxxx");
}
</script>
</head>
<body>
<select onchange="run()">
<option value="ll">榴莲</option>
<option value="sl">石榴</option>
<option value="cm">草莓</option>
</select>
</body>
小结：
- 只有域内容发生改变时，才会触发onchange事件
- 域内容未发生改变，onchange事件不会触发
6. js 定时器
定时器：固定一个周期，执行某一项任务
- 循环定时器： setInterval()
- 一次性定时器：setTimeout()
<script>
function run1(){
alert("你好");
}
//循环定时器：
//setInterval("run1()",2000);//每隔2秒，执行一次run1方法
//一次性定时器：
setTimeout("run1()",2000);//2秒以后，执行一次run1方法
//定时器其余写法：
//setTimeout(run1,2000);//2秒以后，执行一次run1方法
/*setTimeout(function () {
run1();
},2000);//2秒以后，执行一次run1方法*/
</script>
定时器三种写法：
- setTimeout(“方法名()”,毫秒值);
- setTimeout(方法名,毫秒值);
- setTimeout(function(){ //JS代码 },毫秒值);
取消定时器
- clearInterval(id);取消循环定时器
- clearTimeout(id);取消一次性定时器
<script> function run1(){ alert("执行run1"); } var xid = setInterval("run1()",1000); function runx() { clearInterval(xid); } </script> </head> <body> <input type="button" value="点我取消循环定时器" onclick="runx()"/> </body>
注意：页面上的定时器ID都不相同
7. 轮播图
需求分析
- 1、onload
- 2、循环定时器
- 3、一个<img> 重复更改src
<script> //计数器 var num = 1; //更换图片 function changeImg(){ //1、获取图片标签对象 var img = document.getElementById("lbt"); //2、更改src属性 img.src="img/"+(++num==4?num=1:num)+".jpg"; } </script> </head> <body onload="setInterval('changeImg()',2000)">
8. 定时弹广告
- 1、onload
- 2、setTimeout
- 3、获取对象
- 对象.className="显示样式"
- 对象.className="隐藏样式"
<script> //显示图片 function showImg(){ //1、获取图片对象 var img = document.getElementById("ad"); //2、对象.className img.className="showImg"; //设置一个定时器，2秒后隐藏图片 setTimeout("hideImg()",2000); } //隐藏图片 function hideImg(){ //1、获取图片对象 var img = document.getElementById("ad"); //2、对象.className img.className="hiddenImg"; } </script> </head> <body onload="setTimeout('showImg()',2000)">
9.JS事件总结
| 事件名 |
描述 |
| onload |
某个页面或图像被完成加载 时触发 |
| onsubmit |
提交按钮被点击时触发 |
| onclick |
点击某个对象 时触发 |
| ondblclick |
双击某个对象 时触发 |
| onblur |
元素失去焦点 时触发 失去焦点前提：必须先获取焦点 |
| onfocus |
元素得到焦点 时触发 |
| onchange |
域的内容被用户改变 时触发 |
焦点（关注点）：一个网页只有一个焦点
焦点在输入框中有直接体现：闪烁的光标
鼠标键盘事件：
| 事件名 |
描述 |
| onkeydown |
某个键盘的键被按下 |
| onkeypress |
某个键盘的键被按下或按住 |
| onkeyup |
某个键盘的键被松开、弹起 前提：必须先按下 |
| onmousedown |
某个鼠标按键被按下 |
| onmouseup |
某个鼠标按键被松开 |
| onmouseover |
鼠标被移到某元素之上 移入 |
| onmouseout |
鼠标从某元素移开 移出 前提：必须先移入 |