javaWeb技術(shù)第二篇之CSS涎才、事件和案例

<!--內(nèi)聯(lián)式

CSS （層疊樣式表）編輯

層疊樣式表(英文全稱：Cascading Style Sheets)

CSS不僅可以靜態(tài)地修飾網(wǎng)頁娜睛，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化榄攀。

就是網(wǎng)頁的美化技術(shù)。

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

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

css屬性:

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

內(nèi)聯(lián)式:對每個元素都進行style進行樣式添加.

內(nèi)部式:在當前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進行外觀設(shè)置*/

option{

min-width: 200px;

}

</style>

</head>

<body>

? ? ? ? <select size="3"? >

? ? ? ? <option>小班</option>

? ? ? ? <option>中班</option>

? ? ? ? <option>大班</option>

? ? ? ? </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;}*/

/*擴展:分組選擇器,包含選擇器

外部元素選擇器? 內(nèi)部元素選擇器{//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 是元素的唯一編碼

可以根據(jù)id查找出當前文檔的html元素

一般是js里面使用的屬性

根據(jù)class進行元素查找-->

? ? ? ? <input id="input1" value="id選擇器"/><br />

? ? ? ? <input class="inp" value="input選擇器"/><br />

? ? ? ? <div>我是div</div>

? ? ? ? <input id="pwd" type="password" /><br />

? ? ? ? <input id="txt" type="text" /><br />

? ? ? ? <div>

? ? ? ? <span>我是div內(nèi)部的span</span>

? ? ? ? </div>

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

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*對每一個div進行操作*/

div {

/*設(shè)置字體顏色*/

color: red;

/*設(shè)置字體大小*/

font-size: 20px;

/*設(shè)置粗細*/

font-weight: 700;

/*設(shè)置對齊*/

text-align: center;

}

a {

/*設(shè)置刪除下劃線上劃線*/

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

/*設(shè)置寬高*/

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;

/*縮進(內(nèi)邊距):內(nèi)容與邊界的距離*/

/*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>

/*設(shè)置元素在界面的中的位置

擺放元素就是布局

標準流/普通流：默認的顯示順序,先上后下先左后右碰到div換行

float:浮動不顯示在標準上面,而有自己的一層逗物，該層在標準流上面

left:向左浮動

right:向右浮動

clear:清除浮動:不讓左邊,右邊搬卒，同時左右出現(xiàn)浮動

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設(shè)置寬高為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;

/*將元素設(shè)置成內(nèi)聯(lián)元素/行內(nèi)元素

此時寬高失效*/

display: inline;

}

span{

border: 1px solid red;

/*將元素設(shè)置成塊級元素*/

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;

/*將元素設(shè)置成內(nèi)聯(lián)元素/行內(nèi)元素

此時寬高失效*/

display: inline;

}

span{

border: 1px solid red;

/*將元素設(shè)置成塊級元素*/

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設(shè)置上下 auto由外部計算居中的外邊距*/

margin: 0 auto;

}

</style>

</head>

<body>

? ? ? ? ? <div id="outer">

? ? ? ? ? <div id="inner"></div>

? ? ? ? ? </div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/*每一個div設(shè)置寬邊框*/

div{

width: 100%;

/*border: 1px solid gray;*/

float: left;

}

/*清除+寬高為00等于br*/

#clear{

height: 0px;

width: 0px;

clear: both;

}

/*第一行內(nèi)的三個div,是包含關(guān)系*/

#head div{

width: 33%;

text-align: center;

height: 60px;

}

#head div a{

margin: 10px;

text-decoration: none;

}

#head #head_div{

/*設(shè)置內(nèi)邊距*/

? ? 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>

<!--聯(lián)想

列點

*創(chuàng)建表格(div+float+clear)

*css 操作元素外觀

* 第一行

* 第二行

* 。敬察。秀睛。。

實現(xiàn)-->

<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>聯(lián)系我們聯(lián)系我們聯(lián)系我們聯(lián)系我們聯(lián)系我們聯(lián)系我們

</p>

<p>

</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*直接在標簽體中編寫js代碼即可*/

alert("hello js!");

</script>

alert("情緒是智慧不夠的產(chǎn)物!");

</script>

<!--

注意事項:

加載順序:

從上到下

從左到右

一個頁面中可以出現(xiàn)多個script標簽,可以放在任何位置(一般放在head標簽中,注意正確嵌套)

