javaScript事件,Bom,Dom物件

路過的大白發表於2020-11-12

內容

你好! 這是你第一次使用 **Markdown編輯器** 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章,瞭解一下Markdown的基本語法知識。

事件

事件 (Event) 是 JavaScript 應⽤跳動的⼼髒 ,進⾏互動,使⽹⻚動起來。當我們與瀏覽器中 Web ⻚⾯
進⾏某些型別的互動時,事件就發⽣了。事件可能是⽤戶在某些內容上的點選、⿏標經過某個特定元素 或按下鍵盤上的某些按鍵。事件還可能是 Web
瀏覽器中發⽣的事情,⽐如說某個 Web ⻚⾯載入完成, 或者是⽤戶滾動窗⼝或改變窗⼝⼤⼩。

常用事件

⼏個常⽤的事件: onclick 、onblur 、onfocus 、onload 、onchange
onmouseover、onmouseout、onkeyup、onkeydown

onload:當⻚⾯或影像載入完後⽴即觸發
onblur:元素失去焦點
onfocus:元素獲得焦點
onclick:⿏標點選某個物件
onchange:⽤戶改變域的內容
onmouseover:⿏標移動到某個元素上
onmouseout:⿏標從某個元素上離開
onkeyup:某個鍵盤的鍵被鬆開
onkeydown:某個鍵盤的鍵被按下

事件繫結

  1. 行內式:<button type="button" onclick="alert()">提交</button>
  2. 內聯式:在script標籤內寫事件,使用標籤內的事件繫結
    <script type="text/javascript"> function showpwd(){ document.getElementById("pwd").type="text"; } function namecheck(){ //location.reload(); var cur=document.getElementById("name"); var val=cur.value; if(val.length<=6){ cur.nextSibling.innerText="使用者名稱長度不夠"; return 0; } for(var one in val){ console.log(one); if(val.charAt(one)=='$'||val.charAt(one)=='#'){ cur.nextSibling.innerText="特殊字元"; return 0; } } //location.reload(); cur.nextSibling.innerText=""; return 1; } function pwdcheck(){ var cur=document.getElementById("pwd"); var val=cur.value; if(val.length<=9){ cur.nextSibling.innerText="密碼長度不夠"; return 0; } cur.nextSibling.innerText=""; return 1; } function hobbycheck(){ var items=document.getElementsByName("hobby"); var len=0; for(var i=0;i<items.length;i++){ if(items[i].checked){ len++; } } if(len==0){ document.getElementById("hb").innerText="請至少選擇一項"; return 0; }else{ document.getElementById("hb").innerText=""; return len; } } function sexcheck(){ var items=document.getElementsByName("sex"); var len=0; for(var i=0;i<items.length;i++){ if(items[i].checked){ len++; } } if(len==0){ document.getElementById("hb").innerText="請至少選擇一項"; return 0; }else{ document.getElementById("hb").innerText=""; return len; } } function submitcheck(){ if(namecheck()!=0&&pwdcheck()!=0){ if(hobbycheck()==0){ alert("請選擇至少一項"); return; } if(sexcheck()==0){ alert("性別不能為空"); return; } alert("驗證成功"); }else{ alert("使用者名稱密碼請規範"); } } </script>
<label for="pwd">密碼(大於9位)</label><input type="password" id="pwd" name="pwd" onblur="pwdcheck()"><span style="background-color: #FF0000;"></span><br />

3.引入式:外部引入js檔案,事件繫結外部方法

bom物件

BOM的核⼼物件是window,它表示瀏覽器的⼀個例項。window物件有雙重⻆⾊,它既是通過
JavaScript訪問瀏覽器窗⼝的⼀個接⼝,⼜是ECMAScript規定的Global物件。這意味著在⽹⻚中定義的任
何⼀個物件、變數和函式,都以window作為其Global物件,因此有權訪問parseInt()等⽅法。如果⻚⾯中
包含框架,則每個框架都擁有⾃⼰的window物件,並且儲存在frames集合中。在frames集合中,可以通
過數值索引(從0開始,從左⾄右,從上到下)或者框架的名稱來訪問相應的window物件。

windows物件

系統對話方塊

(1)訊息框:alert, 常⽤。
alert() ⽅法⽤於顯示帶有⼀條指定訊息和⼀個 OK 按鈕的警告框。
(2)輸⼊框:prompt,返回提示框中的值。
prompt() ⽅法⽤於顯示可提示⽤戶進⾏輸⼊的對話方塊。
引數(可選):
第⼀個引數:要在對話方塊中顯示的純⽂本。
第⼆個引數:預設的輸⼊⽂本。
(3)確認框:confirm,返回 true/false.
confirm() ⽅法⽤於顯示⼀個帶有指定訊息和 OK 及取消按鈕的對話方塊

視窗

開啟

<script type="text/javascript">
function openBaidu(){
 window.open('http://www.baidu.com','_self'); // _self、_blank等
 // window.open(); //空⽩窗⼝
}
</script> <input type="button" name="open" value="百度" onclick='openBaidu();' />

關閉

<input type="button" value="關閉窗⼝" onclick="window.close();" />

location

location 物件是window物件之⼀,提供了與當前窗⼝中載入的⽂檔有關的資訊,還提供了⼀些導航功
能。也可通過 window.location 屬性來訪問。
location 物件的屬性 href:設定或返回完整的 URL
location 物件的⽅法
reload():重新載入當前⽂檔。
replace():⽤新的⽂檔替換當前⽂檔。

<script type="text/javascript">
 function openBaidu(){
 // 沒有歷史記錄,⽤新的⽂檔替換當前⽂檔
 // window.location.replace("http://www.baidu.com");
 // console.log(window.location.href); // 獲取完整的url
 window.location.href = "http://www.baidu.com";
 }
</script> <body>
 <input type="text" value="" />
 <input type="button" value="重新整理" onclick="window.location.reload();" />
 <input type="button" value="百度" onclick="openBaidu();" />
</body

dom物件

DOM:Document Object Model ⽂檔物件模型
要實現⻚⾯的動態互動效果,bom 操作遠遠不夠,需要操作 html 才是核⼼。如何操作 html,就是
DOM。簡單的說,dom 提供了⽤程式動態控制 html 接⼝。DOM即⽂檔物件模型描繪了⼀個層次化的節
點樹,運⾏開發⼈員新增、移除和修改⻚⾯的某⼀部分。dom 處於javascript 的核⼼地位上。
每個載⼊瀏覽器的 HTML ⽂檔都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML
⻚⾯中的所有元素進⾏訪問。Document 物件是 Window 物件的⼀部分,可通過 window.document 屬性
對其進⾏訪問。

獲取節點(標籤)

在這裡插入圖片描述### 建立節點
在這裡插入圖片描述### 插⼊節點
在這裡插入圖片描述

查詢,刪除節點

在這裡插入圖片描述 在這裡插入圖片描述

獲取表單

1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱] 4、document.forms[索引]; //從 0 開始

