關於表單——input屬性

Query獲取Select選擇的Text和Value:

語法解釋：

//爲Select添加事件，當選擇其中一項時觸發

1. $(“#select_id”).change(function(){//code…});

//獲取Select選擇的Text
2. var checkText=$(“#select_id”).find(“option:selected”).text();

//獲取Select選擇的Value
3. var checkValue=$(“#select_id”).val();

//獲取Select選擇的索引值
4. var checkIndex=$(“#select_id “).get(0).selectedIndex;

//獲取Select最大的索引值
5. var maxIndex=$(“#select_id option:last”).attr(“index”);

jQuery設置Select選擇的Text和Value:

語法解釋：

//設置Select索引值爲1的項選中

1. $(“#select_id “).get(0).selectedIndex=1;

//設置Select的Value值爲4的項選中
2. $(“#select_id “).val(4);

//設置Select的Text值爲jQuery的項選中
3. $(“#select_id option[text='jQuery']“).attr(“selected”, true);

原文地址：http://www.supesoft.com/ArticleDisp.asp?ID=4825

補充：

獲取一組radio被選中項的值,XXX爲radio的name
var item = $(‘input[name=XXX][type=radio]:checked’).val();

獲取select被選中項的文本
var item = $(“select[name=items] option[@selected]“).text();
select下拉框的第二個元素爲當前選中值
$(‘#select_id’)[0].selectedIndex = 1;
radio單選組的第二個元素爲當前選中值
$(‘input[name=items]‘).get(1).checked = true;

獲取值：

文本框，文本區域：$(“#txt”).attr(“value”)；
多選框checkbox：$(“#checkbox_id”).attr(“value”)；
單選組radio： $(“input[type=radio]:checked”).val();
下拉框select： $(‘#sel’).val();

控制表單元素：
文本框，文本區域：$(“#txt”).attr(“value”,”);//清空內容
$(“#txt”).attr(“value”,’11′);//填充內容

多選框checkbox： $(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);//打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判斷是否已經打勾

單選組radio： $(“input[type=radio]“).attr(“checked”,’2′);//設置value=2的項目爲當前選中項
下拉框select： $(“#sel”).attr(“value”,’-sel3′);//設置value=-sel3的項目爲當前選中項
$(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；//清空下拉框

五 08

javascript 學習筆記《JavaScript And DHTML Cookbook》

網頁設計,資源No Comments »

·表單( forms )
1.訪問表單
document.forms[0]
document.forms["myForm"]
document.myForm
document.all.myForm
document.getElementById(“myForm”)

document.forms[0].elements[0]
document.forms["myForm"].elements["myElement"]
document.myForm.myElement

2. 讓文本框自動獲得焦點
//讓名爲myText的文本框在頁面加載時自動獲得焦點,並選中當前文本框的值
<body οnlοad=”document.myForm.myText.focus(); document.myForm.myText.select();”>

3. 通用的文本框驗證函數
//驗證是否爲空
<input type=”text” οnchange=”isEmpty(this)”>

function isEmpty(obj){
if(obj.value == null || obj.value == ”") alert(” 此字段不能爲空”);
}

//驗證是否爲數字
<input type=”text” οnchange=”isNumber(this)”>

function isNumber(obj){
var val = obj.value;
var r = /\w[0-9]{1,}/;
if( !r.test(val) ) alert(” 此字段必須爲數字”)
}

//驗證是否長度符合
<input type=”text” οnchange=”isLen7(this)”>

function isLen7(obj){
if(obj.value.length != 7) alert(” 此字段長度必須爲7位”);
}

//驗證有效E-Mail地址
<input type=”text” οnchange=”isEmail(this)”>

function isEmail(obj){
var val = obj.value;
var r = /^\w[0-9a-zA-Z.\-]{3,}@\w[0-9a-zA-Z.\-]{2,}.\w[a-zA-Z.]{2,4}$/;
if( !r.test(val) ) alert(” 請輸入有效的E-Mail地址”);
}

4.阻止表單提交
<form action=”#” οnsubmit=”return checkValue()”></form>

function checkValue(){
//do something to check the value.
return false;
}

5. 改變表單提交的頁面
<form action=”#” οnsubmit=”chooseAction()”></form>

fucntion chooseAction(){
if(document.myForm.myCheckBox.checked) document.myForm.action = ”a.asp”;
else document.myForm.action = ”b.asp”;
}

6. 阻止向文本框輸入某些字符
<input type=”text” οnkeydοwn=”checkKeyCode(event)”>

fucntion checkKeyCode(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){
alert(” 此字段只允許輸入數字”);
return false;
}
else return true;
}

7. 回車後焦點跳到另一個輸入控件
<input id=”txt1″ type=”text” οnkeypress=”return focusNext(this,’txt2’,event)”>
<input id=”txt2″ type=”text”>

function focusNext(form,name,evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c == 13 || c == 3){
form.elements[name].focus();
return false;
}
else return true;
}

8. 使某一控件不可用
document.myForm.myElement.disabled = true;

9.隱藏 /顯示某一控件
document.myForm.myElement.style.display = ”block”; //顯示
document.myForm.myElement.style.display = ”none”; // 隱藏

10.控制下拉框
//清空下拉框中的項
document.myForm.mySelect.options.length = 0;

// 添加下拉框中的項
var item = new Option(“myText”,”myValue”);
document.myForm.mySelect.add(item);

// 獲取下拉框當前選中的值
var val = document.myForm.mySelect.value;

//———————————————————————–

· 事件( Event )
1.事件介紹:
onabort     //當用戶阻止發送圖片至客戶端時觸發
onblur      // 當控件失去焦點時觸發
onchange    //當控件失去焦點並且內容發生了改變時觸發
onclick     // 當用戶點擊某控件時觸發
ondblclick  //當用戶雙擊某控件時觸發
onerror     //當執行某腳本發生異常時觸發
onfocus     //當某控件獲得焦點時觸發
onkeydown   //當用戶按下鍵盤某個鍵時觸發
onkeypress  //當用戶按下並鬆開鍵盤某個鍵時觸發
onkeyup     //當用戶鬆開鍵盤某個鍵時觸發
onload      //用頁面被加載完成後觸發
onmousedown //當用戶按下鼠標時觸發
onmousemove // 當用戶移動鼠標時觸發
onmouseout  //當用戶將鼠標移出某控件時觸發
onmouseover //當用戶將鼠標移入某控件時觸發
onmouseup   //當用戶鬆開鼠標時觸發
onmove      //當用戶移動瀏覽器窗口時觸發
onreset     //當用戶點擊表單”重置”按鈕時觸發
onresize    //當用戶改變瀏覽器窗口的大小時觸發
onselect    //當用戶選中文本框內容時觸發
onsubmit    //當用戶點擊表單”提交”按鈕時觸發
onunload    //當用戶關閉瀏覽器時觸發

//以下爲IE獨有的方法
onbeforecopy    // 當用戶使用”複製”功能前觸發
onbeforecut     //當用戶使用”剪切”功能前觸發
onbeforepaste   // 當用戶使用”粘貼”功能前觸發
onbeforeprint   //當用戶使用”打印”功能前觸發
oncontextmenu   // 當用戶調出上下文菜單時觸發
oncopy          //當用戶使用”複製”功能時觸發(未複製)
oncut           // 當用戶使用”剪切”功能時觸發(未剪切)
ondrag          //當用戶拖動某控件前觸發
ondragend       // 當用戶拖動某控件後觸發
ondragenter     //當用戶拖動某控件到當前控件上面後觸發
ondragleave     // 當用戶將某控件拖出當前控件時觸發
ondragover      //當用戶將某控件拖出當前控件上面時觸發
ondrop          // 當用戶將某控件拖到當前控件後觸發

2.瀏覽器事件兼容性
function funName(evt){
evt = (evt) ? evt : event;
if(evt){ //to do something }
}

3. 動態爲控件添加事件
document.getElementById(“myControl”).addEventListener(“click”,funName,false);
document.getElementById(“myControl”).onclick = funName;

4. 頁面加載後調用某函數
<body οnlοad=”funName(); funName2();”>
window.onload = funName;

5. 確定與點擊事件相匹配的事件
//9.3和9.4 比較複雜.且不清楚事件是JS API還是自定義的

6.防止重複執行兩次點擊事件
//當第一次點擊按鈕後,將表單提交回服務器,然後submitForm()函數便指向blockIt()函數.
// 除非頁面重新加載..否則點擊無效(無作用)
<input type=”button” value=”提交” οnclick=”submitForm()”>
function submitForm(){
document.forms["myForm"].submit();
submitForm = blockIt;
reutrn false;
}
function blockIt(){
return false;
}

7. 阻止用戶點擊鼠標右鍵或中鍵
function myFun(evt){
evt = (evt) ? evt : event;
if(evt.button || evt.button == 1 || evt.button == 2){ return false; }
else{ //do something }
}

8. 阻止用戶鍵入某些字符
function myFun(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){ return false; }
else reutrn true;
}

9. 獲取當前鼠標指向的對象
function myFun(evt){
evt = (evt) ? evt : event;
var elem = (evt.target) ? evt.target : evt.srcElement;
//do something
}

10. 特殊功能鍵
evt.ctrlKey evt.altKey evt.shiftKey

11.播放媒體文件
<object id=”hiPing” width=”1″ height=”1″
classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″ codebase=”#Version=6,0,0,0″>
<param name=”FileName” value=”hi.wav”>
<param name=”AutoStart” value=”false”>
</object>

function playSound(id){
if(document.all[id].FileName){ document.all[id].Play(); }
}

//———————————————————————–

· 頁面導航
1.跳轉至另一個頁面
location = ”newPage.html”;
location.href = ”newPage.html”;

2. 不記錄歷史記錄的頁面跳轉
location.replace(“newPage.html”);

3.利用下拉框跳轉頁面
<select name=”chooser” id=”chooser” οnchange=”redirect()”>
<option value=”">Choose a Destination:</option>
<option value=”index.html”>Home</option>
<option value=”products.html”>Products</option>
<option value=”support.html”>Support</option>
<option value=”contact.html”>Contact Us</option>
</select>

function redirect(){
var t = document.all.chooser.value;
if(t){ location = t; }
}

4. 利用Cookies保存用戶數據
<body οnunlοad=”saveData()”> //要保存數據的頁面
<body οnlοad=”readData()”& gt; //新頁面

function saveData(){
var data = document.forms[0].userName.value;
var expDate = getExpDate(180, 0, 0);
setCookie(“userName”, data, expDate);
}

function readData( ) {
var data = getCookie(“userName”);
document.forms[0].userName.value = data;
}

5. 利用URL來保存用戶數據
function goNext(url){
var data = document.forms[0].userName.value;
location.href = url + ”?” + escape(data);
}

function readData( ) {
var srchString = unescape(location.search.substring(1, location.search.length));
if (srchString.length > 0){ document.forms[0].userName.value = srchString; }
}

6. 創建一個自定義右鍵菜單
//菜單就自己畫了,這裏只說方法
function initContextMenus(){
if (document.body.addEventListener){
document.body.addEventListener(“contextmenu”, showContextMenu, true);
document.body.addEventListener(“click”, hideContextMenus, true);
}
else {
document.body.oncontextmenu = showContextMenu;
}
setContextTitles( );
}

//———————————————————————–

· 管理樣式 ( CSS )
1.三種嵌入樣式表的方法:
//在頭部統一聲明樣式
<style type=”text/css”> body{ font-size:9pt; } </style>

// 從外部嵌入一樣式表文件
<link rel=”stylesheet” type=”text/css” href=”myStyleSheet.css”>

// 直接在元素屬性裏定義
<p style=”font-size:9pt”></p>

2. 分配樣式規則給某一元素
<style type=”text/css”>
<!– tagName {styleProperty1:value1; styleProperty2:value2; …} –>
</style>

3. 自定義一種樣式供一類元素使用
.myStyle { font-size:9pt; }
<p class=”myStyle”></p>

4. 自定義一種樣式供單一元素使用
#myId { font-size:9pt; }
<p id=”myId”></p>

5. 頁面加載後動態修改頁面樣式錶鏈接
<link id=”basicStyle” rel=”stylesheet” type=”text/css” href=”styles.normal.css”>
document.getElementById(“basicStyle”).href = ”newstyle.css”;

6. 打開/關閉某個樣式表
document.styleSheets[1].disabled = false;

7. 動態設置/更改某一元素的樣式
document.getElementById(“myElement”).className = ”myStyle”;

8. 元素樣式的優先級
//原則上來講,瀏覽器會使用最後的一種樣式(就近原則)
//當同時給一元素設置id和class兩種樣式時,id的樣式優先於class
//當同時給一元素設置class和style兩種樣式時,style優先於class
// 當同時給一元素設置style和id兩種樣式時,style優先於id
<style>
.myStyle { font-size:10pt; }
#myId { font-size:11pt; }
</style>
<p id=”myId” class=”myStyle” style=”font-size:12pt”>123</p>

//———————————————————————–

· 動態更改對象的視覺效果
1.更改對象的字體樣式
document.getElementById(“myElement”).style.color = ”#EEEEEE”;

// 相應的屬性
color : 字體的顏色
font : 字體的全局設置
fontf : 字體名稱
fontSize : 字體大小(pt, px)
fontStretch : 字符間隔(px)
fontStyle : 字體的樣式 (normal, italic)
fontVariant : 字母大小常量(normal, small-caps)
fontWeight : 字體粗細(bold, bolder, lighter, normal)
textDecoration : 字體裝飾 (blink, line-through, none, overline, underline)
textTransform : 字母大小寫(capitalize, lowercase, none, uppercase)

2.更改頁面背景樣式
document.body.background = ”url(bg.gif) repeat fixed”;

// 相應的屬性
background : 背景的全局設置
backgroundAttachment : 背景是否隨滾動條滾動而滾動(fixed, scroll)
backgroundColor : 背景顏色
backgroundImage : 背景圖片
backgroundPosition : 背景圖片的位置 (bottom, center, left, right, top)
backgroundRepeat : 背景圖片是否重複或拉伸 (no-repeat, repeat, repeat-x, repeat-y)

3.顯示/隱藏某對象
document.getElementById(“myElement”).style.visibility = ”hidden”;
document.getElementById(“myElement”).style.display = ”none”;

4. 細調對象的透明度
document.getElementById(“myElement”).style.filter = ”alpha(opacity=80)”;

//———————————————————————–

· 佈置HTML對象的位置
1.動態更改對象的位置
<div id=”myDiv” style=”position:absolute; left:100px; top:100px”>Content Here</div>
document.getElementById(“myDiv”).style.top = ”200px”;

2. 設置對象在頁面上的層次關係
//值越大對象越前面
document.getElementById(“myElement”).style.zIndex = 123;

//———————————————————————–

· 動態創建內容
1.頁面加載時動態創建內容
<p>現在是：<script>var d = new Date(); document.write(d.toLocaleTimeString());& lt;/script></p>

2.動態重畫頁面
<input type=”text” id=”txtName”& gt;<input type=”button” value=”確定” οnclick=”rewritePage()”>
<scritp>
function rewritePage(){
var user = document.getElementById(“txtName”).value;
var html = ”& lt;html><head><title>歡迎</title></head>”;
html += ”& lt;body>歡迎您！” + user + ”</body></html>”;
document.write(html);
document.close();
}
</script>

四 16