<script>//定义person
let person ={
name :"张三",
age :23,
hobby :["听课","学习"],
eat :function(){
document.write("吃饭...");}};//使用person
document.write(person.name +","+ person.age +","+ person.hobby[0]+","+ person.hobby[1]+"<br>");
person.eat();</script>
<script>//1.验证手机号//规则:第一位1,第二位358,第三到十一位必须是数字。总长度11
let reg1 =/^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888")+"<br>");//2.验证用户名//规则:字母、数字、下划线组成。总长度4~16
let reg2 =/^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));</script>
<script>//1.为表单绑定提交事件(true提交、false不提交)
document.getElementById("regist").onsubmit =function(){//2.获取填写的用户名和密码
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;//3.判断用户名是否符合规则 4~16位纯字母
let reg1 =/^[a-zA-Z]{4,16}$/;if(!reg1.test(username)){alert("用户名不符合规则,请输入4到16位的纯字母!");returnfalse;}//4.判断密码是否符合规则 6位纯数字
let reg2 =/^[\d]{6}$/;if(!reg2.test(password)){alert("密码不符合规则,请输入6位纯数字的密码!");returnfalse;}//5.如果所有条件都不满足,则提交表单returntrue;}</script>
<script>// 一、定时器
function fun(){alert("该起床了!");}//设置一次性定时器
let d1 =setTimeout("fun()",3000);//取消一次性定时器clearTimeout(d1);// 设置循环定时器
let d2 =setInterval("fun()",3000);// 取消循环定时器clearInterval(d2);// 加载事件 等待页面加载完成 才触发onload事件
window.onload =function(){
let div = document.getElementById("div");alert(div);}</script>//当script 位置变化时 加载事件 等待页面加载完成 才触发onload事件
<body><p>
注册成功!<span id="time">5</span>秒之后自动跳转到首页...</p></body><script>//1.定义方法。改变秒数,跳转页面
let num =5;
function showTime(){
num--;if(num <=0){//跳转首页
location.href ="index.html";}
let span = document.getElementById("time");
span.innerHTML = num;}//2.设置循环定时器,每1秒钟执行showTime方法setInterval("showTime()",1000);</script>
三案例 动态广告
<script>//1.设置定时器,3秒后显示广告图片setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display ="block";},3000);//2.设置定时器,图片显示3秒后隐藏广告图片setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display ="none";},6000);</script>
JavaScript 封装
封装思想
封装:将复杂的操作进行封装隐藏,对外提供更加简单的操作
获取元素的方法
document.getElementById(id值):根据 id 值获取元素
document.getElementsByName(name值):根据 name 属性值获取元素们
document.getElementsByTagName(标签名):根据标签名获取元素们
我们之前的操作都是基于原生 JavaScript 的,比较繁琐。
JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单!
案例
my.js
这里将一些方法稍作封装在my.js里,做一个简单的封装
底层还是调用原生方法
function getById(id){return document.getElementById(id);}
function getByName(name){return document.getElementsByName(name);}
function getByTag(tag){return document.getElementsByTagName(tag);}
function removeself(el){
let parent = el.parentElement;
parent.removeChild(el);}
<body><div id="div1">div1</div><div name="div2">div2</div></body>//引入my.js<script src="my.js"></script><script>//封装的方法获取
let div1 =getById("div1");alert(div1);//原生方法获取// let div1 = document.getElementById("div1");// alert(div1);// let divs = document.getElementsByName("div2");// alert(divs.length);//调用方法
let divs =getByName("div2")alert(divs.length);// let div2 = document.getElementsByTagName("div");
let div2 =getByTag("div");alert(div2.length);//调用删除自己的方法removeself(div1);</script>