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

作者: 小小一技术驿站 | 来源:发表于2019-08-11 17:49 被阅读0次

<!--内联式

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>

a{

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";

网友评论

本文标题：javaWeb技术第二篇之CSS、事件和案例

本文链接：https://www.haomeiwen.com/subject/kfpsjctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读