java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）
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("http://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 = "http://www.baidu.com";// 在本页面上实现了一个页面跳转
window.top.location.href = "http://www.baidu.com";// 必须输全url，重新加载页面
}
</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");//JS中前面没有#
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[0].innerHTML);
} </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" />
<input type="button" value="测试" onclick="test5();"/>
<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","http://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='http://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="http://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="http://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="http://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>
java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）的更多相关文章
- js下 Day01、DOM对象，BOM浏览器对象模型
一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...
- js ajax 传送xml dom对象到服务器
客户端代码 1 <script> var isie = true; var xmlhttp = null; function createXMLHTTP() {//创建XMLXMLHttp ...
- 百万年薪python之路 -- JS的BOM与DOM对象
BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...
- js es6遍历对象的6种方法（应用中推荐前三种）
javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
- JavaScript DOM 对象
JavaScript DOM 对象 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- udp开发-dtd验证,dom解析
//博主太懒了,并没有提供范例程序 6.基于UDP开发 (1)发送方:socket->准备数据包 DatagramSocket docket = new DatagramSocket(); // ...
随机推荐
- iOS中为控件设置颜色渐变和透明度渐变
项目中用到地图设置渐变色,查找资料找到两种方法:一种设置颜色,一种设置透明度: //为颜色设置渐变效果: UIView *view = [[UIView alloc] initWithFrame:CG ...
- java 集合数组排序
//数组排序Integer arr[] = {3,4,2};Arrays.sort(arr);//默认升序Arrays.sort(arr,Comparator.reverseOrder());//传一 ...
- grunt-contrib-imagemin 图像压缩
grunt-contrib-imagemin:图像压缩 安装插件:npm install grunt-contrib-imagemin --save-dev 参数 optimizationLevel( ...
- Nagios-报错：UNKNOWN Can't connect to the JVM:
原因: 由于手动开启nrpe程序,产生临时文件,需要把产生的多余文件删除. [root@nagios ~]# ll /tmp/drwx------ 3 root root 17 Aug 12 13:4 ...
- node之events 模块，并通过实例化 EventEmitter 类来绑定和监听事件
例子来源:http://www.runoob.com/nodejs/nodejs-event-loop.html http://www.runoob.com/nodejs/nodejs-event.h ...
- Ubuntu下搜狗输入法乱码（二）
本文适用于Ubuntu 16.04,造冰箱的大熊猫@cnblogs 2018/10/25 搜狗输入法时不时出现候选字乱码的问题.参照网上所说的修改Fcitx配置中的简体中文和繁体中文转换配置的方法,无 ...
- Springboot(九).多文件上传下载文件(并将url存入数据库表中)
一． 文件上传 这里我们使用request.getSession().getServletContext().getRealPath("/static")的方式来设置文件的存储 ...
- R_Studio中对xls文件学生总成绩统计求和
我们发现这张xls表格是没有学生总分的,在xls文件中计算学生总分嫌麻烦时,可以考虑在R Studio中自定义R Script脚本来解决实际问题(计算每个学生的总成绩) .xls数据表中的数据(关键信 ...
- hive单用户多点模式配置
简介 单用户多点模式也称远程服务模式,用户非java客户端访问元数据库,在服务端启动MetaStoreServer,客户端利用Thrift协议通过MetaStoreServer访问元数据库. mysq ...
- [BZOJ2002][洛谷P3203][Hnoi2010]Bounce 弹飞绵羊（LCT维护链长）
luogu传送门 2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 16082 Solved: ...