国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
JavaScript教程--從入門到精通 7
要實現(xiàn)動態(tài)交互,必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。

一、窗體基礎(chǔ)知識
  窗體對象可以使設(shè)計人員能用窗體中不同的元素與客戶機用戶相交互,而用不著在之前首先進(jìn)行數(shù)據(jù)輸入,就可以實現(xiàn)動態(tài)改變Web文檔的行為。

1、什么是窗體對象
窗體(Form):它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體,使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>

  在Forms[0]中共有三個基本元素,而Forms[1]中只有兩個元素。
  窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體,它封裝了相關(guān)的HTML代碼:
<Form
Name ="表的名稱"
Target ="指定信息的提交窗口"
action ="接收窗體程序?qū)?yīng)的URL"
Method =信息數(shù)據(jù)傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
 

2、窗體對象的方法
  窗體對象的方法只有一個--submit()方法,該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式:
document.mytest.submit()
 
3、窗體對象的屬性
  窗體對象中的屬性主要包括以下:elements name action target encoding method.
  除Elements外,其它幾個均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài),這通常是單個窗體標(biāo)識;而elements常常是多個窗體元素值的數(shù)組,例:
elements[0].Mytable.elements[1]
 
4、訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實現(xiàn):
(1)通過訪問窗體
  在窗體對象的屬性中首先必須指定其窗體名,而后就可以通過下列標(biāo)識訪問窗體如:document.Mytable()。
(2)通過數(shù)組來訪問窗體
  除了使用窗體名來訪問窗體外,還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點,因窗體對象是由瀏覽器環(huán)境的提供的,而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。所以可通過下列格式實現(xiàn)窗體對象的訪問:
document.forms[0]
document.forms[1]
document.forms[2]...
 
5、引用窗體的先決條件
  在JavaScript中要對窗體引用的條件是:必須先在頁面中用標(biāo)識創(chuàng)建窗體,并將定義窗體部分放在引用之前。
 
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素,必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName (窗體名.元素名或數(shù)組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)
 
下面分別介紹:
 
1、Text單行單列輸入元素
 功能:對Text標(biāo)識中的元素實施有效的控制。
 基本屬性:
Name:設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。
defaultvalue:包括Text元素的默認(rèn)值
 基本方法:
blur():將當(dāng)前焦點移到后臺。
select():加亮文字。
 主要事件:
onFocus:當(dāng)Text獲得焦點時,產(chǎn)生該事件。
OnBlur:從元素失去焦點時,產(chǎn)生該事件。
Onselect:當(dāng)文字被加亮顯示后,產(chǎn)生該文件。
onchange:當(dāng)Text元素值改變時,產(chǎn)生該文件。
例:...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
 

2、textarea多行多列輸入元素
 功能:實施對Textarea中的元素進(jìn)行控制。
 基本屬性
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔Textarea的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。
Default value:元素的默認(rèn)值。
 方法:
blur():將輸入焦點失去
select():將文字加亮后
 事件:
onBlur:當(dāng)失去輸入焦點后產(chǎn)生該事件
onFocus:當(dāng)輸入獲得焦點后,產(chǎn)生該文件
Onchange:當(dāng)文字值改變時,產(chǎn)生該事件
Onselect:當(dāng)文字加亮后,產(chǎn)生該文件
 
3、Select選擇元素
 功能:實施對滾動選擇元素的控制。
 屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔select中的name。
Length:對應(yīng)文檔select中的length
options:組成多個選項的數(shù)組
selectIndex;該下標(biāo)指明一個選項
select在中每一選項都含有以下屬性:
Text:選項對應(yīng)的文字
selected:指明當(dāng)前選項是否被選中
Index:指明當(dāng)前選項的位置
defaultselected:默認(rèn)選項
 
 事件:
