new370.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload = function (ev) {
alert("动态注册onload事件");
}
</script>
</head>
<body>
</body>
</html>
new371.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<script type="text/javascript">
function onclickFunc() {
var usernameObj = document.getElementById("username");
var text = usernameObj.value;
var patt = /^\w{5,12}$/;
if (patt.test(text))
{
alert("用户名符合规则。");
}
else
{
alert("不符合规则。");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username">
<button onclick="onclickFunc()">校验</button>
</body>
</html>
new372.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<script type="text/javascript">
function checkAll() {
var skills = document.getElementsByName("skill");
for (var i = 0; i < skills.length; i++) {
skills[i].checked = true;
}
}
function checknotAll() {
var skills = document.getElementsByName("skill");
for (var i = 0; i < skills.length; i++) {
skills[i].checked = false;
}
}
function checkreverse() {
var skills = document.getElementsByName("skill");
for (var i = 0; i < skills.length; i++) {
if (skills[i].checked)
{
skills[i].checked = false;
}
else
{
skills[i].checked = true;
}
}
}
</script>
</head>
<body>
专业技能:
<input type="checkbox" name="skill" value="c">c语言
<input type="checkbox" name="skill" value="php">php
<input type="checkbox" name="skill" value="java">java
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checknotAll()">全不选</button>
<button onclick="checkreverse()">反选</button>
</body>
</html>
new373.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style type="text/css">
#inner{
border: 1px solid darkseagreen;
padding: 20px;
margin-bottom: 20px;
}
#inner ul{
list-style: none;
display: inline-block;
}
#inner ul li{
float: left;
border: 1px solid gray;
width: 80px;
height: 80px;
background-color: #769a99;
color: white;
font-size: 20px;
line-height: 80px;
text-align: center;
margin-right: 15px;
}
#btnlist div{
margin-top: 5px;
margin-bottom: 20px;
}
#btnlist div button{
width: 350px;
}
</style>
<script type="text/javascript">
window.onload = function () {
//
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
alert( document.getElementById("bj").innerHTML );
};
//
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var liObj = document.getElementsByTagName("li");
alert( liObj.length);
};
//
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var genders = document.getElementsByName("gender");
alert( genders.length);
};
//
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
//
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
var nodes = document.getElementById("city").childNodes;
alert( nodes.length); //空格也算一个节点
};
//
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
var phone = document.getElementById("phone");
alert( phone.firstChild.innerHTML );
};
//
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
var bj = document.getElementById("bj");
alert( bj.parentNode.innerHTML );
};
//
var btn08 = document.getElementById("btn08");
btn08.onclick = function () {
var an = document.getElementById("an");
alert( an.previousSibling.innerHTML );
};
//
var btn09 = document.getElementById("btn09");
btn09.onclick = function () {
var name = document.getElementById("username");
alert( name.value );
};
//
var btn10 = document.getElementById("btn10");
btn10.onclick = function () {
document.getElementById("username").value = "虾米大王";
};
//
var btn11 = document.getElementById("btn11");
btn11.onclick = function () {
var bj = document.getElementById("bj");
alert( bj.parentNode.innerText );
};
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="col-md-6">
<div id="total">
<div id="inner">
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>你喜欢哪款游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br>
<br>
<p>你手机的操作系统是</p>
<ul id="phone"><li>IOS</li><li id="an">安卓</li><li>windows</li></ul>
</div>
<div id="inner">
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<br>
<br>
姓名:
<input type="text" name="name" id="username" value="abcde">
</div>
</div>
</div>
<div class="col-md-6">
<div id="btnlist">
<div><button id="btn01" class="btn btn-primary">查找#bj节点</button></div>
<div><button id="btn02" class="btn btn-primary">查找所有li节点</button></div>
<div><button id="btn03" class="btn btn-primary">查找name=gender的所有节点</button></div>
<div><button id="btn04" class="btn btn-primary">查找#city下所有li节点</button></div>
<div><button id="btn05" class="btn btn-primary">返回#city下所有子节点</button></div>
<div><button id="btn06" class="btn btn-primary">返回#phone的第一个子节点</button></div>
<div><button id="btn07" class="btn btn-primary">返回#bj的父节点</button></div>
<div><button id="btn08" class="btn btn-primary">返回#an的前一个兄弟节点</button></div>
<div><button id="btn09" class="btn btn-primary">返回#username的属性值</button></div>
<div><button id="btn10" class="btn btn-primary">设置#username的属性值</button></div>
<div><button id="btn11" class="btn btn-primary">返回#bj的父节点的文本值</button></div>
</div>
</div>
</div>
</body>
</html>