外聯(lián)式的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>

//等性運算符

// == != 判斷數(shù)值

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

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

//一個number類型的數(shù)值和一個非數(shù)值形式的字符串不能比較

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

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

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

// === !==? 判斷數(shù)值和類型

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

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

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

//關(guān)系運算符

// > < >= <=

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

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

//一個number類型的數(shù)值和一個非數(shù)值形式的字符串不能比較

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

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

//邏輯運算符

//&& || !

//&&

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

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

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

//在&&運算中,如果兩邊都為true(對象轉(zhuǎn)為的Boolean),那么運算結(jié)果為右邊的值

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

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

//||

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

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

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

//在||運算中,如果兩邊都為true(對象轉(zhuǎn)為的Boolean),那么運算結(jié)果為左邊的值

// 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>

//編寫普通函數(shù)

function add(){

alert(1+1);

}

//調(diào)用函數(shù)

// add();

//匿名函數(shù)(先編寫后使用)

var add1 = function(i,j){

alert(i+j);

}

// add1(4,4);

//帶有參數(shù)的函數(shù)

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.給事件源派發(fā)事件

inpObj.onclick = function(data){

alert(449444444);

}

</script>

</html>

<!DOCTYPE html>

<html>

<head>

//頁面加載成功事件等頁面加載完畢后再來加載頁面加載成功事件中的代碼片段?