OnBlur:當(dāng)select選項失去焦點時,產(chǎn)生該文件。
onFocas:當(dāng)select獲得焦點時,產(chǎn)生該文件。
Onchange:選項狀態(tài)改變后,產(chǎn)生該事件。
 
4、Button按鈕
 功能:實施對Button按鈕的控制。
 屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)文檔中button的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。
 方法:
click()該方法類似于一個按下的按鈕。
 事件:
onclick當(dāng)單擊button按鈕時,產(chǎn)生該事件。
例 :
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過元素訪問

document.testcallvalue="mytest"; // 通過名字訪問
</script>
.....

 
5、checkbox檢查框
 功能:實施對一個具有復(fù)選框中元素的控制。
 屬性:
name:設(shè)定提交信息時的信息名稱。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。
Checked:該屬性指明框的狀態(tài)true/false.
defauitchecked:默認(rèn)狀態(tài)
 方法:
click()該方法使得框的某一個項被選中。
 事件:
onclick:當(dāng)框的選被選中時,產(chǎn)生該事件。  

6、radio無線按鈕
 功能:實施對一個具單選功能的無線按鈕控制。
 屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中的radio的name相同
value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中的radio的name。
length:單選按鈕中的按鈕數(shù)目。
defalechecked:默認(rèn)按鈕。
checked:指明選中還是沒有選中。
index:選中的按鈕的位置。
 方法:
chick():選定一個按鈕。
 事件:
onclick:單擊按鈕時,產(chǎn)生該事件。
 
7、hidden:隱藏
 功能:實施對一個具有不顯示文字并能輸入字符的區(qū)域元素的控制。
 屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔的hidden中的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔hidden中的value。
defaleitvalue:默認(rèn)值
 
8、Password口令
 功能:實施對具有口令輸入的元素的控制。
 屬性:
Name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中password中的name。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中password中的Value。
defaultvalu:默認(rèn)值
 方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。
focus():獲得password輸入焦點。
 
9、submit提交元素
 功能:實施對一個具有提交功能按鈕的控制。
 屬性:
name:設(shè)定提交信息時的信息名稱,對應(yīng)HTML文檔中submit。
Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息,對應(yīng)HTML文檔中value。
 方法
click()相當(dāng)于按下submit按鈕。
 事件:
onclick()當(dāng)按下該按鈕時,產(chǎn)生該事件。
 
三、范例
下面我們演示通過點擊一個按鈕(red)來改變窗口顏色,點擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。
test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原來的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動態(tài)改變顏色
function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 調(diào)用動態(tài)按鈕文檔</a>
<form >
<Input type="button" Value="red" onClick="changecolor()">
</form>
</BODY>
</HTML>

輸出結(jié)果見圖1所示。


圖1

動態(tài)按鈕程序。
test8_2.htm
<HTML>
<HEAD>
</HEAD>
<p align="center"> </p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="form2" onSubmit="null">
<p><input type="submit" name="banner" VALUE="Submit"
onClick="alert(‘You have to put an \‘a(chǎn)ction=[url]\‘ on the form
tag!!‘)"> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
// variables declaration
var i,k,msg=" 這里輸入你要的內(nèi)容";// increase msg
k=(30/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
// show it to the window
document.form2.banner.value=msg.substring(position,position-30);
// set new position
if(position++==msg.length) position=0;
// repeat at entered speed
id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
</form>
</td>
</tr>
</table>
</center></div>
<p> </p>
<BODY>
<A href="test8_1.htm"> 返回</a>
</BODY>
</HTML>

輸出結(jié)果見圖2所示。


圖2  
  本講介紹了使用JavaScript腳本實現(xiàn)Web頁面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使用。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Javascript基礎(chǔ)知識
html中form與表單提交操作的方法總結(jié)
JavaScript獲取表單內(nèi)所有元素值的方法
JavaScript 計時
盤點JavaScript 事件和方法提交那些事兒
Javascript面試筆試題(考試時間90分鐘)前端開發(fā)的可以試一下!
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服