首頁 web前端 js教程 javascript對象

javascript對象

Oct 29, 2016 pm 01:35 PM
javascript js 物件

1、什麼是表單物件  

表單(

)是Web頁面中的基本元素。表單物件最主要的功能就是能夠直接存取頁面中的表單。利用表單對象,可以實現與使用者的互動;不需要伺服器的介入,就可以實現動態改變Web頁面的行為。對於Web頁面表單,通常使用document物件的forms陣列可以輕鬆存取不同的表單。例如,某HTML檔案片段如下:  

  

  

  

   

  

  

document物件的forms陣列有兩個元素:forms[0 ]可以存取第一個表單,其中共有三個基本元素:而forms[1]對應表單form2,其中只有兩個元素。  

除了以forms陣列方式存取表單物件外,也可以直接以表單的名字來存取。例如,對於上例,也可以用document.form1和document.form2分別存取兩個表單。  

2、表單物件的方法  

表單物件的submit()方法用於實現表單資訊的提交。例如,要提交頁面中的一個名為form1的表單,可以使用下列語句:  

document.form1.submit();  

3、表單物件的屬性  

Name屬性描述🎠

提交表單後執行的程序  

target  

指定資料顯示在哪個視窗(_blank,_parent,_self,_top) 或哪個框架(框名稱)中 

encodingGmethodtext/html Post”  

elements  

數組  

只讀,而表單中所有物件的索引,0,1,…  

由document.表單中有多少個物件.elements.length屬性數組,其中的元素對應於頁面上表單內的各個控制項。除了elements外,表單的其他幾個屬性均對應於HTML語法中

標記的屬性。

4、表單對象使用範例  

下面範例若使用表單對象,效果及程式碼如下:  