onload = function(){

// alert("123");

//1.獲取事件源(標簽對象)

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

//2.給事件源派發(fā)事件

inpObj.onclick = function(){

alert(449444444);

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

/* 步驟分析:

1.確定事件(表單提交事件)

//checkForm函數(shù)必須要有返回值(Boolean)

2.編寫函數(shù)(校驗用戶名和密碼)

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(){

//設(shè)置周期執(zhí)行的定時

setInterval(changeImg,2000);

}

2.編寫changeImg函數(shù)(改變圖片)

function changeImg(){

a.獲取圖片的標簽對象

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

b.改變src屬性的值

imgObj.src = "url";

}*/

onload = function(){

//設(shè)置周期執(zhí)行的定時

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>

<img? src="../img/title2.jpg" />

</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>

//周期執(zhí)行定時器

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

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

var i = 0;

function fun(){

i++;

alert(i);

if(i==3){

//清除周期執(zhí)行定時器

clearInterval(interId);

}

//單次執(zhí)行定時器

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

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

function fun1(){

i++;

alert(i);

}

//清除單次執(zhí)行定時器

//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%;

}

/*版權(quán)*/

.foot{

width:100%;

}

.foot p{

text-align: center;

}

</style>

/* 步驟分析:

1.確定事件(頁面加載成功事件)

0.設(shè)置周期執(zhí)行定時器的id

var interId;

0.設(shè)置計數(shù)器

var count = 0;

onload = function(){

//設(shè)置周期執(zhí)行的定時器

interId = setInterval(showAd,4000);

}

2.編寫showAd函數(shù)(展示廣告)

0.計數(shù)

count++;

a.獲取div標簽對象

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

b.展示廣告(顯示div)

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

c.設(shè)置單次執(zhí)行定時器(用來計時)

setTimeout(hideAd,2000);

d.判斷是否已經(jīng)執(zhí)行三次了

if(count==3){

clearInterval(interId);

}

3.編寫hideAd函數(shù)(隱藏div)

a.獲取div標簽對象

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

b.展示廣告(顯示div)

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

var interId;

var count = 0;

onload = function(){

//設(shè)置周期執(zhí)行的定時器

interId = setInterval(showAd,4000);

}

//2.編寫showAd函數(shù)(展示廣告)

function showAd(){

//0.計數(shù)

count++;

//a.獲取div標簽對象

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

//b.展示廣告(顯示div)

divObj.style.display = "block";

//c.設(shè)置單次執(zhí)行定時器(用來計時)

setTimeout("hideAd()",2000);

//d.判斷是否已經(jīng)執(zhí)行三次了

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

}

//設(shè)置value屬性的值

function setVal(){

//1.獲取要操作的標簽對象

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

//2.設(shè)置value的值

inpObj.value = "jerry";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

//獲取標簽體的內(nèi)容

function getVal(){

//1.獲取要操作的標簽對象

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

//2.獲取標簽體的內(nèi)容

alert(spObj.innerHTML);

}

//設(shè)置標簽體的內(nèi)容

function setVal(){

//1.獲取要操作的標簽對象

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

//2.設(shè)置標簽體的內(nèi)容

spObj.innerHTML += "<font color='red'>如今的現(xiàn)在早已不是曾經(jīng)說好的以后</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>

//獲得焦點的時候要觸發(fā)的函數(shù)

function focusFun(){

document.getElementById("sp").innerHTML = "輸入框獲得焦點";

}

//失去焦點的時候要觸發(fā)的函數(shù)

function blurFun(){

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

}

//內(nèi)容改變的時候要觸發(fā)的函數(shù)

function changeFun(){

alert("輸入框的內(nèi)容改變了...");

}

</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頁面加載成功調(diào)用

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(){

// //創(chuàng)建一個標題元素節(jié)點,標題名稱客,并將它加到div內(nèi)部 <h1>客</h1>

// //創(chuàng)建元素節(jié)點

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

// //創(chuàng)建文本節(jié)點

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

// //將文本節(jié)點添加到指定的節(jié)點中

// 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元素中的子節(jié)點

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

/*給標簽對象設(shè)置屬性和值*/

// 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("#"));//遍歷數(shù)組,在數(shù)組每個元素之間加入#

// 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/引用數(shù)據(jù)類型 .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函數(shù)

function checkForm(){

//0/設(shè)置全局開關(guān)

var flag = true;

//a.獲取用戶名和密碼輸入框?qū)ο?/p>

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(){

//設(shè)置全局開關(guān)

var flag = true;

//a.獲取用戶名和密碼輸入框?qū)ο?/p>

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.編寫匿名函數(shù)

a.獲取當前頁面所有行對象

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

b.遍歷數(shù)組對象,給計數(shù)行和偶數(shù)行添加不同的背景顏色

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.遍歷數(shù)組對象,給計數(shù)行和偶數(shù)行添加不同的背景顏色

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>

</tr>

<tr>

<td>電腦辦公類商品</td>

</tr>

<tr>

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

</tr>

<tr>

<td>家居飾品類商品</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/* 步驟分析:

1.確定事件(單擊事件)

給頭部的復選框添加單擊事件

2.編寫函數(shù)

a.獲取頭部復選框狀態(tài)

對象.checked;

b.獲取其他的復選框?qū)ο?/p>

c.遍歷其他的復選框?qū)ο髷?shù)組,分別給每一個復選框?qū)ο笤O(shè)置checked屬性*/

function checkAll(flag){

// alert(flag);

//a.獲取頭部復選框狀態(tài)

// alert(obj.checked);

//b.獲取其他的復選框?qū)ο?/p>

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

//c.遍歷其他的復選框?qū)ο髷?shù)組,分別給每一個復選框?qū)ο笤O(shè)置checked屬性

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

elseTrObjArr[i].checked = flag;

}

</script>

</head>

<body>

<tr>

</tr>

</tr>

<tr>

</tr>

<tr>

<td>電腦辦公類商品</td>

</tr>

<tr>

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

</tr>

<tr>

<td>家居飾品類商品</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

// 定義二維數(shù)組:

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函數(shù)

function changePro(){

a.獲取選中省份所對應的市數(shù)組(value)

var cityArr = arr[value];

b.獲取市的下拉選對象

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

c.遍歷市數(shù)組,將每一個市拼成option追加到市的下拉選中

cityObj.innerHTML += "";

}*/

function changePro(index){

// alert(index);

// a.獲取選中省份所對應的市數(shù)組(value)

var cityArr = arr[index];

//b.獲取市的下拉選對象

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

//初始化

cityObj.innerHTML = "<option>=請選擇=</option>";

//c.遍歷市數(shù)組,將每一個市拼成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-注冊頁面的簡單校驗

需求分析:

當表單提交的時候,對用戶名和密碼進行校驗,校驗是否為空,如果用戶名和密碼為空,則彈框提示并不允許表單提交.反之允許

技術(shù)分析:

javaScript:

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

步驟分析:

1.確定事件(表單提交事件)

//checkForm函數(shù)必須要有返回值(Boolean)

2.編寫函數(shù)(校驗用戶名和密碼)

a.獲取用戶名和密碼的標簽對象

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

b.獲取用戶名和密碼的值(value屬性)

var userVal = obj.value;

c.校驗是否為空

if(userVal==""){

alert("用戶名不可為空");

return false;

}

d.返回值

return true;

案例2-輪播圖

需求分析:

頁面加載成功后,每隔2秒切換一張圖片

技術(shù)分析:

javaScript:

定時器

///////////

步驟分析:

1.確定事件(頁面加載成功事件)

onload = function(){

//設(shè)置周期執(zhí)行的定時

setInterval(changeImg,2000);

}

2.編寫changeImg函數(shù)(改變圖片)

function changeImg(){

a.獲取圖片的標簽對象

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

b.改變src屬性的值

imgObj.src = "url";

}

案例3-彈出廣告

需求分析:

頁面加載成功后,每隔4秒展示一次廣告,廣告時間2秒鐘,以此輪詢3次

技術(shù)分析:

定時器

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

步驟分析:

1.確定事件(頁面加載成功事件)

0.設(shè)置周期執(zhí)行定時器的id

var interId;

0.設(shè)置計數(shù)器

var count = 0;

onload = function(){

//設(shè)置周期執(zhí)行的定時器

interId = setInterval(showAd,4000);

}

2.編寫showAd函數(shù)(展示廣告)

0.計數(shù)

count++;

a.獲取div標簽對象

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

b.展示廣告(顯示div)

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

c.設(shè)置單次執(zhí)行定時器(用來計時)

setTimeout(hideAd,2000);

d.判斷是否已經(jīng)執(zhí)行三次了

if(count==3){

clearInterval(interId);

}

3.編寫hideAd函數(shù)(隱藏div)

a.獲取div標簽對象

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

b.展示廣告(顯示div)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末允瞧，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子蛮拔，更是在濱河造成了極大的恐慌述暂，老刑警劉巖，帶你破解...
沈念sama閱讀 216,997評論 6贊 502
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件建炫，死亡現(xiàn)場離奇詭異畦韭，居然都是意外死亡，警方通過查閱死者的電腦和手機肛跌，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,603評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門艺配，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人衍慎，你說我怎么就攤上這事转唉。” “怎么了稳捆？”我有些...
開封第一講書人閱讀 163,359評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵赠法，是天一觀的道長。經(jīng)常有香客問我眷柔，道長期虾，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,309評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任驯嘱，我火速辦了婚禮，結(jié)果婚禮上喳坠，老公的妹妹穿的比我還像新娘鞠评。我一直安慰自己，他們只是感情好壕鹉，可當我...
茶點故事閱讀 67,346評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布剃幌。她就那樣靜靜地躺著聋涨，像睡著了一般。火紅的嫁衣襯著肌膚如雪负乡。梳的紋絲不亂的頭發(fā)上牍白，一...
開封第一講書人閱讀 51,258評論 1贊 300
城市分裂傳說
那天，我揣著相機與錄音抖棘，去河邊找鬼茂腥。笑死，一個胖子當著我的面吹牛切省，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 40,122評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼召耘，長吁一口氣：“原來是場噩夢啊……” “哼国章！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起芙盘，我...
開封第一講書人閱讀 38,970評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤驯用，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后儒老，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝴乔，經(jīng)...
沈念sama閱讀 45,403評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,596評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年贷盲，在試婚紗的時候發(fā)現(xiàn)自己被綠了淘这。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,769評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡巩剖，死狀恐怖铝穷，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情佳魔，我是刑警寧澤曙聂，帶...
沈念sama閱讀 35,464評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站鞠鲜，受9級特大地震影響宁脊，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜贤姆，卻給世界環(huán)境...
茶點故事閱讀 41,075評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一榆苞、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧霞捡，春花似錦坐漏、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,705評論 0贊 22
一樁弒父案赊琳，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽街夭。三九已至，卻和暖如春躏筏，著一層夾襖步出監(jiān)牢的瞬間板丽，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,848評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工趁尼，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留埃碱，地道東北人。一個月前我還...
沈念sama閱讀 47,831評論 2贊 370
代替公主和親
正文我出身青樓弱卡，卻偏偏與公主長得像乃正，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子婶博，可洞房花燭夜當晚...
茶點故事閱讀 44,678評論 2贊 354

javaWeb技術(shù)第二篇之CSS、事件和案例

javaWeb技術(shù)第二篇之CSS涎才、事件和案例

推薦閱讀更多精彩內(nèi)容