javaWeb技术第二篇之CSS、事件和案例

<!--内联式

CSS （层叠样式表）编辑

层叠样式表(英文全称：Cascading Style Sheets)

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

就是网页的美化技术。

入门:如何在html里面使用css

html里面的外观命名跟css外观命名会有所有不同。但效果一致

css属性:

属性1：值1;属性2：值2;属性3：值3;...

内联式:对每个元素都进行style进行样式添加.

内部式:在当前html的head的style标签里面添加

<head>

<style>

查找元素{//css属性}

</style>

</head>

外部式:要求大家敲明白

<head>

固定写法:rel="stylesheet" type="text/css" 前者是当作一个样式文件,后者是当作css代码

</head>

-->

<div >

我是div

</div>

<div >

我是div

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*对每一个option进行外观设置*/

option{

min-width: 200px;

}

</style>

</head>

<body>

</select>

</body>

</html>

选择器最终目的就是为了拿到指定的元素对象.

<!DOCTYPE html>

<html>

<head>

<style>

/*选择器就是一些选择html元素的符号*/

/*#id{//css属性}*/

#input1{ background-color: blue;}

/*.class值{//css属性 }*/

.inp{background-color: yellow;}

/*名称元素选择器:使用标签名,表示对当前页面的每个元素*/

div{background-color: red;}

/*虽然有的元素名称一样,这时不要用名称选择器*/

/*元素[属性='值']{//css代码}*/

/*input[type='password']{background-color: green;}*/

/*扩展:分组选择器,包含选择器

外部元素选择器内部元素选择器{//css代码}*/

div span{background-color: orange;}

/*分组选择器是一种共用样式的写法简化css代码

选择器1,选择器2...{//css代码}*/

/*input[type='text']{background-color: green;}*/

/*input[type='password'],input[type='text']{background-color: green;}*/

#pwd,#txt{background-color: green;}

</style>

</head>

<body>

<!--id 是元素的唯一编码

可以根据id查找出当前文档的html元素

一般是js里面使用的属性

根据class进行元素查找-->

<div>我是div</div>

<div>

<span>我是div内部的span</span>

</div>

<span>我是div外部的span</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*对每一个div进行操作*/

div {

/*设置字体颜色*/

color: red;

/*设置字体大小*/

font-size: 20px;

/*设置粗细*/

font-weight: 700;

/*设置对齐*/

text-align: center;

}

a {

/*设置删除下划线上划线*/

text-decoration: none;

}

</style>

</head>

<body>

<!--<i><font color="red" size="6" face="黑体">我是王宝强</font></i>

<div>我是王宝强</div>

<a href="#">我是宋jj</a>

<a href="#">我是宋kk</a>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

background-color: gray;

}

#div1{

background-image: url(img/015.jpg);

/*设置宽高*/

height: 400px;

width: 400px;

}

</style>

</head>

<body>

<div>我是div</div>

<div id="div1">我是div</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

/*border:宽度形状颜色;

solid实线

dotted虚线*/

/*border: 2px solid red;*/

border-top: 2px solid red;

border-right: 2px dotted red;

border-bottom: 5px dotted red;

border-left: 5px dotted green;

}

</style>

</head>

<body>

<div>我是div</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

span {

border: 1px solid red;

background-color: green;

/*缩进(内边距):内容与边界的距离*/

/*padding: 10px;*/

/*上,右,下,左*/

/*使用空格隔开*/

padding: 10px 20px 30px 40px;

/*外边距：边界与边界的距离*/

/*上,右,下,左*/

margin: 20px;

}

</style>

</head>

<body>

<br />

<span>我是span</span>

<span id="second">我是span</span>

<span id="third">我是span</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*设置元素在界面的中的位置

摆放元素就是布局

标准流/普通流：默认的显示顺序,先上后下先左后右碰到div换行

float:浮动不显示在标准上面,而有自己的一层，该层在标准流上面

left:向左浮动

right:向右浮动

clear:清除浮动:不让左边,右边，同时左右出现浮动

display*/

#div1 {

