JavaScript教程
博客主页：划水的阿瞒的博客主页
欢迎关注🖱点赞🎀收藏⭐留言✒
系列专栏：JavaScript 首发时间：🎞2022年8月6日🎠
如果觉得博主的文章还不错的话，请三连支持一下博主哦
目录
1.Dom对象的整体层次结构
2. Document对象
1.1常用字符串属性：
1.2案例1
<script type="text/javascript">
document.write("最后修改时间:"+document.lastModified+"<br/>");
document.title="欢迎来到Javascript世界";
document.bgColor="#efefef";
document.fgColor="red";
document.write("当前地址:"+document.location);
</script>
效果
1.3常用对象属性
案例
function changeInfo(){
document.form1.input1.value=33;
document.img.src="images/2.jpg";
}
<form name="form1">
<input type="text" name="input1" />
</form>
<img src="images/1.jpg" name="img" />
<input type="button" value="点一点" onclick="changeInfo()"/>
效果
1.4关键方法
案例：
function clickMe(){
var myWin = window.open("","_blank","width=100px,height=100px");
myWin.document.write("直接输出");
myWin.document.writeln("1、输出后换行");
myWin.document.writeln("2、输出后换行");
myWin.document.writeln("3、输出后换行");
window.close();
}
<button onclick="clickMe()">点一点</button>
3.Screen对象
2.1 对象介绍
属于window的子对象。
常用于获取屏幕的分辨率和色彩。
对于该对象的使用来说，了解即可。
2.2 书写格式
4.History对象
4.1.对象介绍
属于window的子对象
常用于返回到已经访问过的页面
4.2.书写格式:
4.3.案例:
注意：history的相关方法，必须是在当前浏览器中以存在一些浏览记录的前提下才可以前进后退的操作，如果直接访问此页面则不存在浏览记录。
5.Location对象
Location对象
属于window的子对象
常用于获取和改变当前浏览的网址
常用的属性
href 当前窗口正在浏览的网页地址
replace(url) 转向到url网页地址
reload() 重新载入当前网址，同按下刷新按钮
案例:
<script type="text/javascript">
function testHref(){
//location.href一般在程序中用于实现页面跳转的效果
location.href="demo.html";
}
function testReload(){
//location.reload用于刷新本页面
location.reload();
}
function testReplace(){
//location.replace用于使用目标资源替换当前资源
//注意replace不会产生历史记录
location.replace("demo.html");
}
</script>
<button onClick="testHref()">href</button>|
<button onClick="testReload()">reload</button>|
<button onClick="testReplace()">replace</button>
6.表单
6.1 表单元素
6.2 表单验证
<script type="text/javascript">
function check() { //检查t1输入是否为空
if(form1.uname.value != "") {
form1.submit();
} else {
alert("姓名不能为空，请重新输入!");
form1.uname.focus();
} //如果t1值为空则自动将焦点设定到t1输入框
}
</script>
<form name="form1">
姓名：<input type="text" name="uname" value="">
<input type="button" name="b1" onclick="check()" value="提交">
</form>
6.3 案例
第一步：验证用户名
用户名：4-20个字符(可使用字母、数字、下划线)
参考代码
function checkUser ( pUserName ) {
var oContainer = document.getElementById(“userNameInfor”);
oContainer.className = “font_error”;
var reg = /^(\w|[\u4E00-\u9FA5])*$/; //用户名验证的正则表达式
if ( pUserName.value == “” ) {
oContainer.innerHTML = “请输入用户名！”
return false;
}
if ( pUserName.value.charAt(0) == “_” ) {
oContainer.innerHTML = “用户名不能以下划线开头，请重新填写！”
return false;
}
if (pUserName.value.length> 20 || pUserName.value.length< 6 ) {
oContainer.innerHTML = “用户名最长只能占20位字符，最短6个字符，请重新填写！”
return false;
}
if ( !reg.test(pUserName.value) ) {
oContainer.innerHTML = “名字中只能用数字、字母、下划线和汉字，请重新填写！”;
return false;
}
oContainer.className = “font_true”;
oContainer.innerHTML = “你填写的用户名是有效的！”;
return true;
}
<tr>
<td>用户名:</td>
<td><input type="text" name="pUserName" onblur="checkUser(this)"/></td>
<td><span id="userNameInfor"></span></td>
</tr>
第二步：验证密码
密码：由6-16个字符(可使用字母、数字、下划线)
参考代码：
function checkpass(pass) { //密码验证
var pwd = document.getElementById("passinfor");
var pattern = /^[A-Za-z0-9_!@#$%^&*()]+$/; //密码验证正则表达式，英文、数字及字符
if(pass.value == "") {
pwd.className = "font_error"
pwd.innerHTML = "密码不能为空";
return false;
}
if(pass.value.length < 6) {
pwd.className = "font_error"
pwd.innerHTML = "密码不能少于6位";
return false;
}
if(!pattern.test(pass.value)) {
pwd.className = "font_error"
pwd.innerHTML = "密码只能是数字、字母、字符！";
return false;
}
pwd.className = "font_true"
pwd.innerHTML = "您设置的密码符合要求！";
return true;
}
<tr>
<td>用户密码:</td>
<td><input type="text" name="pUserName" onblur="checkpass(this)" /></td>
<td><span id="passinfor"></span></td>
</tr>
第三步：验证确认密码
确认密码：两次输入必须一致
function checkrepass( repass) { //确认密码验证
var repwd = document.getElementById("repassinfor");
repwd.className = "font_error"
if(repass.value == "") {
repwd.className = "font_error"
repwd.innerHTML = "确认密码不能为空";
return false;
}
var pass = document.regForm.upass;
if(pass.value != repass.value) { //确认密码是否与密码一致
repwd.className = "font_error"
repwd.innerHTML = "两次输入的密码不一样，请重新输入！";
return false;
}
repwd.className = "font_true";
repwd.innerHTML = "两次输入的密码一致！";
return true;
}
<tr>
<td>确认密码:</td>
<td><input type="text" name="pwssok" onblur="checkrepass(this)" /></td>
<td><span id="repassinfor"></span></td>
</tr>
第四步：验证邮箱
邮箱格式需要符合正则表达式
function checkemail(email) {
var einfor = document.getElementById("emailinfor");
if(!email.value.match(/^\w+((-{1,2}\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-{1,2})[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
einfor.className = "font_error";
einfor.innerHTML = "您输入的电子邮件格式不正确，请重新输入！";
return false;
}
einfor.className = "font_true";
einfor.innerHTML = "你输入的电子邮件地址正确！";
return true;
}
<tr>
<td>用户邮箱:</td>
<td><input type="text" name="email" onblur="checkemail(this)" /></td>
<td><span id="emailinfor"></span></td>
</tr>
第五步：省市联动
var cityList = new Array();
cityList[‘北京’] = [‘朝阳区’, ‘东城区’, ‘西城区’, ‘海淀区’, ‘宣武区’, ‘丰台区’, ‘怀柔’, ‘延庆’, ‘房山’];
cityList[‘上海’] = [‘宝山区’, ‘长宁区’, ‘丰贤区’, ‘虹口区’, ‘黄浦区’, ‘青浦区’, ‘南汇区’, ‘徐汇区’, ‘卢湾区’];
function changeCity() {
var province = document.regForm.province.value;
document.regForm.city.options.length = 0;
for(var i in cityList) {
if(i == province) {
for(var j in cityList[i]) {
document.regForm.city.options.add(new Option(cityList[i][j], cityList[i][j]));
}
}
}
document.regForm.city.options.selctIndex = 0;
}
function loadAll() {
for(var i in cityList) {
document.regForm.province.options.add(new Option(i, i));
}
document.regForm.province.selectedIndex = 0;
}
window.onload=loadAll;
<tr>
<td>用户籍贯:</td>
<td>
省份:<select name="province" onchange="changeCity()" >
<option>省份</option>
</select>
城市:<select name="city">
<option>省份</option>
</select>
</td>
<td><span id="emailinfor"></span></td>
</tr>
7.动态样式表
7.1 动态样式表
指的是在JavaScript中直接对对象的style属性进行设定
HTML组件中的style属性将立即起作用
7.2 动态改变风格
function c(css) { document.getElementById(‘up’).className = css; }
.yellow { COLOR: #ffff00; BACKGROUND-COLOR: #e19d00 }
.blue { COLOR: #ffffff; BACKGROUND-COLOR: #3a6ea5 }
.green { COLOR: #ffff00; BACKGROUND-COLOR: #008000 }
.menu { COLOR: #000080; BACKGROUND-COLOR: #d8d8d0 }
.black { COLOR: #ffffff; BACKGROUND-COLOR: #000000 }
| 灰 | 绿 | 蓝 | 黄 | 黑 |
8.动态样式表-层的显示和隐藏
<!--页签页面的切换-->
<div id="yeqianDiv">
<table>
<tr>
<td>
<ul>
<li class="li_over" onmouseover="showNewsDiv(this,'jtshDiv')">家庭生活</li>
<li onmouseover="showNewsDiv(this,'qwysDiv')">奇闻异事</li>
<li onmouseover="showNewsDiv(this,'thjqDiv')">台海军情</li>
<li onmouseover="showNewsDiv(this,'ffclDiv')">反复倡廉</li>
</ul>
</td>
</tr>
<tr>
<td>
<div id="jtshDiv" name="newDiv">
家庭生活家庭生活家庭生活<br/> 家庭生活家庭生活
<br/>
</div>
<div id="qwysDiv" name="newDiv">
奇闻异事奇闻异事奇闻异事<br/> 奇闻闻异事奇闻异事
<br/>
</div>
<div id="thjqDiv" name="newDiv">
台海军情台海军情台海军情<br/> 台海海军情台海军情
<br/>
</div>
<div id="ffclDiv" name="newDiv">
反复倡廉反复倡廉反复倡廉<br/> 反复复倡廉反复倡廉
<br/>
</div>
</td>
</tr>
</table>
</div>
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
