本帖最后由 小石姐姐 于 2017-11-20 15:05 编辑
第三章 JS篇* alert:页面弹框* console:输出* log:记录* click:鼠标单击* ondbclick:鼠标双击* mouseover:鼠标移入* placeholder:占位符* interval:时间间隔* script:剧本* confirm:确定,批准* prompt:促使; 引起* location:位置- JS的概述
- JS的运算符
- JS中的运算符与Java中基本一致！
- JS中有一个 === 全等于
- JS的引入方式
- 页面内直接编写JS代码,JS代码需要使用
- 将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可
- JS的通常开发步骤
- JS通常都由一个事件除非
- 除非一个函数,定义一个函数
- 获得操作对象的控制权
- 修改要操作的对象的属性或值
- JS的基本语法
- 弹出提示框:alert("内容");
- 在控制台打印变量:console.log(变量名);
- 定义变量 var 变量名 = 值;
- 变量名:局部变量(定义在方法内部的变量)我们以_开头.
- 给变量赋予默认的值
- 如果是基本类型 var num = undefined
- 如果是引用类型 var person = null;
- null和undefined报错问题
- Cannot read property 'name' of undefined 原因是调用了undefined.name
- Cannot read property 'name' of null 原因是调用了null.name
```定义对象 var person = { name:"张三", age:14, gender:'女' }```定义方法(函数) function 方法名(){} function 方法名(name,id){} function(){} //匿名方法,当作为方法的实际参数的时候使用 window.onload=function(){}```方法的调用 方法名();``` - 事件:注意函数必须加()
- onclick = "函数名()"
- ondblclick = "函数名()"
- onmouseenter = "函数名()"
- onmouseleave = "函数名()"
- onload = "函数名" 在HTML文本加载完毕后请求资源,资源
- onsubmit = "return 函数名()" 做判断,必须加return
``` //思路://1.给表单添加onsubmit事件//2.获取表单中的value属性的值//3.判断value是否等于""//4.如果等于""弹出提示框，返回false,否则返回true//注意onsubmit="return fn()"必须加return<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function checkForm(){ var username=document.getElementById("username").value; var password=document.getElementById("password").value; var repassword=document.getElementById("repassword").value; var email=document.getElementById("email").value; if(!!!username){ alert("用户名不能为空!"); return false; }else if(!password){ alert("密码不能为空!"); return false; }else if(repassword!=password){ alert("密码不一致!") return false; }else if(!/123@qq.com/.test(email)){ alert("邮箱错误") return false; } return true; } </script> </head> <body > <form action=""> <input type="text" name="username" id="username" placeholder="请输入用户名" /><br /> <input type="password" name="password" id="password" placeholder="请输入密码" /><br /> <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码" /><br /> <input type="text" name="email" id="email" placeholder="请输入邮箱" /><br /> <button type="submit">注册</button> </form> </body></html>``` - 定时器
- var timer=setInterval("JS代码",毫秒值);
- var timer=setInterval(function(){},毫秒值);//常用
- setInterval(function(){},1000);
- var timer=setTimeout("JS代码",毫秒值);
- var timer=setTimeout(function(){},毫秒值);
- clearInterval(timer);
- clearTimeout(timer);
``` 思路:1.页面加载完毕后添加onload事件2.创建定时器3.在定时器中获取图片对象，并且修改src属性的值<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var timer; function play(){ var img=document.getElementsByName("tu")[0]; var num=1; timer=setInterval(function(){ img.src="tupian/"+num+".jpg"; num++; if(num>5){ num=1; } },2000); } function stop(){ clearInterval(timer); } </script> </head> <body> <img src="" alt="" name="tu" style="height: 200px;width: 200px;"/> <button type="button">播放</button> <button type="button">停止</button> </body></html>``` - CSS显示和隐藏元素的两种方式
- display://隐藏后不占位
- visibility://隐藏后占位
``` 思路:1.页面加载完毕后添加onload事件2.创建setTimeout定时器3. 五秒后获取广告div a.修改样式为可见 b.修改完后继续添加setTimeout定时器 c.五秒后获取广告div，修改样式为隐藏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ height:3000px; width:100%; background-image: url(img/1.jpg); } #ad{ height: 45px; width:223px; position: fixed; top: 50px; right: 50px; } </style> <script type="text/javascript"> function show(){ var ad=document.getElementById("ad"); setTimeout(function(){ ad.style.display="block"; setTimeout(function(){ ad.style.display="none"; },1000); },1000); } </script> </head> <body> <div> <div id="ad" style="display: none;"> <img src="img/logo.gif" alt="" height="45px width 223px"/> </div> </div> </body></html>``` - DOM元素对象的获取方式
- document.getElementById();
- BOM对象
- history
- forward();
- back();
- go():1/-1;
- location
``` 返回:history.back()=history.go(-1)前进:history.forward()=history.go(1)``` - JS操作属性
- obj.value = "";
- obj.style.样式名 = "";
- obj.src = "";
- obj.属性名 = "值";
- JS调试(debug):
- 打开控制台,查看console是否有错误信息
- 如果有错误信息,可以直接定位哪里有问题
- 如果没有错误信息,可以直接定位哪里有问题
- 找事件,根据事件名字找到对应的方法,比如onload = "show()",那我们就可以找到方法是show方法
- 在show方法的第一行加断点
- 自习观察代码是走的哪一行报错,并记录下来
- 通过watch查看出问题的那一行的变量
- 在控制台打印数据:console.log();
- CSS控制元素显示和隐藏的第二种方式visibility:hidden/visible
- !!"":把字符串转换成boolean类型
- 两条命令:
- cursor:pointer;:当鼠标移动到广告上的时候,鼠标会变成小手
- placeholder;:占位符,文本框中的提示
|
|
收藏
淘帖
踩