width: 150px;

height: 150px;

background-color: red;

float: right;

}

#div2 {

width: 50px;

height: 50px;

background-color: green;

float: right;

}

#div3 {

width: 100px;

height: 100px;

background-color: blue;

float: right;

}

#clear {

width: 0px;

height: 0px;

background-color: orange;

/*项目中使用both最多

当我们给clear为both设置宽高为0,0

当它与div一块使用可以替代table*/

clear: both;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.grid{

width: 60px;

height: 60px;

border: 1px solid gray;

float: left;

}

/*换行*/

#clear{

clear: both;

width: 0px;

height: 0px;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

border: 1px solid red;

/*将元素设置成内联元素/行内元素

此时宽高失效*/

display: inline;

}

span{

border: 1px solid red;

/*将元素设置成块级元素*/

display: block;

width: 100px;

height: 100px;

/*将元素隐藏*/

/*display: none;*/

/*应用场景:菜单*/

}

</style>

</head>

<body>

<div id="div1">我是div</div>

<div>我是div</div>

<span>我是span</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.grid{

width: 60px;

height: 60px;

border: 1px solid gray;

float: left;

}

/*换行*/

#clear{

clear: both;

width: 0px;

height: 0px;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

border: 1px solid red;

/*将元素设置成内联元素/行内元素

此时宽高失效*/

display: inline;

}

span{

border: 1px solid red;

/*将元素设置成块级元素*/

display: block;

width: 100px;

height: 100px;

/*将元素隐藏*/

/*display: none;*/

/*应用场景:菜单*/

}

</style>

</head>

<body>

<div id="div1">我是div</div>

<div>我是div</div>

<span>我是span</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

#outer{

border: 1px solid red;

width: 100px;

height: 100px;

}

#inner{

border: 1px solid grey;

width: 50px;

height: 50px;

/*0设置上下 auto由外部计算居中的外边距*/

margin: 0 auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*每一个div设置宽边框*/

div{

width: 100%;

/*border: 1px solid gray;*/

float: left;

}

/*清除+宽高为00等于br*/

#clear{

height: 0px;

width: 0px;

clear: both;

}

/*第一行内的三个div,是包含关系*/

#head div{

width: 33%;

text-align: center;

height: 60px;

}

#head div a{

margin: 10px;

text-decoration: none;

}

#head #head_div{

/*设置内边距*/

padding-top: 20px;

}

/*第二行开始*/

#menu{

height: 40px;

background-color: black;

padding-top: 10px;

}

#menu a{

color: white;

text-decoration: none;

font-size: 20px;

margin-left: 10px;

/*如果margin元效可以使用padding*/

}

/*第三行开始*/

#register{

width: 100%;

background-image: url(img/015.jpg);

height: 700px;

}

#register #form_div{

background-color: white;

border: 2px solid gray;

width: 60%;

height: 70%;

/*上右下左*/

margin: 5% 20% 0% 20%;

}

#register #form_div table{

margin: 0 auto;

padding-top: 20px;

}

/*第四行*/

#footer {

}

#footer img{

width: 100%;

}

/*第五行*/

p {

text-align: center;

}

</style>

</head>

<body>

<!--联想

列点

*创建表格(div+float+clear)

*css 操作元素外观

* 第一行

* 第二行

* 。。。。

实现-->

<div >

</div>

<div >

</div>

</div>

</div>

<tr>

</td>

<td align="left" colspan="2">USER REGISTER</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td align="right"><b>Email</b></font>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</div>

<div>

<p>联系我们联系我们联系我们联系我们联系我们联系我们

</p>

<p>

</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*直接在标签体中编写js代码即可*/

alert("hello js!");

</script>

alert("情绪是智慧不够的产物!");

</script>

<!--

注意事项:

加载顺序:

从上到下

从左到右

一个页面中可以出现多个script标签,可以放在任何位置(一般放在head标签中,注意正确嵌套)

外联式的script一旦是src属性,那么标签体失效.

-->

</head>

<body>

/*直接在标签体中编写js代码即可*/

alert("hello js11111!");

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//变量声明

var age = 18;

var name1 = "tom";

// alert(age);

alert(name1);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

var age = 18; //number

age = "tom"; //string

age = true; //boolean

// alert(typeof age);

var age1 = null; //object

// alert(typeof age1); 弹出一个窗口(会停止程序的运行)

var age2; //undefined

alert(typeof age2);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//等性运算符

// == != 判断数值

// alert(18==18); //true

// alert(18=="18"); //true

//一个number类型的数值和一个非数值形式的字符串不能比较

// alert(66=="B"); //false

// alert("B"=="B"); //true 比较ASCII

// alert("A"=="B"); //false

// === !== 判断数值和类型

// alert(18==="18"); //false

// alert(18!=="18"); //true

// alert("B"==="B"); //true

//关系运算符

// > < >= <=

// alert(18>19); //fasle

// alert(18>"17"); //true

//一个number类型的数值和一个非数值形式的字符串不能比较

// alert(67>"B"); //false

// alert("B">"A"); //true 比较ASCII

//逻辑运算符

//&& || !

//&&

// alert(true&&false); //false

// alert(false&&true); //fasle

// alert(true&&true); //true

//在&&运算中,如果两边都为true(对象转为的Boolean),那么运算结果为右边的值

// alert("abc"&&true); //true

// alert(true&&"abc"); //abc

//||

// alert(true||false); //true

// alert(false||true); //true

// alert(false||false); //false

//在||运算中,如果两边都为true(对象转为的Boolean),那么运算结果为左边的值

// alert("abc"||false); //abc

// alert(false||"abc"); //abc

alert("abc"||true); //abc

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

// if(18>17){

// alert("18大于17");

// }

