-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-09-18
来源 ：
阅读 626
评论 0
摘要：本篇教程介绍了JavaScript基础教程 DOM对象、form表单操作学习，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript基础教程 DOM对象、form表单操作学习，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
<
1.open，setTimeout，setInterval，clearInterval，clearTimeout
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// BOM：浏览器对象，broswer object model
// window对象:窗口默认自带的对象，也就是js默认的对象
function test() {
// 最常用的
window.open("//www.baidu.com","百度","500px");// 打开一个页面
//window.close();// 关闭一个页面
}
function test2() {
// 在setTimeout中默认有一个参数，如果有两个参数的话，第一个test参数就代表test()函数，一定不能带括号(test())
// 第二个参数就是延迟的时间，以毫秒为单位
timeout = window.setTimeout(test, 3000);// 延迟加载，定时器
}
function test3() {
interval = setInterval(function(){// 周期函数：实现周期性的执行
alert("我是恶意弹窗");
}, 5000);// 每次执行间隔的时间，单位是毫秒数
}
function test4() {
clearInterval(interval);// 清除周期函数
}
function test5() {
clearTimeout(timeout);
}
function go1() {
window.history.go(1);
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test2();" />
<input type="button" value="测试Interval" onclick="test3();" />
<input type="button" value="测试Interval" onclick="test4();" />
<input type="button" value="测试timeout" onclick="test5();" />
<input type="button" value="前进" onclick="go1();" />
<a href="20170711_js_2.html">跳转</a>
</body>
</html>
2.前进后退：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
// history
function go1() {
window.history.go(1);
}
function go2() {
window.history.go(-1);
}
</script>
</head>
<body>
<input type="button" value="前进" onclick="go1();" />
<input type="button" value="后退" onclick="go2();" />
</body>
</html>
3.navigator.userAgent：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
function test() {
// navigator
// userAgent是在http中存放，存放的是用户(操作系统登录的用户)信息
var broswer = window.navigator.userAgent.toLowerCase();
if(broswer.indexOf("msie") > 0) {// IE浏览器
alert("IE");
} else if(broswer.indexOf("firefox") > 0) {
alert("火狐");
} else if(broswer.indexOf("google") > 0) {
alert("谷歌");
} else {
alert("没有浏览器");
}
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test();" />
</body>
</html>
4.location.href，top.location.href:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript">
function test() {
// location
//window.open();// 重新打开一个页面
//****************
//window.location.href = "//www.baidu.com";// 在本页面上实现了一个页面跳转
window.top.location.href = "//www.baidu.com";// 重新加载页面
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="test();" />
</body>
</html>
5.五种方法获取标签的属性：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
// 需求：需要在div中写上一个字:我是div
// 第一步：选中这个div标签
// 第一种：通过form来选中，document.forms<----是一个form的数组，不属于form表单的标签无法被选中
function test() {
var div1 = document.forms[0].ins;
alert(div1);
}
// ****第二种：通过document对象:通过id选中document.getElementById("");
function test2() {
var div1 = document.getElementById("span1");
alert(div1);
}
// ****第三种：通过document对象：通过class样式选中document.getElementsByClassName("");---如果有多个，返回的是一个集合
function test3() {
var classes = document.getElementsByClassName("div2");
alert(classes);
}
// ****第四种：通过document对象:通过标签选中document.getElementsByTagName("");---如果有多个，返回的是一个集合
function test4() {
var div2 = document.getElementsByTagName("div");
alert(div2);
}
// 第五种：通过document对象:通过name属性来选中
function test5() {
var span1 = document.getElementsByName("span1");
alert(span1);
}
</script>
</head>
<body>
<form class="div2" action="">
<!-- 因为div并不属于form -->
<div class="div2" id="div1" name="div1" style="width:200px; height:200px; background:red;" onclick="test5();"></div>
<!-- 因为span标签并不属于form表单 -->
<span class="div2" id="span1" name="span1">我是span</span>
<input class="div2" name="ins" type="text" />
<div></div>
</form>
<form action="">
<div style="width:200px; height:200px; background:red;"></div>
</form>
</body>
</html>
6.setAttribute:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function test1() {
// 1.0
// 选中span标签
var span1 = document.getElementById("span1");
// 需求：需要给文字换一个颜色
// 使用setAttribute设置一个属性：有两个参数：第一个参数：需要设置的属性名；第二个参数：设置的值
// 设置的属性，该标签必须支持
var a1 = document.getElementsByTagName("a")[0];// 通过下标获取选中的集合元素
a1.setAttribute("href","//www.baidu.com");
//span1.setAttribute("style", "color:red");
// 使用getAttribute获得某个标签的属性值
// alert(span1.getAttribute("style"));
}
function test2() {
// 2.0
// 需求：需要span标签更换字体颜色
var span1Style = document.getElementById("span1").style;
span1Style.color = "red";
}
function test3() {
// 终极版
var span1 = document.getElementById("span1");
span1.style.color = "red";
}
function test4() {
// jiuji版
document.getElementById("span1").style.color = "red";
}
</script>
</head>
<body>
<a>我是a标签</a>
<span id="span1">我是span标签</span><br />
<input id="ins1" type="text" />
<input type="button" value="测试" onclick="test1();" />
<input type="button" value="测试2" onclick="test2();" />
<input type="button" value="测试3" onclick="test3();" />
<input type="button" value="测试4" onclick="test4();" />
</body>
</html>
7.innerHTML:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
<!-- document对象操作文字/html页面 -->
function test1() {
// 获取到了span标签
var span1 = document.getElementsByClassName("span1")[0];
// span1.innerHTML = "我是span标签";
// 如果innerHTML传入的是一个文本，就会把文本显示到选中的标签中
// 如果传入的html标签，首先把html标签转化，只是把文本显示出来
span1.innerHTML = "<a href=‘//www.baidu.com‘><i>我是span标签</i></a>";
}
</script>
</head>
<body onclick="test1();">
<input type="button" value="测试" onclick="test1();"/>
<span class="span1"></span>
</body>
</html>
8.获取form表单信息：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function test() {
// 第一种获取form对象
var forms1 = document.forms["form1"];
// 第二种获取form对象
var forms2 = document.forms[0];
// 第三种获取form对象
var forms3 = document.getElementById("form1");
/**var ins = forms1.username;// name为username的input对象
var insValue = ins.value;// input框中输入的值
if(insValue.length < 6 || insValue.length > 20) {
alert("用户名的长度在6位到20位之间");
} else {
alert("用户名格式正确");
}*/
//var goods = forms1.goods;
//alert(goods.value);// 选择被选中的那一个，如果input中没有设置value，获取到一个on:单选框中已经有选项被选中
/**var hobbys = forms1.hobby;// 返回的是一个数组
for(var i = 0;i < hobbys.length; i++) {
if(hobbys[i].checked) {
alert(hobbys[i].value);
}
}*/
// alert(hobbys[0].checked);// checked判断一个选项被选中，返回true或者false
var optionValue` = document.getElementById("selectIt").value;// 最常用的，获取下拉列表所选中的value值，而不是文本
// 第一步：获取到form表单对象
// 第二步：获取select对象
var uy = forms1.university;
// 第三步：option数组对象
//alert(uy.options[0].text);// 使用text获取下拉框中的文本信息
var uyOptions = uy.options;// 获取一个option数组
for(var i = 0;i < uyOptions.length; i++) {
if(uyOptions[i].selected) {
alert("获取文本："+uyOptions[i].text);
alert("获取值："+uyOptions[i].value);
}
}
//uy.options[0].value;// 使用value获取下拉框中的值
}
</script>
</head>
<h1>登录页面</h1>
<body>
<form id="form1" action="" name="form1">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="pwd" /><br />
选择喜欢的商品：<input type="radio" name="goods" value="卫生纸" />卫生纸
<input type="radio" name="goods" value="fangbianmian" />方便面
<input type="radio" name="goods" />垃圾桶
<input type="radio" name="goods" />电脑
<input type="radio" name="goods" />床
<br />
<!-- soccer：美式足球(橄榄球) football:英式足球(足球) -->
请选择你的爱好：<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="Pingpong" />国球
<input type="checkbox" name="hobby" value="soccer" />橄榄球
<br />
请选择你的院校:<select name="university" id="selectIt">
<option value="bjdx">北京大学</option>
<option value="qhdx">清华大学</option>
<option value="zzdx">郑州大学</option>
<option value="jlddx">家里蹲大学</option>
</select>
<br />
<input type="submit" value="提交" />
</form>
<input type="button" value="测试" onclick="test();" />
</body>
</html>
9.判断用户名密码是否符合要求：
A:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function test() {
var flag = true;
var usernameValue = document.getElementById("username").value;
if(usernameValue.length < 6 || usernameValue.length > 20) {
alert("用户名格式错误");
flag = false;
return false;// 在Java中一旦return这个方法就不会继续执行，js中是同样的，但是如果不需要继续执行就return false，return true的话还是会被继续执行
} else {
alert("用户名格式正确");
flag = true;
// 如果不写就默认return true
}
return flag;
}
</script>
</head>
<body>
<form action="//www.baidu.com">
用户名：<input id="username" type="text" /><br />
密码：<input type="password" /><br />
<input type="submit" value="提交" onclick="return test();" /><!-- 如果要实现Java的效果，就必须要在绑定的事件中加上return关键字 -->
<!-- 这里return并不是返回的意思，他是来接收返回值的，如果直接写return默认为true -->
</form>
</body>
</html>
B:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function test() {
var flag = true;
var usernameValue = document.getElementById("username").value;
if(usernameValue.length < 6 || usernameValue.length > 20) {
alert("用户名格式错误");
flag = false;
} else {
alert("用户名格式正确");
flag = true;
// 如果不写就默认return true
}
return flag;
}
</script>
</head>
<body>
<form action="//www.baidu.com" onsubmit="return test();"><!-- 当提交的时候执行的事件 -->
用户名：<input id="username" type="text" /><br />
密码：<input type="password" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
C:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
// 用户名和密码格式都正确的时候才允许form表单提交
function test() {
var flag = true;
var usernameValue = document.getElementById("username").value;
// 判断用户名格式
if(usernameValue.length < 6 || usernameValue.length > 20) {
alert("用户名格式错误");
flag = false;
} else {
alert("用户名格式正确");
flag = true;
// 如果不写就默认return true
}
return flag;
}
// 判断密码格式
function test2() {
var flag = false;
var pwdValue = document.getElementById("pwd").value;
if(pwdValue.length < 6 || pwdValue.length > 20) {
alert("密码格式错误");
flag = false;
} else {
alert("密码格式正确");
flag = true;
// 如果不写就默认return true
}
return flag;
}
function test3() {
var flag1 = test();// flag1可能为true也可能为false
var flag2 = test2();// flag2可能为true也可能为false
return flag1&&flag2;
}
</script>
</head>
<body>
<form action="//www.baidu.com" onsubmit="return test3();">
用户名：<input id="username" type="text" onblur="test();" /><br />
密码：<input type="password" id="pwd" onblur="test2();" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
D:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function test(forms) {
var username = forms.username;
alert(username.value);
}
</script>
</head>
<body>
<form action="" onsubmit="return test(this);">
用户名：<input type="text" id="username" name="username" />
密码：<input type="password" />
<input type="submit" value="提交" />
</form>
</body>
</html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
