1,
// document.getElementsByTagName("input"); // 是按照指定標籤名來進行查詢並返回集合 // 這個集合的操作跟數組 一樣 // 集合中都是dom對象 // 集合中元素順序 是他們在html頁面中從上到下的順序。
2,
// document.getElementsByName();是根據 指定的name屬性查詢返回多個標籤對象集合 // 這個集合的操作跟數組 一樣 // 集合中每個元素都是dom對象 // 這個集合中的元素順序是他們在html頁面中從上到下的順序
3,
/* * test()方法用於測試某個字符串,是不是匹配我的規則 , * 匹配就返回true。不匹配就返回false. * */
// innerHTML 表示起始標籤和結束標籤中的內容 // innerHTML 這個屬性可讀,可寫
// [object HTMLInputElement] 它就是dom對象
4,
window.onload = function () { // 現在需要我們使用js代碼來創建html標籤,並顯示在頁面上 // 標籤的內容就是:<div>哈哈</div> var divObj = document.createElement("div"); // 在內存中 <div></div> var textNodeObj = document.createTextNode("哈哈"); // 有一個文本節點對象 #國哥,我愛你 divObj.appendChild(textNodeObj); // divObj.innerHTML = "測試"; // 只是在內存中 // 添加子元素 document.body.appendChild(divObj); }
5,
// 表示要求字符串中,是否包含字母e // var patt = new RegExp("e"); // var patt = /e/; // 也是正則表達式對象 // 表示要求字符串中,是否包含字母a或b或c // var patt = /[abc]/; // 表示要求字符串,是否包含小寫字母 // var patt = /[a-z]/; // 表示要求字符串,是否包含任意大寫字母 // var patt = /[A-Z]/; // 表示要求字符串,是否包含任意數字 // var patt = /[0-9]/; // 表示要求字符串,是否包含字母,數字,下劃線 // var patt = /\w/; // 表示要求 字符串中是否包含至少一個a // var patt = /a+/; // 表示要求 字符串中是否 *包含* 零個 或 多個a // var patt = /a*/; // 表示要求 字符串是否包含一個或零個a // var patt = /a?/; // 表示要求 字符串是否包含連續三個a // var patt = /a{3}/; // 表示要求 字符串是否包 至少3個連續的a,最多5個連續的a // var patt = /a{3,5}/; // 表示要求 字符串是否包 至少3個連續的a, // var patt = /a{3,}/; // 表示要求 字符串必須以a結尾 // var patt = /a$/; // 表示要求 字符串必須以a打頭 // var patt = /^a/; // 要求字符串中是否*包含* 至少3個連續的a // var patt = /a{3,5}/; // 要求字符串,從頭到尾都必須完全匹配 // var patt = /^a{3,5}$/;
6,
window.onload = function(){ //1.查找#bj節點 document.getElementById("btn01").onclick = function () { var bjObj = document.getElementById("bj"); alert(bjObj.innerHTML); } //2.查找所有li節點 var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ var lis = document.getElementsByTagName("li"); alert(lis.length) }; //3.查找name=gender的所有節點 var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ var genders = document.getElementsByName("gender"); alert(genders.length) }; //4.查找#city下所有li節點 var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ //1 獲取id爲city的節點 //2 通過city節點.getElementsByTagName按標籤名查子節點 var lis = document.getElementById("city").getElementsByTagName("li"); alert(lis.length) }; //5.返回#city的所有子節點 var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ //1 獲取id爲city的節點 //2 通過city獲取所有子節點 alert(document.getElementById("city").childNodes.length); }; //6.返回#phone的第一個子節點 var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ // 查詢id爲phone的節點 alert( document.getElementById("phone").firstChild.innerHTML ); }; //7.返回#bj的父節點 var btn07Ele = document.getElementById("btn07"); btn07Ele.onclick = function(){ //1 查詢id爲bj的節點 var bjObj = document.getElementById("bj"); //2 bj節點獲取父節點 alert( bjObj.parentNode.innerHTML ); }; //8.返回#android的前一個兄弟節點 var btn08Ele = document.getElementById("btn08"); btn08Ele.onclick = function(){ // 獲取id爲android的節點 // 通過android節點獲取前面兄弟節點 alert( document.getElementById("android").previousSibling.innerHTML ); }; //9.讀取#username的value屬性值 var btn09Ele = document.getElementById("btn09"); btn09Ele.onclick = function(){ alert(document.getElementById("username").value); }; //10.設置#username的value屬性值 var btn10Ele = document.getElementById("btn10"); btn10Ele.onclick = function(){ document.getElementById("username").value = "你猜猜"; }; //11.返回#bj的文本值 var btn11Ele = document.getElementById("btn11"); btn11Ele.onclick = function(){ alert(document.getElementById("city").innerHTML); alert(document.getElementById("city").innerText); }; };
7,
// 靜態註冊失去焦點事件 function onblurFun() { // console是控制檯對象,是由JavaScript語言提供,專門用來向瀏覽器的控制器打印輸出, 用於測試使用 // log() 是打印的方法 console.log("靜態註冊失去焦點事件"); } // 動態註冊 onblur事件 window.onload = function () { //1 獲取標籤對象 var passwordObj = document.getElementById("password"); // alert(passwordObj); //2 通過標籤對象.事件名 = function(){}; passwordObj.onblur = function () { console.log("動態註冊失去焦點事件"); } }
8,
function onchangeFun() { alert("女神已經改變了"); } window.onload = function () { //1 獲取標籤對象 var selObj = document.getElementById("sel01"); // alert( selObj ); //2 通過標籤對象.事件名 = function(){} selObj.onchange = function () { alert("男神已經改變了"); } }
9,
function onclickFun() { alert("靜態註冊onclick事件"); } // 動態註冊onclick事件 window.onload = function () { // 1 獲取標籤對象 /* * document 是JavaScript語言提供的一個對象(文檔)<br/> * get 獲取 * Element 元素(就是標籤) * By 通過。。 由。。經。。。 * Id id屬性 * * getElementById通過id屬性獲取標籤對象 **/ var btnObj = document.getElementById("btn01"); // alert( btnObj ); // 2 通過標籤對象.事件名 = function(){} btnObj.onclick = function () { alert("動態註冊的onclick事件"); } }
10,
// onload事件的方法 function onloadFun() { alert('靜態註冊onload事件,所有代碼'); } // onload事件動態註冊。是固定寫法 window.onload = function () { alert("動態註冊的onload事件"); }
<!--靜態註冊onload事件 onload事件是瀏覽器解析完頁面之後就會自動觸發的事件 <body οnlοad="onloadFun();"> -->
11,
// 靜態註冊表單提交事務 function onsubmitFun(){ // 要驗證所有表單項是否合法,如果,有一個不合法就阻止表單提交 alert("靜態註冊表單提交事件----發現不合法"); return flase; } window.onload = function () { //1 獲取標籤對象 var formObj = document.getElementById("form01"); //2 通過標籤對象.事件名 = function(){} formObj.onsubmit = function () { // 要驗證所有表單項是否合法,如果,有一個不合法就阻止表單提交 alert("動態註冊表單提交事件----發現不合法"); return false; } }
<!--return false 可以阻止 表單提交 --> <form action="http://localhost:8080" method="get" οnsubmit="return onsubmitFun();"> <input type="submit" value="靜態註冊"/> </form> <form action="http://localhost:8080" id="form01"> <input type="submit" value="動態註冊"/> </form>