for(var i=0;i<3;i++){

alert(i);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//编写普通函数

function add(){

alert(1+1);

}

//调用函数

// add();

//匿名函数(先编写后使用)

var add1 = function(i,j){

alert(i+j);

}

// add1(4,4);

//带有参数的函数

function add2(i,j){

alert(i+j);

}

// add2(3,3);

//返回值

function add3(i,j){

return i+j;

}

var sum = add3(5,5);

alert(sum);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn(){

alert("44944");

}

</script>

</head>

<body>

</body>

//1.获取事件源(标签对象)

var inpObj = document.getElementById("btnId");

//2.给事件源派发事件

inpObj.onclick = function(data){

alert(449444444);

}

</script>

</html>

<!DOCTYPE html>

<html>

<head>

//页面加载成功事件等页面加载完毕后再来加载页面加载成功事件中的代码片段

onload = function(){

// alert("123");

//1.获取事件源(标签对象)

var inpObj = document.getElementById("btnId");

//2.给事件源派发事件

inpObj.onclick = function(){

alert(449444444);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

/* 步骤分析:

1.确定事件(表单提交事件)

//checkForm函数必须要有返回值(Boolean)

2.编写函数(校验用户名和密码)

a.获取用户名和密码的标签对象

var obj = document.getElementById("id");

b.获取用户名和密码的值(value属性)

var userVal = obj.value;

c.校验是否为空

if(userVal==""){

alert("用户名不可为空");

return false;

}

d.返回值

return true;*/

//必须要有返回值

function checkForm(){

//a.获取用户名和密码的标签对象

var userObj = document.getElementById("username");

var pwdObj = document.getElementById("password");

//b.获取用户名和密码的值(value属性)

var userVal = userObj.value;

var pwdVal = pwdObj.value;

// alert(userVal+" "+pwdVal);

//c.校验是否为空

if(userVal==""){

alert("用户名不可为空");

return false;

}

if(pwdVal==""){

alert("密码不可为空");

return false;

}

return true;

}

</script>

<body>

<tr>

<td colspan="3">会员注册USER REGISTER</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Email:</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男"> 男

<input type="radio" name="sex" value="女" />女

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/* 步骤分析:

1.确定事件(页面加载成功事件)

onload = function(){

//设置周期执行的定时

setInterval(changeImg,2000);

}

2.编写changeImg函数(改变图片)

function changeImg(){

a.获取图片的标签对象

var imgObj = document.getElementById("id");

b.改变src属性的值

imgObj.src = "url";

}*/

onload = function(){

//设置周期执行的定时

setInterval(changeImg,2000);

}

var i = 1;

function changeImg(){

i++;

//a.获取图片的标签对象

var imgObj = document.getElementById("imgId");

//b.改变src属性的值

// alert(imgObj.src);

imgObj.src = "../img/"+i+".jpg";

//判断是否是最后一张

if(i==3){

i=0;

}

</script>

</head>

<body>

<!--

一个大div中放置8个div

-->

<div>

<!--logo

嵌套三个div

-->

<div>

</div>

<div>

</div>

<div>

</div>

<ul>

</ul>

</div>

</div>

<!--热门

将起划分成两个div

左边放图片

右边的放商品

-->

<div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

</p>

<p>

</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//周期执行定时器

// var interId = setInterval(fun,1000);

// var interId = setInterval("fun()",1000);

var i = 0;

function fun(){

i++;

alert(i);

if(i==3){

//清除周期执行定时器

clearInterval(interId);

}

//单次执行定时器

// var timeId = setTimeout(fun1,1000);

var timeId = setTimeout("fun1()",1000);

function fun1(){

i++;

alert(i);

}

//清除单次执行定时器

//clearTimeout(timeId);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

text-decoration: none;

}

.cle{

clear: both;

}

/*logo 部分的div*/

.header{

width: 100%;

}

.header div{

float:left;

width:33.33%;

height: 60px;

line-height: 50px;

}

.header a{

padding: 15px;

}

/*菜单部分*/

.menu{

width: 100%;

background-color: #000;

height: 50px;

padding-top:1px

}

.menu ul li{

list-style-type: none;

display: inline;

}

.menu a{

font-size: 25px;

color: #fff;

}

/*轮播图*/

.lunbo{

width:100%;

margin-top:10px;

margin-bottom: 10px;

}

.lunbo img{

width:100%;

}

/*热门商品*/

/*.left,.right{

float:left;

}*/

.left{

float:left;

width: 16%;

height: 500px;

}

.right{

float: left;

width:84%;

text-align: center;

height: 500px;

}

.middle{

float:left;

width: 50%;

height: 250px;

}

.item{

float:left;

width:16.66%;

height: 250px;

}

/*给广告*/

.ad1{

width: 100%;

}

.ad1 img{

width: 100%;

}

/*版权*/

.foot{

width:100%;

}

.foot p{

text-align: center;

}

</style>

/* 步骤分析:

1.确定事件(页面加载成功事件)

0.设置周期执行定时器的id

var interId;

0.设置计数器

var count = 0;

onload = function(){

//设置周期执行的定时器

interId = setInterval(showAd,4000);

}

2.编写showAd函数(展示广告)

0.计数

count++;

a.获取div标签对象

var divObj = document.getElementById("divId");

b.展示广告(显示div)

divObj.style.css属性 = "block";

c.设置单次执行定时器(用来计时)

setTimeout(hideAd,2000);

d.判断是否已经执行三次了

if(count==3){

clearInterval(interId);

}

3.编写hideAd函数(隐藏div)

a.获取div标签对象

var divObj = document.getElementById("divId");

b.展示广告(显示div)

divObj.style.css属性 = "none";*/

var interId;

var count = 0;

onload = function(){

//设置周期执行的定时器

interId = setInterval(showAd,4000);

}

//2.编写showAd函数(展示广告)

function showAd(){

//0.计数

count++;

//a.获取div标签对象

var divObj = document.getElementById("ad");

//b.展示广告(显示div)

divObj.style.display = "block";

//c.设置单次执行定时器(用来计时)

setTimeout("hideAd()",2000);

//d.判断是否已经执行三次了

if(count==3){

clearInterval(interId);

}

function hideAd(){

//a.获取div标签对象

var divObj = document.getElementById("ad");

//b.展示广告(显示div)

divObj.style.display = "none";

}

</script>

</head>

<body>

</div>

<!--

一个大div中放置8个div

-->

<div>

<!--logo

嵌套三个div

-->

<div>

</div>

<div>

</div>

<div>

</div>

<ul>

</ul>

</div>

</div>

<!--热门

将起划分成两个div

左边放图片

右边的放商品

-->

<div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

</p>

<p>

</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn1(){

// history.forward();

history.go(1);

}

</script>

</head>

<body>

我是a页面<br />

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn2(){

// history.back();

history.go(-1);

}

</script>

</head>

<body>

我是b页面<br />

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn3(){

alert(location.href);

}

function btn(){

location.href = "../案例3-弹出广告.html";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

onload = function(){

document.getElementById("inp").onclick = function(){

window.close();

}

</script>

</head>

<body>

我是a页面

</body>

</script>

</html>

<!DOCTYPE html>

<html>

<head>

//打开a页面

function btn(){

window.open("a.html");

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//对话框

// var mes = window.prompt("请输入你的姓名","tom");

// alert(mes);

//确认框

var message = confirm("你确定付款吗");

alert(message);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//获取文本框的值

function getVal(){

//1.获取要操作的标签对象

var inpObj = document.getElementById("inp");

//2.获取value属性的值

alert(inpObj.value);

}

//设置value属性的值

function setVal(){

//1.获取要操作的标签对象

var inpObj = document.getElementById("inp");

//2.设置value的值

inpObj.value = "jerry";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//获取标签体的内容

function getVal(){

//1.获取要操作的标签对象

var spObj = document.getElementById("sp");

//2.获取标签体的内容

alert(spObj.innerHTML);

}

//设置标签体的内容

function setVal(){

//1.获取要操作的标签对象

var spObj = document.getElementById("sp");

//2.设置标签体的内容

spObj.innerHTML += "<font color='red'>如今的现在早已不是曾经说好的以后</font>";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//校验

function checkInp(){

//0.获取要校验的值

var val = document.getElementById("inp").value;

//校验

//1.编写正则表达式

var zz = /^[a-z0-9_-]{3,16}$/; //object

var kzz = /^\s*$/;

// alert(typeof zz);

//2.校验值

// var flag = zz.test(val);

// alert(flag);

// alert(kzz.test(val));

if(kzz.test(val)){

alert("用户名不可为空");

}else if(!zz.test(val)){

alert("用户名不符合格式");

}else{

alert("满足格式....");

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//获得焦点的时候要触发的函数

function focusFun(){

document.getElementById("sp").innerHTML = "输入框获得焦点";

}

//失去焦点的时候要触发的函数

function blurFun(){

document.getElementById("sp").innerHTML = "输入失去焦点了啊....";

}

//内容改变的时候要触发的函数

function changeFun(){

alert("输入框的内容改变了...");

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

#e02, #e022 {

border: 1px solid #000000;

height: 200px;

width: 200px;

}

</style>

// 页面加载事件：当整个html页面加载成功调用

window.onload = function(){

// 文本框事件

var e01 = document.getElementById("e01");

e01.onfocus = function(){

html("textMsg","文本框获得焦点：focus");

}

e01.onblur = function(){

html("textMsg","文本框失去焦点：blur");

}

e01.onkeydown = function(){

html("textMsg","键盘按下：keydown；");

}

e01.onkeypress = function(event){

var event = event || window.event;

append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");

}

e01.onkeyup = function(){

append("textMsg","键盘弹起：keyup；");

}

// 鼠标事件

var e02 = document.getElementById("e02");

e02.onmouseover = function(){

html("divMsg","鼠标移上：mouseover");

}

e02.onmouseout = function(){

html("divMsg","鼠标移出：mouseout");

}

var e022 = document.getElementById("e022");

e022.onmousedown = function(){

html("divMsg2","鼠标按下：mousedown");

}

e022.onmouseup = function(){

html("divMsg2","鼠标弹起：mouseup");

}

// 按钮事件

var e03 = document.getElementById("e03");

e03.onclick = function () {

html("buttonMsg","单击：click");

};

e03.ondblclick= function () {

html("buttonMsg","双击：dblclick");

};

/**

* 指定位置显示指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function html(objId,text){

document.getElementById(objId).innerHTML = text;

}

/**

* 指定位置追加指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function append(objId,text){

document.getElementById(objId).innerHTML += text;

}

</script>

</head>

<body>

<hr/>

<div id="e02" >鼠标移上来试试</div><span id="divMsg"></span>

<hr/>

<div id="e022" >鼠标移上来点击试试</div><span id="divMsg2"></span>

<hr/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn(){

/*通过id选择器获取文本框的值*/

var userObj = document.getElementById("usernameId");

// alert(userObj.value);

/*获取所有span标签中的值*/

// var spanObjArr = document.getElementsByTagName("span");

// for(var i=0;i<spanObjArr.length;i++){

// alert(spanObjArr[i].innerHTML);

// }

/*获取所有class为spanClass的元素对象*/

// var spanObjArr1 = document.getElementsByClassName("spanClass");

// for(var i=0;i<spanObjArr1.length;i++){

// alert(spanObjArr1[i].innerHTML);

// }

/*获取name为hobby的元素对象*/

var hobbyObjArr = document.getElementsByName("hobby");

alert(hobbyObjArr.length);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn(){

// //创建一个标题元素节点,标题名称客,并将它加到div内部 <h1>客</h1>

// //创建元素节点

// var ele = document.createElement("h1");//<h1></h1>

// //创建文本节点

// var eleText = document.createTextNode("客");//客

// //将文本节点添加到指定的节点中

// ele.appendChild(eleText);//<h1>客</h1>

// //获取div元素对象

// var divObj = document.getElementById("di");

// divObj.appendChild(ele);

var divObj = document.getElementById("di");

divObj.innerHTML+="<h1>客</h1>";

}

function btn1(){

//删除div元素中的子节点

var divObj = document.getElementById("di");

// divObj.removeChild(divObj.childNodes[0]);

// divObj.innerHTML = "";

divObj.remove();

}

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function btn(){

var inpObj = document.getElementById("inp");

/*给标签对象设置属性和值*/

// inpObj.setAttribute("value","jerry");

inpObj.value = "jerry";

}

function btn1(){

var inpObj = document.getElementById("inp");

// var Val = inpObj.getAttribute("value");

// alert(Val);

alert(inpObj.value);

}

function btn2(){

var inpObj = document.getElementById("inp");

inpObj.removeAttribute("value");

// inpObj.value = "";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

var arr = new Array();

var arr1 = new Array(3);

var arr2 = new Array(1,2,3);

arr[0] = 11;

arr[1] = "tom";

arr[2] = true;

// alert(arr.length);

// alert(arr.join("#"));//遍历数组,在数组每个元素之间加入#

// alert(arr);

// var ele = arr.shift();

// alert(ele);

var l = arr.unshift(5,3);

alert(arr);

// alert(l);

// alert(arr);

// alert(arr.sort());

// alert(arr.reverse());

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//String

var str = "[www.baidu.com]";

// alert(str.length);

// alert(str.substring(1,str.length-1));

// alert(str.slice(1,-1));

//Boolean

// alert(Boolean("abc"));

//Math

// alert(Math.PI);

//Date

// alert(new Date().toLocaleString());

var str = "188.8元";

// alert(parseInt(str));

// alert(parseFloat(str));

// alert(Number(str)); //NaN

var str1 = "www.baidu.com/引用数据类型 .html";

var str2 = encodeURI(str1);

document.write(str2+"<br/>");

var str3 = decodeURI(str2);

document.write(str3);

var str4 = "alert('hello js')";

eval(str4);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

/* 步骤分析:

1.确定事件(表单提交事件)

2.编写checkForm函数

function checkForm(){

//0/设置全局开关

var flag = true;

//a.获取用户名和密码输入框对象

var 对象 = document.getElementById("id");

//b.获取用户名和密码的值

var val = 对象.value;

//c.编写正则表达式

//d.校验

if(zz.test(val)){

//校验不通过

给对应的span标签中填写提示信息

flag = false;

}else{

//校验通过

给对应的span标签中填写提示信息

}

//e.返回值

return flag;

}*/

onload = function(){

document.getElementById("formId").onsubmit=function(){

//设置全局开关

var flag = true;

//a.获取用户名和密码输入框对象

var userObj = document.getElementById("username");

var pwdObj = document.getElementById("password");

//b.获取用户名和密码的值

var userVal = userObj.value;

var pwdVal = pwdObj.value;

// alert(userVal+" "+pwdVal);

//c.编写正则表达式

var zz = /^[a-z0-9_-]{3,16}$/; //object

var kzz = /^\s*$/;

//d.校验

//用户名

if(kzz.test(userVal)){

//校验不通过

//给对应的span标签中填写提示信息

//获取span标签对象

document.getElementById("username_msg").innerHTML = "用户名不可为空";

flag = false;

}else if(!zz.test(userVal)){

//获取span标签对象

document.getElementById("username_msg").innerHTML = "用户名的格式不合法";

flag = false;

}else{

//获取span标签对象

document.getElementById("username_msg").innerHTML = "✔";

}

//密码

if(kzz.test(pwdVal)){

//校验不通过

//给对应的span标签中填写提示信息

//获取span标签对象

document.getElementById("password_msg").innerHTML = "<font color='#f00'>密码不可为空</font>";

flag = false;

}else if(!zz.test(pwdVal)){

//获取span标签对象

document.getElementById("password_msg").innerHTML = "密码的格式不合法";

flag = false;

}else{

document.getElementById("password_msg").innerHTML = "✔";

}

return flag;

}

</script>

<body>

<tr>

<td colspan="3">会员注册USER REGISTER</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Email:</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男"> 男

<input type="radio" name="sex" value="女" />女

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/* 步骤分析:

1.确定事件(页面加载成功事件)

onload = function(){

}

2.编写匿名函数

a.获取当前页面所有行对象

var trObjArr = document.getElementsByTagName("tr");

b.遍历数组对象,给计数行和偶数行添加不同的背景颜色

for(var i=0;i<trObjArr.length;i++){

if(i%2==0){

trObjArr[i].style.backgroundColor = "颜色";

}else{

trObjArr[i].style.backgroundColor = "颜色";

}

}*/

onload = function (){

//a.获取当前页面所有行对象

var trObjArr = document.getElementsByTagName("tr");

//b.遍历数组对象,给计数行和偶数行添加不同的背景颜色

for(var i=1;i<trObjArr.length;i++){

if(i%2==0){

trObjArr[i].style.backgroundColor = "#ff0";

}else{

trObjArr[i].style.backgroundColor = "#f0f";

}

</script>

</head>

<body>

</tr>

<tr>

<td>手机数码类商品</td>

</tr>

<tr>

<td>电脑办公类商品</td>

</tr>

<tr>

<td>鞋靴箱包类商品</td>

</tr>

<tr>

<td>家居饰品类商品</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/* 步骤分析:

1.确定事件(单击事件)

给头部的复选框添加单击事件

2.编写函数

a.获取头部复选框状态

对象.checked;

b.获取其他的复选框对象

c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性*/

function checkAll(flag){

// alert(flag);

//a.获取头部复选框状态

// alert(obj.checked);

//b.获取其他的复选框对象

var elseTrObjArr = document.getElementsByClassName("itemSelect");

//c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性

for(var i=0;i<elseTrObjArr.length;i++){

elseTrObjArr[i].checked = flag;

}

</script>

</head>

<body>

<tr>

</tr>

</tr>

<tr>

<td>手机数码类商品</td>

</tr>

<tr>

<td>电脑办公类商品</td>

</tr>

<tr>

<td>鞋靴箱包类商品</td>

</tr>

<tr>

<td>家居饰品类商品</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

// 定义二维数组:

var arr = new Array(4);

arr[0] = new Array("石家庄","邯郸","保定","秦皇岛");

arr[1] = new Array("郑州市","洛阳市","安阳市","南阳市");

arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");

arr[3] = new Array("长春市","吉林市","四平市","通化市");

</script>

/*步骤分析:

1.确定事件(改变事件)

给省份的下拉选添加改变事件

2.编写changePro函数

function changePro(){

a.获取选中省份所对应的市数组(value)

var cityArr = arr[value];

b.获取市的下拉选对象

var cityObj = document.getElementById("cityId");

c.遍历市数组,将每一个市拼成option追加到市的下拉选中

cityObj.innerHTML += "";

}*/

function changePro(index){

// alert(index);

// a.获取选中省份所对应的市数组(value)

var cityArr = arr[index];

//b.获取市的下拉选对象

var cityObj = document.getElementById("city");

//初始化

cityObj.innerHTML = "<option>=请选择=</option>";

//c.遍历市数组,将每一个市拼成option追加到市的下拉选中

for(var i=0;i<cityArr.length;i++){

cityObj.innerHTML += "<option>"+cityArr[i]+"</option>";

}

</script>

</head>

<body>

姓名:<input name="username" value="xuduoduo"/><br>

密码:<input type="password" name="password" value="123"><br>

性别:<input type="radio" name="sex" value="1" checked="checked">男

<input type="radio" name="sex" value="0">女

<br>

爱好:<input type="checkbox" name="hobby" value="eat">吃

<input type="checkbox" name="hobby" value="drink" checked="checked">喝

<input type="checkbox" name="hobby" value="sleep" checked="checked">睡

<br>

头像:<input type="file" name="photo"><br>

籍贯:

</select>

</select>

<br>

自我介绍:

<br>

</form>

</body>

</html>

<!--

-->

案例1-注册页面的简单校验

需求分析:

当表单提交的时候,对用户名和密码进行校验,校验是否为空,如果用户名和密码为空,则弹框提示并不允许表单提交.反之允许

技术分析:

javaScript:

//////////////

步骤分析:

1.确定事件(表单提交事件)

//checkForm函数必须要有返回值(Boolean)

2.编写函数(校验用户名和密码)

a.获取用户名和密码的标签对象

var obj = document.getElementById("id");

b.获取用户名和密码的值(value属性)

var userVal = obj.value;

c.校验是否为空

if(userVal==""){

alert("用户名不可为空");

return false;

}

d.返回值

return true;

案例2-轮播图

需求分析:

页面加载成功后,每隔2秒切换一张图片

技术分析:

javaScript:

定时器

///////////

步骤分析:

1.确定事件(页面加载成功事件)

onload = function(){

//设置周期执行的定时

setInterval(changeImg,2000);

}

2.编写changeImg函数(改变图片)

function changeImg(){

a.获取图片的标签对象

var imgObj = document.getElementById("id");

b.改变src属性的值

imgObj.src = "url";

}

案例3-弹出广告

需求分析:

页面加载成功后,每隔4秒展示一次广告,广告时间2秒钟,以此轮询3次

技术分析:

定时器

/////////////////////

步骤分析:

1.确定事件(页面加载成功事件)

0.设置周期执行定时器的id

var interId;

0.设置计数器

var count = 0;

onload = function(){

//设置周期执行的定时器

interId = setInterval(showAd,4000);

}

2.编写showAd函数(展示广告)

0.计数

count++;

a.获取div标签对象

var divObj = document.getElementById("divId");

b.展示广告(显示div)

divObj.style.css属性 = "block";

c.设置单次执行定时器(用来计时)

setTimeout(hideAd,2000);

d.判断是否已经执行三次了

if(count==3){

clearInterval(interId);

}

3.编写hideAd函数(隐藏div)

a.获取div标签对象

var divObj = document.getElementById("divId");

b.展示广告(显示div)

divObj.style.css属性 = "none";

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343

javaWeb技术第二篇之CSS、事件和案例

推荐阅读更多精彩内容