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(); // ...
随机推荐
- datax二次开发
从hive抽取数据,写入hbase 一.datax插件hbase12xwriter开发 查看datax源码,发现有hbase094xwriter和hbase11xwriter源码,说明datax支持h ...
- shell更改xml中的指定值
sed -i 's;<id>.*<\/id>;<id>新内容<\/id>;g' your.xml
- Memcached安装部署
Memcached安装部署 发表回复 简述: Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供 ...
- C# 常用方法——图片转base64字符串
其他扩展方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// Image 转成 base64 / ...
- C# 2.0
序言 泛型 为什么需要泛型? 分部类型 分部类和方法 partial 匿名方法 使用Delegate的时候很多时候没必要使用一个普通的方法,因为这个方法只有这个Delegate会用,并且只用一次,这时 ...
- Word：表格前添加新行 + 删除表格后的空行
本文适用于Word 2007 + Windows 7,造冰箱的大熊猫@cnblogs 2018/8/3 近日新学(百度到)两条新Word操作,记录下来以备查询 1.在表格前添加新行 场景:有没有遇到过 ...
- Linux—查看路由
下面那些命令可以用来查看Linux主机的默认路由() A.route B.ifconfig C.ping D.netstat 分析: A.route命令用来显示目前本机路由表的内容,并且还可以针对路由 ...
- 2-sat基础详解
(大量引用<2-SAT解法浅析 -by 华中师大一附中 赵爽><由对称性解2-SAT问题> Great_Influence关于P4782 [模板]2-SAT 问题的题解.在此对 ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- MySQL格式化小数点为百分号并保留2为小数
#colname为字段名字,CONCAT的作用是把小数点转成百分号,TRUNCATE的作用是保留百分号的小数点成几位 SELECT CONCAT(TRUNCATE(colname*100,2),'%' ...