<script> <p>function display(){ <p>var str; <p>// 使用表单名称访问表单对象的属性 <p>str="name="+document.form1.name+"\r"; <p>str=str+"action="+document.form1.action+"\r"; <p>str=str+"method="+document.form1.method+"\r"; <p>//访问表单对象的elements数组 <p>str=str+"elements:"+"\r"; <p>for(var i=0;i<document.form1.elements.length;i++){ <p>str=str+ " "+document.form1.elements[i].type <p>+"\t"+document.form1.elements[i].name <p>+"\t"+document.form1.elements[i].value+"\r"; <p>} <p>window.alert(str); <p>return false; <p>} <p>function submitform(){ <p>//使用表单数组+下标访问表单对象 <p>document.forms[0].submit(); <p>} <p></script>  

display()">  

  

  

  

注意:點擊「提交」按鈕會觸發表單的onsubmit事件。如果onsubmit的事件處理過程傳回false,則不進行表單資料的提交。但如果直接使用表單物件的submit()方法,則直接將資料提交出去。  

* 表單中的基本元素  

表單中的基本控制項由按鈕、單選按鈕、複選按鈕、提交按鈕、重設按鈕和文字方塊等組成。在JavaScript中要存取這些控制項,可以使用以下兩種方法實作:  

表單.元素名稱 例如:document.form1.check  

表單.elements[下標] 例如:document.form1.elements[2] 以下分別介紹表單中的各個基本控制項。  

1、text物件  

text物件對應於頁面中的text輸入框控制項。  

  

屬性accessKey 設定或傳回存取文字網域的快速鍵。  

使用 Alt + accessKey 賦予擁有指定快速鍵的元素焦點  

alt 設定或傳回瀏覽器不支援文字網域時所供顯示的替代文字。  

defaultValue 設定或傳回文字域的預設值。  

disabled 設定或返回文字域是否應被停用。  

id 設定或返回文字域的 id。  

maxLength 設定或傳回文字域中的最大字元數。  

name 設定或傳回文字域的名稱。  

readOnly 設定或返回文字域是否應是唯讀的。  

size 設定或返回文字域的尺寸。  

tabIndex 設定或傳回文字域的 tab 鍵控制順序。  

type 傳回文字網域的表單元素類型。  

value 设置或返回文本域的 value 属性的值。  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字,选取文本域中的内容。  

focus() 在文本域上设置焦点。  

主要事件onfocus,onblur,onselect,onchange  

text对象使用示例如下:  

  

  

  

<script> </script>

document.form1.text1.value="this is a javascirpt";  

document.form1.text1.select();  

alert(document.form1.text1.value);  

document.text1.blur();  

  

2、textarea对象  

textarea对象对应于页面中的textarea输入控件。  

  

属性name textarea输入框控件名称  

value textarea输入框控件中当前的文本  

defaultvalue textarea输入框控件的默认文本  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字  

主要事件onfocus,onblur,onselect,onchange  

3、select对象  

select对象对应于网页中的下拉列表框。  

  

  

…………  

  

属性disabled 设置或返回是否应禁用下拉列表  

id 设置或返回下拉列表的 id。  

length 返回下拉列表中的选项数目。  

multiple 设置或返回是否选择多个项目。  

name 设置或返回下拉列表的名称。  

options  

数组  

返回包含下拉列表中的所有选项(option对象)的一个数组。  

其中option对象包括如下属性:  

text 该选项显示的文字  

value 该选项的value值  

selected 指明该选项是否别选中  

selectedIndex 当前选中项的下标  

size 设置或返回下拉列表中的可见行数。  

方法options.add() 向下拉列表添加一个选项。  

blur() 从下拉列表移开焦点。  

focus() 在下拉列表上设置焦点。  

remove() 从下拉列表中删除一个选项。  

主要事件onfocus,onblur,onchange  

4、button对象  

button对象对应于网页中的按钮控件。  

  

属性accessKey 设置或返回访问按钮的快捷键。  

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。  

disabled 设置或返回是否禁用按钮。  

id 设置或返回按钮的 id。  

name 设置或返回按钮的名称。  

tabIndex 设置或返回按钮的 tab 键控制次序。  

value 设置或返回在按钮上显示的文本。  

方法blur() 把焦点从元素上移开。  

click() 在该按钮上模拟一次鼠标单击。  

focus() 为该按钮赋予焦点。  

主要事件onclick  

5、checkbox对象  

checkbox对象对应于网页中的复选框。  

选项说明  

属性accessKey 设置或返回访问 checkbox 的快捷键。  

alt 设置或返回不支持 checkbox 时显示的替代文本。  

checked 设置或返回 checkbox 是否应被选中。  

defaultChecked 返回 checked 属性的默认值。  

disabled 设置或返回 checkbox 是否应被禁用。  

id 设置或返回 checkbox 的 id。  

name 设置或返回 checkbox 的名称。  

tabIndex 设置或返回 checkbox 的 tab 键控制次序。  

value 设置或返回 checkbox 的 value 属性的值  

方法blur() 从 checkbox 上移开焦点  

click() 模擬在 checkbox 中的一次滑鼠點選。  

focus() 為 checkbox 賦予焦點。  

主要事件onclick  

6、radio物件  

radio物件對應於網頁中的單選控制項。當網頁中具有多個相同名稱的單選控制項後,就形成了一個  

radio物件數組,每個單選控制項即為一個radio物件。  

選項說明  

選項說明  

…  

屬性accessKey 設定或傳回存取單選按鈕的快速鍵。  

alt 設定或返回不支援單選按鈕時顯示的替代文字。  

checked 設定或回到單選按鈕的狀態。  

defaultChecked 傳回單選按鈕的預設狀態。  

disabled 設定或回傳是否停用單選按鈕。  

id 設定或返回單選按鈕的 id。  

name 設定或傳回單選按鈕的名稱。  

tabIndex 設定或傳回單選按鈕的 tab 鍵控制順序。  

value 設定或傳回單選按鈕的 value 屬性的值。  

方法blur() 從單選按鈕移開焦點。  

click() 在單選按鈕上模擬一次滑鼠點擊。  

focus() 賦予單選按鈕焦點。  

主要事件onclick  

7、hidden物件  

hidden物件對應於網頁中隱藏的網域。  

  

屬性alt 設定或傳回當不支援隱藏輸入域時所顯示的替代文字。  

id 設定或傳回隱藏域的 id。  

name 設定或傳回隱藏域的名稱。  

value 設定或傳回隱藏域的 value 屬性的值。  

8、submit物件  

submit物件對應於網頁中的submit按鈕。  

  

屬性accessKey 設定或傳回存取提交按鈕的快速鍵。  

alt 設定或傳回瀏覽器不支援提交按鈕時供顯示的替代文字。  

disabled 設定或返回提交按鈕是否應已停用。  

id 設定或返回提交按鈕的 id。  

name 設定或傳回提交按鈕的名稱。  

tabIndex 設定或傳回提交按鈕的 tab 鍵控制次序。  

value 設定或傳回在提交按鈕上顯示的文字。  

方法blur() 從提交按鈕上移開焦點。  

click() 在提交按鈕上模擬一次滑鼠點擊。  

focus() 為提交按鈕賦予焦點。  

主要事件onclick  

9、password物件  

password物件對應於網頁中的密碼輸入框。  

  

屬性accessKey 設定或傳回存取密碼欄位的快速鍵。  

alt 設定或傳回不支援密碼欄位時所顯示的替代文字。  

defaultValue 設定或傳回密碼欄位的預設值。  

disabled 設定或傳回是否應停用密碼欄位。  

id 設定或傳回密碼欄位的 id。  

maxLength 設定或傳回密碼欄位中字元的最大數目。  

name 設定或傳回密碼欄位的名稱。  

readOnly 設定或回傳密碼欄位是否應是唯讀的。  

size 設定或傳回密碼欄位的長度。  

tabIndex 設定或傳回密碼欄位的 tab 鍵控制次序。  

value 設定或傳回密碼欄位的 value 屬性的值。  

方法blur() 從密碼欄位移開焦點。  

click() 賦予密碼欄位焦點。  

focus() 選取密碼欄位中的文字。  

主要事件onfocus,onblur,onselect,onchange  

 

*History物件  

History 並且  

History 物件是 window 物件的一部分,可透過 window.history 屬性進行存取。  

History 物件屬性  

屬性描述  

length 返回瀏覽器歷史清單中的 URL 數量。  

History 物件方法  

方法說明  

back() 載入 history 清單中的前一個 URL。  

forward() 載入 history 清單中的下一個 URL。  

go(number|URL) 載入 history 清單中的某個特定頁。  

-1表示前一頁  


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

如何將 MySQL 查詢結果陣列轉換為物件? 如何將 MySQL 查詢結果陣列轉換為物件? Apr 29, 2024 pm 01:09 PM

將MySQL查詢結果陣列轉換為物件的方法如下:建立一個空物件陣列。循環結果數組並為每一行建立一個新的物件。使用foreach迴圈將每一行的鍵值對賦給新物件的對應屬性。將新物件加入到物件數組中。關閉資料庫連線。

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

數組和物件在 PHP 中的差異是什麼? 數組和物件在 PHP 中的差異是什麼? Apr 29, 2024 pm 02:39 PM

PHP中,數組是有序序列,以索引存取元素;物件是具有屬性和方法的實體,透過new關鍵字建立。數組存取透過索引,物件存取通過屬性/方法。數組值傳遞,物件參考傳遞。

PHP中的Request物件是什麼? PHP中的Request物件是什麼? Feb 27, 2024 pm 09:06 PM

PHP中的Request物件是用來處理客戶端傳送到伺服器的HTTP請求的物件。透過Request對象,我們可以取得客戶端的請求訊息,例如請求方法、請求頭資訊、請求參數等,從而實現對請求的處理和回應。在PHP中,可以使用$_REQUEST、$_GET、$_POST等全域變數來取得要求的信息,但是這些變數並不是對象,而是陣列。為了更靈活和方便地處理請求訊息,可

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles