DOM對象屬性
阿新 • • 發佈:2017-09-07
ext 字符串操作 tag click 檢測 裏的 點擊 .cn als
B) disabled true類型的值都可以用
事件
onmouseover 鼠標以上事件 onmouseout 鼠標離開事件 onclock 鼠標點擊事件 onfocus 獲取焦點 onblur 失去焦點 oninput 輸入事件 頁面直接獲取光標:事件源 . focus() 小知識 1、replace("被替代的值","替換值") 方法用於在字符串中。用一些字符替換另一些字符 表單屬性 1、type、value、checked、selected、disabled 2、禁用文本框 A) disabled 禁用文本框B) disabled true類型的值都可以用
inp.disabled=true“aaa”; inp.disabled=false;
案例
//顯示 隱藏二維碼 window.onload=function(){ var nodeSmall=document.getElementsByClassName("nodeSmall")[0]; //類名取值 var div=document.getElementsByTagName("div")[1];//標簽取值 console.log(div.className)//獲取它的 類名 字符串 //綁定事件 調用事件函數,不要寫括號,只寫函數名 nodeSmall.onmouseover=fu1; nodeSmall.onmouseout=fu2; function fu1(){ //了解 字符串操作,吧字符串中的hide替換成show /*div.className="erweima show"*/ div.className=div.className.replace("hide","show"); } function fu2() { /* div.className="erweima hide"*/ div.className=div.className.replace("show","hide"); } };
//獲取失去焦點 var inp1=document.getElementById("inp1"); inp1.onfocus=function (){ if(this.value==="我是京東"){ this.style.color="#000"; this.value="" } }; inp1.onblur =function (){ if(this.value === ""){ this.style.color="#ccc"; inp1.value = "我是京東"; } }
//需求1:點擊上面的的input,下面全選或者反選。 //思路:獲取了上面的input按鈕,只需要判斷,checked屬性是true還是false,如果是true, 下面的全部變成true;false同理。 var tioInp=document.getElementById("theadInp"); var tbo=document.getElementById("tbody"); var inpArr=tbo.getElementsByTagName("input"); tioInp.onclick=function(){ //費勁版 /* if(tioInp.checked===true){ for(var i=0; i<inpArr.length; i++ ){ inpArr[i].checked=true; } }else{ for(var i=0; i<inpArr.length; i++ ){ inpArr[i].checked=true; } }*/ //優化版 //被點擊的input按鈕的checked屬性值,應該直接作為下面的所有的input按鈕的checked屬性值 for(var i=0; i<inpArr.length; i++ ){ inpArr[i].checked=this.checked; } } //需求2:點擊下面的的input,如果下面的全部選定了,上面的全選,否則相反。 //思路:為下面的每一個input綁定事件,每點擊一次都判斷所有的按鈕 // checked屬性值是否全部都是true,如果有一個是false, // 那麽上面的input的checked屬性也是false;都是true,topInp的checked就是true; for(var i=0; i<inpArr.length; i++){ inpArr[i].onclick=function () { var bool=true;//開辟原則 //檢測每一個input的checked屬性值。 for(var j=0; j<inpArr.length; j++){ if(inpArr[j].checked===false){ bool=false; } tioInp.checked=bool; } } }
用戶名:<input type="text" onclick="fu(this)"><br><br> <script> function fu(aa){ //這裏的this window 標簽行內調用function的時候,是先通過 //window調用的function console.log(this); //只有傳遞的this才指的是標簽本身 console.log(aa)
DOM對象屬性