魔鬼字典 JavaScript 筆記 代碼比較多亂
更新時間：2010年03月09日 21:03:36 作者：
魔鬼字典 JavaScript 筆記 代碼比較多亂，對于有經(jīng)驗的看容易點。
例子（ListboxSelectedIndex）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript">
function showSelectedIndex()
{
var oListbox=document.getElementById("selListbox");
alert(oListbox.selectedIndex); //oListbox.selectedIndex 顯示的是listbox（listbox中的選項成一個數(shù)組）選中的那一項在數(shù)組中的索引號（沒選中則顯示-1）
}
</script>
</head>
<body>
<form action="#" method="post">
<select id="selListbox" size="2"> <!--<select>中的size屬性指示的是用戶能看見的選項數(shù)目-->
<option>Original Value0</option>
<option>Original Value1</option>
<option>Original Value2</option>
<option>Original Value3</option>
<option>Original Value4</option>
</select><br />
Select an option in the listbox and click "Show Selected Index".<br />
<input type="button" value="Show Selected Index" onclick="showSelectedIndex()" />
</form>
</body>
</html>
例子添加options
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //外置JS腳本下面有
<script language="javascript" type="text/javascript">
function addItem()
{
var oListbox=document.getElementById("selListbox");
var oTxtName=document.getElementById("txtName");
var oTxtValue=document.getElementById("txtValue");
ListUtil.add(oListbox,oTxtName.value,oTxtValue.value);
}
</script>
</head>
<body>
<form action="#">
<select id="selListbox" size="1">
<option>Original Value</option>
</select><br />
Click the Add button to add item with the following information:<br />
Name:<input type="text" id="txtName" /><br />
Value:<input type="text" id="txtValue" /><br />
<input type="button" value="Add" onclick="addItem()" />
</form>
</body>
</html>
例子（一鍵式為所有超級鏈接添加onclick事件，跨窗體傳遞超鏈接內(nèi)容）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript">
function confirmclick()
{
return confirm("Do you really want to visit"+location.href+"?");
}
function confirmAllLinks()
{
for(var i=0;i<document.links.length;i++) //document.links 為此項目的所有超級鏈接
{
document.links[i].onclick=confirmclick; //為所有的超級鏈接添加onclick事件
}
}
// window.onload=confirmAllLinks; //在窗體加載時就直接執(zhí)行該函數(shù)
function listlinks(d)
{
var newwin=window.open("","linklist","menubar,scrollbars,resizable,width=600,height=300");
for(var i=0;i<d.links.length;i++)
{
newwin.document.write('<a href="'+d.links[i].href+'">'); //注意<a 中的格式‘'
newwin.document.write(d.links[i].href);
newwin.document.writeln("</a><br />");
}
}
</script>
</head>
<body>
<input type="button" onclick="alert(typeof this.onclick)" value="click me" />
<input type="button" value="Click Here" onclick="if(window.numclicks)numclicks++;else numclicks=1;this.value='Click #'+numclicks;" />
<a href="../js07/test1.htm">mattlee</a>
<a href="../js07/test2.htm">marssion</a>
<input type="button" value="link event" onclick="confirmAllLinks()" />
<input type="button" value="link event" onclick="listlinks(document)" />
</body>
</html>
例子（在文本框中只能輸入數(shù)字鍵）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script type="text/javascript" language="javascript" src="javascript/detect.js"></script> //驗證瀏覽器的內(nèi)容，在jS第五章中有
<script type="text/javascript" language="javascript" src="javascript/eventutil.js"></script>
<script type="text/javascript" language="javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox. You can only type number characters.</p>
<!--要在keypress事件處理函數(shù)中調(diào)用這個方法，當字符被允許時返回true，不允許時返回false-->
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" validchars="0123456789d" onkeypress="return TextUtil.allowChars(this,event,false)"></textarea>
<input type="submit" value="Submit Form" /> <!--↑-->
</form> <!--this:返回<textarea>對象本身； event:系統(tǒng)自動生成的事件直接打上去就行，boolean值：true：屏蔽ctrl+v false:可以用ctrl+v
這種阻止復(fù)制粘貼的方法只適用于火狐，在IE中用“onpaste="return false"”加在<>中就可以了-->
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
src="javascript/textutil.js"中的內(nèi)容：
var TextUtil=new Object();
TextUtil.isNotMax=function(oTextArea)//判斷文本框內(nèi)的內(nèi)容的長度是否于文本框的最大長度相等
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};
TextUtil.blockChars = function(oTextbox, oEvent, bBlockPaste)//阻止數(shù)字字符
{
oEvent = EventUtil.formatEvent(oEvent); //格式化事件
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當于驗證字符串
var sChar = String.fromCharCode(oEvent.charCode); //獲取鍵盤錄入的數(shù)據(jù)
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1; //錄入的數(shù)據(jù)不包含在驗證字符串中返回true
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //不支持IE,IE通過onpaste事件控制
}
else {
return bIsValidChar || oEvent.ctrlKey;
}
};
TextUtil.allowChars = function(oTextbox, oEvent, bBlockPaste)//允許數(shù)字字符
{
oEvent = EventUtil.formatEvent(oEvent); //格式化事件
var sValidChars = oTextbox.getAttribute("validchars"); //獲取元素的validchars屬性值，相當于驗證字符串
var sChar = String.fromCharCode(oEvent.charCode); //獲取鍵盤錄入的數(shù)據(jù)
var bIsValidChar = sValidChars.indexOf(sChar) > -1; //錄入的數(shù)據(jù)包含在驗證字符串中返回true
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //阻止粘貼快捷鍵ctrl+v
}
else {
return bIsValidChar || oEvent.ctrlKey;
}
};
TextUtil.blurBlock = function(oTextbox) {
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當于驗證字符串
var arrInvalidChars = sInvalidChars.split("");//將驗證字符串分隔為字符數(shù)組
for (var i = 0; i < arrInvalidChars.length; i++) {
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含數(shù)組中的任意字符，則驗證不通過
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
oTextbox.focus();
oTextbox.select();
return;
}
}
};
TextUtil.blurAllow=function(oTextbox)
{
var sValidChars=oTextbox.getAttribute("validchars");
var arrTextChars=oTextbox.value.split("");
for(var i=0;i<arrTextChars.length;i++)
{
if(sValidChars.indexOf(arrTextChars[i])==-1)
{
alert("Character '"+arrTextChars[i]+"' not allowed.");
}
}
};
TextUtil.numericScroll=function(oTextbox,oEvent)
{
oEvent=EventUtil.formatEvent(oEvent);
var iValue=oTextbox.value.length==0?0:parseInt(oTextbox.value);//獲取文本框中的值，如果沒填采用默認值0
var iMax=oTextbox.getAttribute("max");//獲取最大值
var iMin=oTextbox.getAttribute("min");//獲取最小值
if(oEvent.keyCode==38)//上箭頭
{
if(iMax==null || iValue<iMax)
{
oTextbox.value=(iValue+1);
}
}
else if(oEvent.keyCode==40)//下箭頭
{
if(iMin==null || iValue>iMin)
{
oTextbox.value=(iValue-1);
}
}
};
TextUtil.autosuggestMatch=function(sText,arrValues)
{
var arrResult=new Array();
if(sText!="")
{
for(var i=0;i<arrValues.length;i++)
{
if(arrValues[i].indexOf(sText)==0)//在數(shù)組中查找是否包含傳入字符，如果匹配將該數(shù)組元素存入新數(shù)組
{
arrResult.push(arrValues[i]);
}
}
}
return arrResult;
};
TextUtil.autosuggest=function(oTextbox,arrValues,sListboxId)
{
var oListbox=document.getElementById(sListboxId);//通過傳入ID 獲取指定列表框
var arrMatches=TextUtil.autosuggestMatch(oTextbox.value,arrValues);
ListUtil.clear(oListbox);//清空列表框
for(var i=0;i<arrMatches.length;i++)
{
ListUtil.add(oListbox,arrMatches[i]);//將匹配的值填入列表框
}
};
--------------------------------------------------------------------------------------------------------------------------
src="javascript/eventutil.js"中的內(nèi)容：
var EventUtil=new Object;
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler,false);
}
else if(oTarget.attachEvent)
{
oTarget.attachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=fnHandler;
}
};
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventHandler)
{
oTarget.removeEventHandler(sEventType,fnHandler,false);
}
else if(oTarget.detachEvent)
{
oTarget.detachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=null;
}
};
//通過格式化事件函數(shù)，盡量將IE標準向DOM標準靠攏
EventUtil.formatEvent=function(oEvent){
if(isIE && isWin)
{
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;//DOM有charCode IE有keyCode 使用這樣的方式使IE兼容DOM
//eventPhase 屬性返回事件傳播的當前階段。它的值是Event.CAPTURING_PHASE(1) Event.AT_TARGET(2) Event.BUBBLING_PHASE(3)三個常量之一，它們分別表示捕獲階段、正常事件派發(fā)和起泡階段。
oEvent.eventPhase=2;
oEvent.isChar=(oEvent.charCode>0);
oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
oEvent.pageY=oEvent.clientY+document.body.scrollTop;
oEvent.preventDefault=function(){//取消事件的默認動作。
this.returnValue=false;
};
if(oEvent.type=="mouseout")
{
oEvent.relatedTarget=oEvent.toElement;
}
else if(oEvent.type=="mouseover")
{
oEvent.relatedTarget=oEvent.fromElement;
}
oEvent.stopPropagation=function(){
this.cancelBubble=true;
};
oEvent.target=oEvent.srcElement;
oEvent.time=(new Date).getTime();
};
return oEvent;
};
EventUtil.getEvent=function(){
if(window.event)
{
return this.formatEvent(window.event);
}
else
{
return EventUtil.getEvent.caller.arguments[0];
}
};
例子（自動查找，就像手機中的通訊錄）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> //上面有
<script language="javascript" type="text/javascript">
var arrColors=["red", "orange", "yellow", "green", "blue", "indigo",
"violet", "brown", "black", "tan", "ivory", "navy",
"aqua", "white", "purple", "pink", "gray", "silver"];
arrColors.sort(); //對上述數(shù)組進行排序
function setText(oListbox,sTextboxID)
{
var oTextbox=document.getElementById(sTextboxID);
if(oListbox.selectedIndex>-1)
{
oTextbox.value=oListbox.options[oListbox.selectedIndex].text; //options:下拉列表框中的元素的集合，通過元素的索引號進行訪問
}
}
</script>
</head>
<body>
<p>Type in a color in lowercase:</p>
<input type="text" id="txtColor" onkeyup="TextUtil.autosuggest(this,arrColors,'lstColors')" /><br /><br />
<!-- ↑
this:將文本框自己傳過去；arrColors:將要從中查找的總數(shù)組傳過去；'lstColors'(注意加‘'傳入對象的id名時加‘'
為的是不將傳入得東西當成一個對象而是僅僅當成一個字符串，為后面在函數(shù)中用此字符串當id號找對象做準備)將要查出的文本的現(xiàn)實地點傳過去-->
<select id="lstColors" size="5" style="width:200px" onclick="setText(this,'txtColor')"></select>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------
src="javascript/listutil.js"中的內(nèi)容：
var ListUtil=new Object();
ListUtil.getSelectedIndexes=function(oListbox)
{
var arrIndexes=new Array();
for(var i=0;i<oListbox.options.length;i++)
{
if(oListbox.options[i].selected)//獲取選中項的索引
{
arrIndexes.push(i);
}
}
return arrIndexes;
};
ListUtil.add=function(oListbox,sName,sValue)
{
var oOption=document.createElement("option");
oOption.appendChild(document.createTextNode(sName));
if(arguments.length==3)//如果傳入了第三個參數(shù)，則添加屬性
{
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);
};
ListUtil.remove=function(oListbox,iIndex)//通過索引刪除項
{
oListbox.remove(iIndex); //oListbox.remove硬打上去的
};
ListUtil.clear=function(oListbox)//清空列表框
{
for(var i=oListbox.options.length-1;i>=0;i--) {
ListUtil.remove(oListbox,i);
}
};
ListUtil.move=function(oListboxFrom,oListboxTo,index)
{
var oOption=oListboxFrom.options[index];
if(oOption!=null)
{
oListboxTo.appendChild(oOption);//元素節(jié)點同時只能屬于一個父節(jié)點，所以實現(xiàn)了移動
}
};
ListUtil.copy=function(oListboxFrom,oListboxTo,index)
{
var oOption=oListboxFrom.options[index];//獲取原節(jié)點元素，并且創(chuàng)建新的元素幾點，從原節(jié)點取值
var newOption=document.createElement("option");
var newTxtNode=document.createTextNode(oOption.firstChild.nodeValue);
newOption.appendChild(newTxtNode);
if(newOption!=null)
{
oListboxTo.appendChild(newOption);
}
}
ListUtil.shiftUp=function(oListbox,index)//選項向上移動
{
if(index>0)
{
var oOption=oListbox.options[index];//獲取當前項
var oPrevOption=oListbox.options[index-1];//獲取上一項
oListbox.insertBefore(oOption,oPrevOption);
}
};
ListUtil.shiftDown=function(oListbox,index)
{
if(index<oListbox.options.length-1)
{
var oOption = oListbox.options[index]; //獲取當前項
var oNextOption=oListbox.options[index+1];//獲取下一項
oListbox.insertBefore(oNextOption,oOption);
}
};
例子（禁止輸入數(shù)字）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script> // 腳本上面都有Copy下來看
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox.You can only type non-number characters.</p>
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" invalidchars="0123456789" onkeypress="return TextUtil.blockChars(this,event,true)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
例子（一個復(fù)雜的例子，關(guān)于可以將已經(jīng)選定的文本框和單選按鈕的值總結(jié)并顯示出來）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript">
var radCPUSpeedIndex=0;
function radCPUSpeed_onclick(radIndex)
{
var returnValue=true;
if(radIndex==1)
{
returnValue=false;
alert("Sorry that processor speed is currently unavailible");
document.forms[0].radCPUSpeed[radCPUSpeedIndex].checked=true;
}
else
{
radCPUSpeedIndex=radIndex;
}
return returnValue;
}
function butCheck_onclick()
{
var controlIndex;
var element;//debugger
var numberOfControls=document.forms[0].length; //document.forms[0]表示的是第一張表單中命了名的元素的集合
var compSpec="Your chosen processor speed is ";
compSpec=compSpec+document.forms[0].radCPUSpeed[radCPUSpeedIndex].value; //forms[0].radCPUSpeed[radCPUSpeedIndex] 在上一個函數(shù)（在選擇單選按鈕時已經(jīng)觸發(fā)）已經(jīng)將選定的數(shù)組索引賦值了
compSpec=compSpec+"\nWith the following additional components\n";
for(controlIndex=0;controlIndex<numberOfControls;controlIndex++)
{
element=document.forms[0][controlIndex];
if(element.type=="checkbox")
{
if(element.checked==true)
{
compSpec=compSpec+element.value+"\n";
}
}
}
alert(compSpec);
}
</script>
</head>
<body>
<form action="javascript:alert('Submit')" method="post">
<p>Tick all of the components you want included on your coumputer</p>
<table border="1">
<tr>
<td>DVD-RW</td>
<td><input type="checkbox" name="chkDVD" value="DVD-RW" /></td>
</tr>
<tr>
<td>CD-ROM</td>
<td><input type="checkbox" name="chkCD" value="CD-ROM" /></td>
</tr>
<tr>
<td>Zip Drive</td>
<td><input type="checkbox" name="chkZip" value="ZIP Drive" /></td>
</tr>
</table>
<p>Select the processor speed you require</p>
<table border="1">
<tr>
<td><input type="radio" name="radCPUSpeed" checked="checked" onclick="return radCPUSpeed_onclick(0)" value="3.8 Ghz" /></td>
<td>3.8 Ghz MHz</td>
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(1)" value="4.8 Ghz" /></td>
<td>4.8 Ghz MHz</td>
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(2)" value="6 Ghz" /></td>
<td>6 Ghz MHz</td>
</tr>
</table>
<input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()" />
</form>
</body>
</html>
例子（不同父節(jié)點之間的子節(jié)點的移動和刪除）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //腳本上面有
<script language="javascript" type="text/javascript">
function moveItem()
{
var oListbox1=document.getElementById("selListbox1");
var oListbox2=document.getElementById("selListbox2");
var oTxtIndex=document.getElementById("txtIndex");
ListUtil.move(oListbox1,oListbox2,parseInt(oTxtIndex.value)); //
}
function copyItem()
{
var oListbox1=document.getElementById("selListbox1");
var oListbox2=document.getElementById("selListbox2");
var oTxtIndex=document.getElementById("txtIndex");
ListUtil.copy(oListbox1,oListbox2,parseInt(oTxtIndex.value));
}
</script>
</head>
<body>
<form action="#" method="post">
<select id="selListbox1" size="5">
<option>Original Value 1-0</option>
<option>Original Value 1-1</option>
<option>Original Value 1-2</option>
<option>Original Value 1-3</option>
<option>Original Value 1-4</option>
</select>
<select id="selListbox2" size="5">
<option>Original Value 2-0</option>
<option>Original Value 2-1</option>
<option>Original Value 2-2</option>
<option>Original Value 2-3</option>
<option>Original Value 2-4</option>
</select>
<p>Clice the Move button to move the item with this position:</p>
<input type="text" id="txtIndex" /><br />
<input type="button" value="Move" onclick="moveItem()" />
<input type="button" value="Copy" onclick="copyItem()" />
</form>
</body>
</html>
例子（限制多行文本框的輸入最大值）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox. You can only type 25 characters.</p>
<form method="post" action="javascript:alert('Submitted')">
<textarea rows="10" cols="20" maxlength="25" onkeypress="return TextUtil.isNotMax(this)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
--------------------------------------------------------------------------
外置腳本中的調(diào)用的方法：
TextUtil.isNotMax=function(oTextArea)//判斷文本框內(nèi)的內(nèi)容的長度是否于文本框的最大長度相等
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};
例子（三個文本框，輸入達到第一個文本框的最大值，光標自動移到下一個文本框...）
復(fù)制代碼 代碼如下:
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script type="text/javascript" language="javascript" src="javascript/formutil.js"></script>
</head>
<body>
<p>Enter your phone number below (ZH style ##-####-######):</p>
<form method="post" action="javascript:alert('submit')">
<input type="text" size="2" maxlength="2" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="text" size="4" maxlength="4" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="text" size="7" maxlength="7" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
-------------------------------------------------------------------------------------
src="javascript/formutil.js"中的文本：
var FormUtil=new Object;
FormUtil.focusOnFirst = function() {
if (document.forms.length > 0) {//通過form的length屬性判斷表單中是否有其他元素
for (var i = 0; i < document.forms[0].elements.length; i++) {
var oField = document.forms[0].elements[i];
if (oField.type != "hidden") {
if (oField.value == "") {//在頁面載入很慢的情況下，該腳本可能還沒有運行，用戶就已經(jīng)輸入了數(shù)據(jù)，當執(zhí)行到該腳本的時候，會給用戶帶來不便。
oField.focus();
return;
}
}
}
}
};
FormUtil.setTextboxes=function()
{
var colInputs=document.getElementByTagName("input");
var colTextAreas=document.getElementsByTagName("textarea");
for(var i=0;i<colInputs.length;i++)
{
if(colInputs[i].type=="text" || colInputs[i].type=="password")
{
colInputsp[i].onfocus=function(){this.select();};
}
}
for(var i=0;i<colTextAreas.length;i++)
{
colTextAreas[i].onfocus=function(){this.select();};
}
};
FormUtil.tabForward = function(oTextbox) {
var oForm = oTextbox.form;
//條件為最后一個元素不是文本框并且文本框值的長度和文本框最大長度相等時
if (oForm.elements[oForm.elements.length - 1] != oTextbox && oTextbox.value.length == oTextbox.maxLength) { //oForm.elements[oForm.elements.length - 1] != oTextbox判斷當前傳進來的文本框不是最后一個文本框
for (var i = 0; i < oForm.elements.length; i++) { //oTextbox.value.length == oTextbox.maxLength 判斷當前輸入的文本有沒有達到它的最大值
if (oForm.elements[i] == oTextbox) {
if (oForm.elements[i + 1].type != "hidden") {
oForm.elements[i + 1].focus();
return;
}
return;
}
}
}
};
例子（當焦點離開時驗證文本框中的內(nèi)容）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script>
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Type a number into the textbox,then press the up or down arrow.</p>
<form method="post" action="javascript:alert('submit')">
<input type="text" onkeypress="return TextUtil.allowChars(this,event)" max="20" min="-10" validchars="0123456789" onblur="TextUtil.blurAllow(this)"
onkeydown="TextUtil.numericScroll(this,event)" />
<input type="button" value="Submit Form" />
</form>
</body>
</html>
--------------------------------
js：
TextUtil.blurBlock = function(oTextbox) {
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當于驗證字符串
var arrInvalidChars = sInvalidChars.split("");//將驗證字符串分隔為字符數(shù)組
for (var i = 0; i < arrInvalidChars.length; i++) {
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含數(shù)組中的任意字符，則驗證不通過
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
return; //跳出
}
}
};
JS 第七章 ：COOKIE操作與樣式表編程↑↓←→
//Cookie簡介
{
cookie是網(wǎng)站放在用戶計算機上的一小塊信息，分為： //例如： 手機QQ上的登錄，點擊記住用戶名密碼，下次就不同輸入了，這就是Cookie做的
復(fù)制代碼 代碼如下:
1、存入計算機內(nèi)存（臨時cookie）
2、寫入文件（持久cookies）
路徑 ：C:\Documents and Settings\Administrator\Cookies
}
//Cookie的組成：
復(fù)制代碼 代碼如下:
1.名稱：每一個cookie由一個唯一的名稱代表，不區(qū)分大小寫
2、值： 保存在Cookie中的字符串值，長度小于4KB
3、域： 出于安全考慮，網(wǎng)站不能訪問由其他域創(chuàng)建的cookie
4、路徑 ：限制了對web服務(wù)器上的特定目錄的訪問
5、失效日期 ：cookie何時應(yīng)該被刪除
6、安全標志： 一個bool值，用于表示cookie是否只能從安全網(wǎng)站（使用SSL和Https協(xié)議）中訪問
//安全限制
復(fù)制代碼 代碼如下:
1、每個域（每一個網(wǎng)站）最多只能在一臺用戶機器上存儲20個cookie
2、每個cookie的尺寸不能超過4096字節(jié)
3、一臺用戶機器上的cookie總數(shù)不能超過300個
4、瀏覽器自身的安全機制: 阻止所有cookie、阻止未知網(wǎng)站的cookie或者創(chuàng)建cookie時給用戶提示 （調(diào)試方法：工具→Internet選項→隱私→設(shè)置安全性級別）
//寫入cookie
復(fù)制代碼 代碼如下:
cookie實際上是一個字符串，當頁面載入時由瀏覽器自動生成。
通過document對象的cookie屬性可以操作。
在cookie中，信息由分號隔開，通常每個cookie都包含了一對由等號分開的名字和值。
fur=blue; food=biscuits; name=Cookie_Monster
//cookie的寫入有點類似于鍵值對的形式
例子（cookieWrite）(設(shè)置cookie的過期時間（過期時間被添加到cookie的末尾）)
復(fù)制代碼 代碼如下:
src="javascript/cookieWrite.js"中的內(nèi)容：
var myCookie=new Object();
myCookie.writeCookie = function(isLogin, isExpire)//isLogin表示登錄成功 isExpire表示是臨時還是持久cookie
{
var theCookie;
if (isLogin == true && isExpire == true) { //寫入永久cookie 注意：當創(chuàng)建自己的cookie字符串時，一定要確保名字和值不包括空格、逗號或者分號。這些字符會在解析cookie字符串的時候造成錯誤
var date = new Date(Date.parse("May 1, 2010")); //Date.parse("日期") 是將一個日期轉(zhuǎn)換為字符串
theCookie = "isLogin=marssion" + ";Expires=" + date.toGMTString(); //date.toGMTString()方法點不出來 ，是將時間進一步進行轉(zhuǎn)換成（GMT（格林威治時間表示法））類型的字符串格式
document.cookie = theCookie; //Expires=拼成的一個字符串：表示的是過期時間，和前面的字符串用“；“隔開，理論上一個cookie只有一個等號（用戶只能每次添加一個cookie，即使嚴格按照cookie串的格式將多個cookie拼接成一個大串，也無法將這個字符串加入到document.cookie中），加入過期時間是一個例外
location.href = "cookieRead.htm"; //點擊后跳轉(zhuǎn)到相應(yīng)的頁面
}
else if (isLogin == true && isExpire == false) { //寫入臨時cookie
theCookie = "isLogin=marssion";
document.cookie = theCookie;
location.href = "cookieRead.htm";
}
}
----------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/cookieWrite.js"></script>
<script language="javascript" type="text/javascript">
function CheckLogin()
{
var myvalue=document.getElementById("userName");
var pwd=document.getElementById("password");
if(myvalue.value=="marssion" && pwd.value=="1234") {
WriteCookie(true);//true表示用戶名密碼正確，登錄成功
return true;
}
else
{
alert("UserName or Password error!");
return false;
}
}
function WriteCookie(islogin)
{
var myCheckBox=document.getElementById("remember");
if(myCheckBox.checked==true)
{
myCookie.writeCookie(islogin,true);//寫入持久cookie
}
else
{
myCookie.writeCookie(islogin,false);//寫入臨時cookie
}
}
</script>
</head>
<body>
<h1>Writing Cookies</h1>
<h2>Look for the cookie in your cookie folder</h2>
<h3>Location:"C:\Documents and Settings\[UserName]\Cookies"</h3>
<form>
UserName:<br /><input type="text" id="userName" /><br />
Password:<br /><input type="password" id="password" /><br /><br />
<input type="button" value="Submit" onclick="if(CheckLogin()==false) return false" />
<input type="reset" value="Reset" /><br />
Remember Me<input id="remember" type="checkbox" checked="checked" value="NoExpire" />
</form>
</body>
</html>
例子（cookieRead）
復(fù)制代碼 代碼如下:
src="javascript/cookieRead.js"中的內(nèi)容：
var myCookie=new Object();
myCookie.getCookie = function(searchName)
{
var cookies=document.cookie.split(";");//cookie里的字符串是用“；”分隔開的
for(var i=0;i<cookies.length;i++)
{
var cookiecrumbs=cookies[i].split("="); //在把取出的字符串用“=”分隔開
var cookiename=cookiecrumbs[0];
var cookievalue=cookiecrumbs[1];
if(cookiename==searchName)
{
return cookievalue; //將找到得相應(yīng)的name的值返回去，每個cookie都有一個相應(yīng)的txt文檔，我們只需要將相應(yīng)的cookie名字給出，在存放cookie的txt文件夾里有一個dat數(shù)據(jù)庫文件，它會自動找到相應(yīng)的txt文檔
}
}
return false;
}
-----------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script language="javascript" type="text/javascript" src="javascript/cookieRead.js"></script>
<script language="javascript" type="text/javascript">
function load()
{
var isLogin=myCookie.getCookie("isLogin");
if (isLogin == "marssion")
{
document.write("登陸成功。歡迎你！");
}
else
{
location.href="cookieWrite.htm";
}
}
</script>
</head>
<body onload="load()">
</body>
</html>
例子（頁面上的超級鏈接鼠標移上去的時候下劃線變?yōu)樯蟿澗€）
復(fù)制代碼 代碼如下:
addLoadListener(init);
function init()
{
if(typeof document.styleSheets!="undefined") //document.styleSheets :當前引用的所有樣式
{
addStyleRule(document.styleSheets[0],"a:hover","text-decoration:overline"); //需要引用<link rel="Stylesheet" type="text/css" href="aa1.css" />
}
return true;
}
function addStyleRule(styleSheet,selector,properties,index)
{
if(typeof styleSheet.addRule!="undefined")
{
styleSheet.addRule(selector,properties,index);
}
else if(typeof styleSheet.insertRule!="undefined")
{
if(typeof index=="undefined")
{
index=styleSheet.cssRules.length;
}
styleSheet.insertRule(selector+"{"+properties+"}",index);
}
return true;
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
//讀取Cookie中Value的某個值
復(fù)制代碼 代碼如下:
下面為外置JS文件中的內(nèi)容：
---
var cookieName = "monsterCookie";
var cookieValue = "fur:blue/food:biscuits/name:monsterCookie";
debugger;
cookieValue=escape(cookieValue);//對cookie值進行編碼
var theCookie = cookieName + "=" + cookieValue;
document.cookie=theCookie;
var monsterName = getSubCookie("monsterCookie", "name");
alert("The value of the sub-cookie 'name' is :"+monsterName);
function getSubCookie(cookieName,subCookieName) {
var cookies=document.cookie.split(";"); //先用分號進行拆分
for(var i=0;i<cookies.length;i++)
{
var cookieCrumbs=cookies[i].split("="); //再用等號進行拆分
if(cookieCrumbs[0]==cookieName) //如果cookieCrumbs[0](拆分出的名字)等于傳入的名字
{
var cookieValue=cookieCrumbs[1]; //獲得所需要的值
cookieValue = unescape(cookieValue); //對cookie值進行解碼
var subCookies=cookieValue.split("/");
for(var j=0;j<subCookies.length;j++)
{
var subCookieCrumbs=subCookies[j].split(":");
if(subCookieCrumbs[0]==subCookieName)
{
return subCookieCrumbs[1];
}
}
}
}
return false;
}
-------------------------------------------------------------------------
//樣式：
//訪問樣式
復(fù)制代碼 代碼如下:
使用style對象需要注意幾個問題。
樣式設(shè)置必須符合CSS規(guī)范。
如果樣式屬性名稱中帶“-”號，首字母大些。
保留字，不能用作屬性名稱。
使用style對象獲取的屬性與元素最終顯示效果并不一定相同，因為除了內(nèi)聯(lián)樣式聲明之外，還可以通過<style>元素以及鏈接樣式表的方式改變元素的顯示效果
例子（關(guān)于style屬性值的拼寫，和在IE火狐中的區(qū)別）
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = document.getElementById("div1");
//alert(oDiv.style.cssFloat); //火狐 ：css+...
alert(oDiv.style.styleFloat); //IE：style+...
//alert(oDiv.style.backgroundColor);//將‘-'去掉，將后一個單詞首字母大寫
}
</script>
</head>
<body>
<div id="div1" style="background-color: red; height: 50px; width:
50px;float:left"></div><br />
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>
例子（變換層的顏色）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script type="text/javascript" language="javascript">
function aa()
{
var cr=document.getElementById("div1");
cr.style.backgroundColor='orange';
}
function bb()
{
var cr=document.getElementById("div1");
cr.style.backgroundColor="blue";
}
function cc()
{
var cr=document.getElementById("div1");
var cc=cr.style.backgroundColor.toString(); //必須去對象，用this報錯
alert(cc);
}
</script>
</head>
<body>
<div id="div1" style=" background-color:Red; height:50px; width:50px;" onmouseover="aa()" onmouseout="bb()"></div>
<input type="button" value="Get Background Color" onclick="cc()" />
</body>
</html>
-----------------------------------------------------
或者上面等價于：
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onmouseover="this.style.backgroundColor= 'blue'"
onmouseout="this.style.backgroundColor = 'green'"></div>
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>
例子（將樣式文本輸出）
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Style Example</title>
</head>
<body>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onclick="alert(this.style.cssText)"></div> //this.style.cssText : background-color: red; height: 50px; width: 50px
</body>
</html>
//通過Style對象讀取單個樣式的方法
復(fù)制代碼 代碼如下:
getPropertyPriority() 如果css屬性“important”定義在規(guī)則中則返回important，否則將返回空字符串
Item(index) 按照序號來返回css屬性中的名字
removeProperty(propertyName) 從css定義中刪除屬性
setProperty(propertyName,value,priority) 給css設(shè)置屬性
例子（屬性的設(shè)置和移除（火狐能用））
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function useMethods() {
var oDiv = document.getElementById("div1");
// IE不支持以下屬性和方法
alert(oDiv.style.item(0)); //outputs “background-color"
alert(oDiv.style.getPropertyValue("background-color")); //得到當前的background-color值
alert(oDiv.style.removeProperty("background-color")); //將background-color屬性移除
}
</script>
</head>
<body>
<div id="div1" style="background-color: red; height: 50px; width:50px"
onmousemove="this.style.setProperty('background-color','blue','')" <!--setProperty("樣式名（css格式）","樣式值","給空就行了")-->
onmouseout="this.style.setProperty('background-color','red','')"></div><br />
<input type="button" value="Use Methods" onclick="useMethods()" />
</body>
</html>
例子（動態(tài)改變字體的大小，用三元運算符使IE和火狐兼容）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<!--<link rel="Stylesheet" type="text/css" href="css/a.css" />-->
<style type="text/css">
* { //*{} 應(yīng)用所有
font-family: Tahoma, Arial, serif; //.div{} （class選擇器 應(yīng)用所有的層）
font-size: 18pt; //#id名{} (ID選擇器)
text-align: left;
}
.div {
font-size: 30px;
color: #FF4500;
}
</style> <!-- *{} 這是一個樣式規(guī)則--> <!-- .div{} 這是一個樣式規(guī)則-->
<script language="javascript" type="text/javascript">
var tag=false;
function change() {
// CSS樣式規(guī)則的集合
// 樣式規(guī)則
// ↓
var cssRules = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules; //此處三元運算符的作用是：讓IE和火狐都能用 // 修改.div樣式規(guī)則中的font-size樣式
// ↑ ↑
// 當前引用的所有樣式 三元運算符如果？前的結(jié)果返回的是true就執(zhí)行：前的返回的是false就執(zhí)行：后的
if(tag==false)
{
cssRules[1].style.fontSize = "60px";
tag=true;
}
else{
cssRules[1].style.fontSize = "30px";
tag=false;
}
}
</script>
</head>
<body>
<div id="div1" class="div">msg</div>
<div id="div2" class="div">msg</div>
<div id="div3" class="div">msg</div>
<button onclick="change()">change</button>
</body>
</html>
例子（切換樣式表1）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<link id="style1" type="text/css" rel="stylesheet" href="css/style1.css"title="white" />
<link id="style2" type="text/css" rel="stylesheet" href="css/style2.css" title="gray" />
<script language="javascript" type="text/javascript">
getElement("style1").href = "";
getElement("style2").href = "";
function setStyle(title,sa) {
// 首先禁用所有的樣式表
getElement("style1").href = "";
getElement("style2").href = "";
// 啟用指定的樣式表
getElement(title).href = sa;
}
function getElement(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div>
<p>
We would like to see as much CSS1 as possible.
</p>
<p>
If your design doesn't work in at least IE5+/Win and Mozilla (run
by over 90% of the population), chances are we won't accept it.
</p>
</div>
<button onclick="setStyle('style1','css/style1.css')">white</button>
<button onclick="setStyle('style2','css/style2.css')">gray</button>
</body>
</html>
例子（切換樣式表2）
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<link type="text/css" rel="stylesheet" href="css/style1.css" title="白色風格" id="style1" />
<link type="text/css" rel="stylesheet" href="css/style2.css" title="灰色風格" id="style2" />
<script language="javascript" type="text/javascript">
function setStyle() {
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var style1 = document.getElementById(option1.value);
var style2 = document.getElementById(option2.value);
// 首先禁用所有的樣式表
style1.disabled = true;
style2.disabled = true;
// 啟用指定的樣式表
if (option1.selected) {
style1.disabled = false;
}
else {
style2.disabled = false;
}
}
</script>
</head>
<body>
<select id="styleSel" onchange="setStyle()">
<option value="style1" id="option1">白色風格</option>
<option value="style2" id="option2">灰色風格</option>
</select>
<div>
<p>
We would like to see as much CSS1 as possible.
</p>
<p>
If your design doesn't work in at least IE5+/Win and Mozilla (run
by over 90% of the population), chances are we won't accept it.
</p>
</div>
</body>
</html>
例子（點擊層顯示，點擊層隱藏）
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function toggle(sDivId) {
var oDiv = document.getElementById(sDivId);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : //對象.style.display 顯示狀態(tài)：取值范圍： "none(不顯示)" "block(顯示)"
"none";
}
</script>
</head>
<body>
<div style="background-color: blue; color: white; font-weight: bold;
padding: 10px; cursor: pointer"
onclick="toggle('divContent1')">Click Here</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px"
id="divContent1">This is some content
to show and hide.</div>
<p> </p>
<div style="background-color: blue; color: white; font-weight: bold;
padding: 10px; cursor: pointer" <!-- cursor （指示鼠標的顯示狀態(tài)（pointer(手)））-->
onclick="toggle('divContent2')">Click Here</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px"
id="divContent2">This is some content
to show and hide.</div>
</body>
</html>
例子（鼠標移上，顯示層）
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function showTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible"; //對象.style.visibility 顯示狀態(tài)： 取值范圍是："visible(顯示)" "hidden(不顯示)" 和display用法相同，只是取值范圍不同
oDiv.style.left = oEvent.clientX + 5; //顯示層的坐標（鼠標的橫坐標+5）
oDiv.style.top = oEvent.clientY + 5; //顯示層的坐標（鼠標的縱坐標+5）
}
function hideTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>Move your mouse over the red square.</p>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
<div id="divTip1"
style="background-color: yellow; position: absolute; visibility:
hidden; padding: 5px">
<span style="font-weight: bold">Custom Tooltip</span><br />
More details can go here.
</div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了javascript自定義的addClass()方法，通過傳參就可以實現(xiàn)樣式的添加2014-05-05
bable是一個廣泛使用的ES6轉(zhuǎn)換器，可以將ES6代碼轉(zhuǎn)為ES5代碼，本文給大家介紹VScode里面怎么使用bable，使用npm安裝babel的方法，需要的朋友參考下吧2021-08-08
JS 事件綁定函數(shù)代碼，解決了瀏覽器兼容，現(xiàn)在可以兼容IE6 7 8 FF 谷歌2010-04-04
JavaScript面向?qū)ο笾R串結(jié)(讀JavaScript高級程序設(shè)計(第三版))
最近在看JavaScript高級程序設(shè)計(第三版)，面向?qū)ο笠徽?0多頁，來來回回看了三五遍，每次看的收獲都不一樣2012-07-07
JavaScript?中的單例內(nèi)置對象Global?與?Math
這篇文章主要介紹了JavaScript?中的單例內(nèi)置對象Global與Math，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
使用JS組件實現(xiàn)帶ToolTip驗證框的實例代碼
這篇文章主要介紹了使用JS組件實現(xiàn)帶ToolTip驗證框的實例代碼,需要的朋友可以參考下2017-08-08
這篇文章介紹了jquery滾動條事件的簡單實例，有需要的朋友可以參考一下2013-07-07
javascript學(xué)習網(wǎng)址備忘...2007-05-05
每個函數(shù)創(chuàng)建時默認帶有一個prototype屬性，其中包含一個constructor屬性，和一個指向Object對象的隱藏屬性,需要的朋友可以參考下2012-11-11
js拖拽是常見的網(wǎng)頁效果,本文將從零開始實現(xiàn)一個簡單的js插件,下面和小編來一起學(xué)習一下吧2019-05-05