小知識點注:外面雙引號,里面的雙引號改為單引號;
在div里面行高設置和整個外面高度一樣,才能用豎直居中,居中是行居中
文本框取出來的值是字符串,需要用parseint()轉化為數字
Window.document對象
一、找到元素:
docunment.getElementById("id");根據id找,最多找一個;
var a =docunment.getElementById("id");將找到的元素放在變量中;
docunment.getElementByName("name");根據name找,找出來的是數組;//可利用數組特性取值,賦值
docunment.getElementByTagName("name");根據標簽名找,找出來的是數組;//可利用數組特性取值,賦值
docunment.getElementByClassName("name") 根據classname找,找出來的是數組;(調用的時候與數組方式相同a[0]表示第一個)
二、操作內容:
1. 非表單元素:
1)獲取內容:
alert(a.innerHTML);標簽里的html代碼和文字都獲取了
如:body中有這么一個div:
<div id="me"><b>試試吧</b></div>
在script中用innerHTML獲取div中的內容:
var a= document.getElementById("me");
alert(a.innerHTML);
結果如下圖:
alert(a.innerText);只取里面的文字
alert(a.outHTML);包括標簽本身的內容(簡單了解)
2)設置內容:
a.innerHTML = "<font color=red >hello world </font>";
如果用設置內容代碼結果如下,div中的內容被替換了:
a.innerText會將賦的東西原樣呈現
清空內容:賦值個空字符串
2. 表單元素:
1)獲取內容,有兩種獲取方式:
a、(單標簽<input/> )
var t = document.f1.t1; form表單ID為f1里面的ID為t1的input;
var t = document.getElementById("id"); 直接用ID獲取。
alert(t.value); 獲取input中的value值;
b、<textarea> 這里的值 </textarea>
alert(t.innerHTML); 獲取<textarea> 這里的值 </textarea>;//與非表單元素獲取方式相同
c、<onselect><onselect>
2)設置內容: t.value="內容改變";
3. 一個小知識點:
<a href="www.baidu.com" onclick ="return flase">轉向百度</a> ;加了return flase則不會跳轉,默認是return true會跳轉。按鈕也一樣,如果按鈕中設置return flase 則不會進行提交,利用這個可以對提交跳轉進行控制。
三、操作屬性
首先利用元素的ID找到該元素,存於一個變量中:
var a = document.getElementById("id");
然后可以對該元素的屬性進行操作:
a.setAttribute("屬性名","屬性值"); 設置一個屬性,添加或更改都可以;
a.getAttribute("屬性名");獲取屬性的值;
a.removeAttribute("屬性名");移除一個屬性。
例子1:做一個問題,如果輸入的答案正確則彈出正確,錯誤彈出錯誤;
這里在text里面寫了一個daan屬性,里面存了答案的值,點擊檢查答案的時候cheak輸入的內容和答案是否一樣:
回答正確時的結果:
例子2: 同意按鈕,倒計時10秒,同意按鈕變為可提交的,這里用了操作屬性:disable,來改變按鈕的狀態,當disable=”disable”時按鈕不可用。
1 body中的代碼: 2 3 <form><input type="submit" id="b1" name="b1" value="同意(9)" disabled="disabled" /></form> 4 JS中的代碼: 5 6 var n=10;var a= document.getElementById("b1");function bian() 7 { 8 n--; 9 if(n==0) 10 { 11 a.removeAttribute("disabled"); 12 a.value="同意"; 13 return; 14 } 15 else 16 { 17 a.value= "同意("+n+")"; 18 window.setTimeout("bian()",1000); 19 } 20 } 21 window.setTimeout("bian()",1000);
運行的結果:
四、操作樣式
首先利用元素的ID找到該元素,存於一個變量中:
var a = document.getElementById("id");
然后可以對該元素的屬性進行操作:
a.style.樣式="" ; 操作此ID樣式的屬性。
樣式為CSS中的樣式,所有的樣式都可以用代碼進行操作。
document.body.stye.backgroundColor="顏色"; 整個窗口的背景色。
操作樣式的class:a.className="樣式表中的classname" 操作一批樣式
例子1:展示圖片的自動和手動切換;
Body中的代碼,做一個有背景圖片的div和兩側的控制對象: </div> <div id="tuijian" style=" background-image:url(imges/tj1.jpg);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> 樣式表中的代碼: <style type="text/css"> *{ margin:0px auto; padding:0px; font-family:"微軟雅黑"; } #tuijian { width:760px; height:350px; background-repeat:no-repeat; } .pages { top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity: 0.4; width: 30px; height:60px; } #p1 { background-image:url(imges/prev.png); float:left; margin:150px 0px 0px 10px; } #p2{ background-image:url(imges/next.png); float:right; margin:150px 10px 0px 0px; } </style> JS中的代碼,這里主要是每隔3秒中調用一下huan()函數,來將背景圖片的樣式修改,在點擊左右切換的時候變為手動切換,自動切換停止: <script language="javascript">var jpg =new Array(); jpg[0]="url(imges/tj1.jpg)"; jpg[1]="url(imges/tj2.jpg)"; jpg[2]="url(imges/tj3.jpg)";var tjimg = document.getElementById("tuijian");var xb=0;var n=0; function huan() { xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { var id = window.setTimeout("huan()",3000); } }function dodo(m) { n=1; xb = xb+m; if(xb < 0) { xb = jpg.length-1; } else if(xb >= jpg.length) { xb = 0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000);</script>
效果如下
5.相關元素操作
var a=document.getElementById(“id”);找到a
var b=a.nextSibling; 找a的下一個同輩元素,注意包含空格;
var b=a.previousSibling,找a的上一個同輩元素,注意包含空格;
var b=a.parentNode,找a的上一個父級元素;
var b=a.childNodes; 找出來的是數組,找a的下一級子元素;
var b=a.firstChild; 第一個子元素,lastChild最后一個,childNodes[n]找第幾個
alert(nodes[i] instanceof Text);判斷是不是文本,是則返回true,不是返回false,用if判斷它的值是不是false,可以去除空格。
6.元素的創建、添加、刪除:
var a=document.getElementById(“id”);找到a;
創建:var obj=document.createElement(“標簽名“);創建一個元素
obj.innerHTML=”hello world”;添加的時候首先需要創建出一個元素。
添加:a.appendChild(obj);向a中添加一個子元素。
a.removeChild(obj);刪除一個子元素。
列表中a.selectIndex:選中的是第幾個;a.options[a.selectIndex]按下標取出第幾個option對象
7.字符串的操作
var s=new String();或var s=”aaaa”;
var s=”hello world”;
alert(s.toLowerCase());轉小寫 toUpperCase()轉大寫
alert(s.substring(3,8));從第三個位置截取到第八個位置
alert(s.substr(3,8));從第三個位置開始截取,截取八個字符長度,不寫后面的數字是截到最后。
s.split(‘’);將字符串按照指定的字符拆開
s.length是屬性
s.indexOf(“wordl”);world在字符串中第一次出現的位置,沒有返回-1
s.lastIndexOf(“o”);o在字符串最后一次出現的位置
8.日期時間的操作
var d=new Date();當前時間
var d=new Date(1999,3,2);定義一個時間,1999年4月2日,3要加1
d.getFullYear:取年份;d.getMonth():取月份,取出來的少1;d.getDate():取天;d.getDay();取星期幾
d.getHours():取小時;d.getMinutes();取分鍾;d.getSecond();取秒;d.setFullYear():設置年份,設置月份的時候注意加1。
9.數學函數的操作
Math.ceil();大於當前小數的最小整數
Math.floor();小於當前小數的最大整數
Math.sqrt();開平方
Math.round();四舍五入
Math.random();隨機數,0-1之間
小知識點:外面雙引號,里面的雙引號改為單引號;
在div里面行高設置和整個外面高度一樣,才能用數值居中,居中是行居中。
文本框取出來的值是字符串,需要用parseint()轉化為數字
s.match(reg);s代表一個字符串,reg代表一個字符串,兩者進行匹配,如果兩個字符串不匹配,返回一個null。
四、表單驗證和事件
㈠表單驗證
1.非空驗證(去空格)
2.對比驗證(跟一個值對比)
3.范圍驗證(根據一個范圍進行判斷)
4.固定格式驗證:電話號碼,身份證號,郵箱,信用卡號等的驗證;需要用到正則表達式來進行驗證。
5.其它驗證
㈡正則表達式
用符號來描述書寫規則:/中間寫正則表達式/
^:匹配開頭,$:匹配結尾;/^e/以ve開頭的/ve$/以ve結尾
\d:一個任意的數字
\w:一個任意的數字或字母
\s:任意字符串
{n}:把左邊的表達式重復n遍
{m,n}:把左邊的表達式重復至少m遍,至多n遍
{m,}把左邊的表達式重復至少m遍,至多不限
+:左邊的表達式,至少出現一次,至多不限,相當於{1,}
*:左邊的表達式,至少出現0次,至多不限,相當於{0,}
?:左邊的表達式,至少出現0次,至多出現1次,相當於{0,1}
[a,b,c]:只能取方括號中內容之一
[a-z]或[1-9]:在范圍中取其一 [a-z,A-Z]
|:代表或者;():優先級\:轉義—“\(\)”這個才是要出現的小括號,需要轉義