獲取表單元素

1)、通過 id 獲取:document.getElementById(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 陣列 :document.getElementsByTagName(‘input’)[索引] // 從0開始

<body>
 <form id='myform' name="myform" action="" method="get"> 
 姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
 密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
 <input type="hidden" id="uno" name="uno" value="隱藏域" />
 個⼈說明:<textarea name="intro"></textarea>
 <button type="button" onclick="getTxt();" >獲取元素內容</button>
 </form>
</body> <script>
 function getTxt(){
 var uno = document.getElementById("uno");
 var uname = myform.uname;
 console.log(uname + "--------");
 var upwd = document.getElementsByTagName('input')[1] ;
 var intro = document.getElementsByName("intro")[0]; 
 console.log(uno.value +","+ uname.value +","+ upwd.value +","+ intro.value);
 }
</script>

單選框以及,文字,密碼等框

document.getElementsByName(“name屬性值”).value

核取方塊

已選擇的框的checked屬性是checked

var ufav = document.getElementsByName("ufav");
var favstr = "";
 for (i = 0;i < ufav.length; i++){
 if(ufav[i].checked){
 favstr += ufav[i].value+",";
 }
 }
favstr = favstr.substr(0,favstr.length-1);

下拉選單

(1)獲取 select 物件: (2)獲取選中項的索引: (3)獲取選中項 options 的
value屬性值:注意:當通過options獲取選中項的value屬性值時,
若沒有value屬性,則取option標籤的內容若存在value屬性,則取value屬性的值 (4)獲取選中項 options 的
text:選中狀態設定:selected='selected’selected=true、selected未選中狀態設定:不設selected屬性

<body onload="init()">
 <form id='myform' name="myform" action="" method=""> 
 來⾃:
 <select id="ufrom" name="ufrom">
 <option value="-1" >請選擇</option>
 <option value="0" selected="selected">北京</option>
 <option value="1">上海</option>
 </select><br />
 <button type="button" id="sub" name="sub">提交</button>
 </form>
</body> <script>
 function init () {
 var sub = document.getElementById("sub");
 sub.onclick = function () {
 //獲取select物件
 var ufrom = document.getElementById("ufrom");
 console.log("表單物件:" + ufrom);
 //獲取選中的索引
 var idx = ufrom.selectedIndex;
 console.log("選中項的索引值:" + idx);
 //獲取選中項的value值
 var val = ufrom.options[idx].value;
 console.log("選中項的value屬性值:" + val);
 //獲取選中項的text
 var txt = ufrom.options[idx].text;
 console.log("選中項的text:" + txt);
 }
 }
</script>

表單提交

(1)使⽤普通button按鈕+onclick事件+事件中編寫程式碼:
獲取表單.submit();
(2)使⽤submit按鈕 + οnclick=“return 函式()” +函式編寫程式碼:
最後必須返回:return true|false;
(3)使⽤submit按鈕/圖⽚提交按鈕 + 表單οnsubmit=“return 函式();” +函式編寫程式碼:
最後必須返回:return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
 <input name="test" id="uname"/><span id="msg"></span><br />
 <!--通過js事件:sub()提交表單-->
 <input type="button" onclick="sub();" value="提交表單1" />
 <input type="submit" onclick="return sub2();" value="提交表單2" />
 <input type="submit" value="提交onsubmit" /><br />
 <input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
 width="60px" height="40px" />
</form> <script type="text/javascript"> 
 // input的type=button,調⽤submit()⽅法提交
 function sub(){
 document.myform2.submit();
 }
 // 進⾏校驗,返回值為true才能提交
 function sub2(){
 var uname = document.getElementById("uname");
 var val = uname.value;
 if(val.length>0){
 return true; // 提交
 }
 document.getElementById("msg").innerHTML = "不能空著啊!!!";
 document.getElementById("msg").style.color="red";
 return false; // 不提交
 }
 // onsubmit事件提交
 function onsub () {
 var uname = document.getElementById("uname");
 var val = uname.value;
 if(val.length>0){
 return true; // 提交
 }
 document.getElementById("msg").innerHTML = "填寫點⼉東⻄唄!(ˉ▽ ̄~) 切~~";
 document.getElementById("msg").style.color="red";
 return false; // 不提交
 }
</script>

相關文章