文章目錄
- js數組
- 定義方式
- 數組遍歷
- js函數
- 函數入門
- 函數使用方式
- 使用方式一
- 使用方式二
- 函數注意事項
- 函數練習題
- 定義對象
- 使用object定義
- 使用{}定義
- 事件
- onload事件
- onclick事件
- 失去焦點事件
- 內容發生改變事件
- 表單提交事件
- 靜態注冊
- 動態注冊
- 表單作業
- dom對象
- 文檔對象模型
- document對象
- 應用實例一
- 應用實例二
- 應用示例三
- 應用案例四
- DOM節點
- 節點常用方法
- 通過id獲取節點
- 獲取所有option節點
- 通過name獲取節點
- 查找id=language下所有li節點
- 獲取指定dom對象的所有子節點
- 獲取第一個子節點
- 獲取父節點
- 獲取前后兄弟節點
- 設置文本域內容
- js dom 烏龜吃雞游戲
- 靜態注冊實現
js數組
定義方式
array_define.html
數組遍歷
traversal-array.html
js函數
函數入門
simple_function.html
函數使用方式
使用方式一
1.function-use.html
使用方式二
2.function-use.html
函數注意事項
function-detail.html
函數練習題
function-exercise.html
定義對象
使用object定義
1.object_difine.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定義對象</title><script type="text/javascript">//自定義對象的方式一//person是一個空對象, 沒有自定義的函數和屬性var person = new Object();//built-inconsole.log("person類型 = " + typeof(person));//object//增加一個屬性nameperson.name = "趙志偉";//增加一個屬性ageperson.age = 22;//增加一個函數person.hi = function () {//這里的this就是當前的personconsole.log("person的信息 " + this.name + " " + this.age);}//訪問屬性console.log("name=" + person.name);//訪問方法person.hi();//小細節,如果沒有定義某個屬性,直接使用,就會出現:變量提升(專業術語),顯示undefinedconsole.log(person.email);//undefined//方法不能提升person.say();</script>
</head>
<body></body>
</html>
使用{}定義
2.function_define.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>z自定義對象方法2: {} 形式</title><script type="text/javascript">//演示自定義對象方法2: {} 形式var person = {name: "趙志偉",//多個屬性之間使用,隔開age: 23,hi: function () {console.log("person信息 = " + this.name + this.age);},sum: function (n1, n2) {return n1 + n2;}}//使用console.log("person.name=" + person.name + ", person.age=" + person.age);person.hi();console.log("sum=" + person.sum(1, 2));</script>
</head>
<body>
</body>
</html>
事件
- 事件的注冊(綁定)
事件注冊(綁定),當事件響應(觸發)后要瀏覽器執行哪些操作代碼,叫做事件注冊或事件綁定; - 靜態注冊事件
通過html標簽的事件屬性直接賦予事件響應后的代碼,這種方式叫做靜態注冊; - 動態注冊事件(dom)
通過 js 代碼得到標簽的 dom 對象,然后再通過 dom 對象.事件名 = function () {} 這種形式叫做動態注冊
步驟:(1)獲取標簽對象dom對象; (2)標簽對象.事件名 = function() {}
onload事件
onload.html
onclick事件
onclick.html
失去焦點事件
onblur.html
內容發生改變事件
onchange.html
表單提交事件
靜態注冊
onsubmit.html
動態注冊
onsubmit1.html
表單作業
onsubmit-作業.html
dom對象
- DOM 全稱是 Document Object Model 文檔對象模型;
- 就是將文檔中的標簽, 屬性, 文本轉換成對象來管理;
文檔對象模型
- 當網頁被加載時, 瀏覽器會創建頁面的文檔對象模型(Document Object Model)
- html dom 樹
document對象
- document 它管理了所有的HTML 文檔內容;
- document 它是一種樹結構的文檔;
- 有層級關系, 在 dom中把所有的標簽都 對象化;
- 通過document 可以訪問所有的標簽對象;
應用實例一
getElementById.html
應用實例二
1.靜態注冊
getElementsByName.html
2.動態注冊
getElementsByName-動態注冊.html
應用示例三
getElementsByTagName.html
- 升級版:做到貓狗切換
思路:根據value值判斷選擇具體的執行方法
應用案例四
createElements.html
DOM節點
在HTML DOM(文檔對象模型)中,每個部分都是節點
- 文檔 本身是文檔節點;
- 所有 HTML元素 是元素節點;
- 所有 HTML屬性 是屬性節點;
- HTML元素內的 文本 是文本節點;
- 注釋是 注釋 節點;
節點常用方法
通過id獲取節點
html-dom-01.html
獲取所有option節點
html-dom02.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//查找所有option節點var btn02 = document.getElementById("btn02");btn02.onclick = function () {//id --> getElementById()//name --> getElementsByName()//元素標簽 --> getElementsByTagName()var options = document.getElementsByTagName("option");//HTMLCollectionfor (var i = 0; i < options.length; i++) {alert("options[" + (i + 1) + "] = " + options[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你當前的女友是誰:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋楓</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn02">查找所有option節點</button></div>
</div>
</body>
</html>
通過name獲取節點
html-dom03.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//查找name=sport節點var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");// alert(sports);//NodeListfor (var i = 0; i < sports.length; i++) {if (sports[i].checked) {alert("運動是 = " + sports[i].value);}}};}</script>
</head>
<body>
<div><div><p>你喜歡的運動項目:</p><input type="checkbox" name="sport" value="soccer" checked="checked"/>足球<input type="checkbox" name="sport" value="basketball" checked="checked"/>藍球<input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球</div>
</div>
<div id="btnList"><div><button id="btn03">查找name=sport節點</button></div>
</div>
</body>
</html>
查找id=language下所有li節點
html-dom04.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//查找id=language下所有li節點var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");// alert("lis=" + lis);//HTMLCollectionfor (var i = 0; i < lis.length; i++) {alert("lis[" + (i + 1) + "] = " + lis[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你的編程語言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go語言</li></ul></div>
</div>
<div id="btnList"><div><button id="btn04">查找id=language下所有li節點</button></div>
</div>
</body>
</html>
獲取指定dom對象的所有子節點
html-dom05.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//返回id=sel01的所有子節點var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(options.length);//5 不算換行符//1. 如果使用document.getElementById("sel01").childNodes; 獲取的是[object Text],[object HTMLOptionElement]//2. 如果不希望得到 text對象, 需要將所有的內容放在一行var childNodes = document.getElementById("sel01").childNodes;//alert(childNodes);//NodeList//alert(childNodes.length);//11, 加上文本, 在這里換行符屬于文本[object Text]for (var i = 0; i < childNodes.length; i++) {//alert(childNodes[i]);//HTMLOptionElementif (childNodes[i].innerText != undefined && childNodes[i].selected) {alert("女友有 = " + childNodes[i].innerText);}}alert("===============還有一個方法===============");//1.sel01 是 HTMLSelectElement => 本身具有集合的特點var sel01 = document.getElementById("sel01");alert(sel01);//HTMLSelectElementalert(sel01[0]);//HTMLOptionElementfor (var i = 0; i < sel01.length; i++) {alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);}};};</script>
</head>
<body>
<div><div><p>你當前的女友是誰:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋楓</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn05">返回id=sel01的所有子節點</button></div>
</div>
</body>
</html>
獲取第一個子節點
html-dom06.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//返回id=sel01 的第一個子節點var btn06 = document.getElementById("btn06");btn06.onclick = function () {var sel01 = document.getElementById("sel01");var childNodes = sel01.childNodes;alert(childNodes[0]);//object Textvar firstChild = sel01.firstChild;alert(firstChild);//object Text]alert(sel01[0]);//直接得到第一個option節點 object HTMLOptionElement}};</script>
</head>
<body>
<div><div><p>你當前的女友是誰:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋楓</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn06">返回id=sel01的第一個子節點</button></div>
</div>
</body>
</html>
獲取父節點
html-dom07.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//返回id=java的父節點var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");alert(java);//HTMLLIElementvar parentNode = java.parentNode;alert(parentNode);//HTMLUListElementalert(parentNode.innerText);alert(parentNode.innerHTML);//<li id="java">Java</li>var childNodes = parentNode.childNodes;alert(childNodes.length);//7for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].innerText != undefined) {//換行符[文本]也算一個節點alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);}}var parentElement = java.parentElement;alert(parentElement);//HTMLUListElement};}</script>
</head>
<body>
<div><div><p>你的編程語言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go語言</li></ul></div>
</div>
<div id="btnList"><div><button id="btn07">返回id=java的父節點</button></div>
</div>
</body>
</html>
獲取前后兄弟節點
html-dom08.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {var btn08 = document.getElementById("btn08");btn08.onclick = function () {var ct = document.getElementById("ct");alert(ct.previousSibling);//Text[換行符]alert(ct.previousSibling.previousSibling);//HtmlOptionElementalert(ct.previousSibling.previousSibling.innerText);//霞燕alert(ct.nextSibling);//Text[換行符]alert(ct.nextSibling.nextSibling);//HTMLOptionElementalert(ct.nextSibling.nextSibling.innerText);//秋楓};};</script>
</head>
<body>
<div><div><p>你當前的女友是誰:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋楓</option><option>冬梅</option></select></div>
</div>
<div id="btnList"><div><button id="btn08">返回id=ct的前后兄弟節點</button></div>
</div>
</body>
</html>
設置文本域內容
html-dom09.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//設置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "刀劍神域";//設置文本域}};</script>
</head>
<body>
<div><div><p>個人介紹:</p><textarea name="person" id="person">個人介紹</textarea></div>
</div>
<div id="btnList"><div><button id="btn10">設置#person的文本域</button></div>
</div>
</body>
</html>
總代碼:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示HTML DOM 相關方法</title><link rel="stylesheet" type="text/css" href="style/css.css"/><script type="text/javascript">//動態注冊window.onload = function () {//查找id=java節點var btn01 = document.getElementById("btn01");//綁定onclick事件btn01.onclick = function () {var java = document.getElementById("java");alert("java節點文本 = " + java.innerText);};//查找所有option節點var btn02 = document.getElementById("btn02");btn02.onclick = function () {//id --> getElementById()//name --> getElementsByName()//元素標簽 --> getElementsByTagName()var options = document.getElementsByTagName("option");//HTMLCollectionfor (var i = 0; i < options.length; i++) {alert("options[" + (i + 1) + "] = " + options[i].innerText);}};//查找name=sport節點var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");// alert(sports);//NodeListfor (var i = 0; i < sports.length; i++) {if (sports[i].checked) {alert("運動是 = " + sports[i].value);}}}//查找id=language下所有li節點var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");// alert("lis=" + lis);//HTMLCollectionfor (var i = 0; i < lis.length; i++) {alert("lis[" + (i + 1) + "] = " + lis[i].innerText);}};//返回id=sel01的所有子節點var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(options.length);//5 不算換行符//1. 如果使用document.getElementById("sel01").childNodes; 獲取的是[object Text],[object HTMLOptionElement]//2. 如果不希望得到 text對象, 需要將所有的內容放在一行var childNodes = document.getElementById("sel01").childNodes;//alert(childNodes);//NodeList//alert(childNodes.length);//11, 加上文本, 在這里換行符屬于文本[object Text]for (var i = 0; i < childNodes.length; i++) {//alert(childNodes[i]);//HTMLOptionElementif (childNodes[i].innerText != undefined && childNodes[i].selected) {alert("女友有 = " + childNodes[i].innerText);}}alert("===============還有一個方法===============");//1.sel01 是 HTMLSelectElement => 本身具有集合的特點var sel01 = document.getElementById("sel01");alert(sel01);//HTMLSelectElementalert(sel01[0]);//HTMLOptionElementfor (var i = 0; i < sel01.length; i++) {alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);}};//返回id=sel01 的第一個子節點var btn06 = document.getElementById("btn06");btn06.onclick = function () {var sel01 = document.getElementById("sel01");var childNodes = sel01.childNodes;alert(childNodes[0]);//object Textvar firstChild = sel01.firstChild;alert(firstChild);//object Text]alert(sel01[0]);//直接得到第一個option節點 object HTMLOptionElement}//返回id=java的父節點var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");alert(java);//HTMLLIElementvar parentNode = java.parentNode;alert(parentNode);//HTMLUListElementalert(parentNode.innerText);alert(parentNode.innerHTML);//<li id="java">Java</li>var childNodes = parentNode.childNodes;alert(childNodes.length);//7for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].innerText != undefined) {//換行符[文本]也算一個節點alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);}}var parentElement = java.parentElement;alert(parentElement);//HTMLUListElement};//返回id=ct的前后兄弟節點var btn08 = document.getElementById("btn08");btn08.onclick = function () {var ct = document.getElementById("ct");alert(ct.previousSibling);//Text[換行符]alert(ct.previousSibling.previousSibling);//HtmlOptionElementalert(ct.previousSibling.previousSibling.innerText);//霞燕alert(ct.nextSibling);//Text[換行符]alert(ct.nextSibling.nextSibling);//HTMLOptionElementalert(ct.nextSibling.nextSibling.innerText);//秋楓};//讀取id=ct的value屬性值var btn09 = document.getElementById("btn09");btn09.onclick = function () {var ct = document.getElementById("ct");alert(ct.value);ct.innerText = "春桃姑娘";//修改文本域};//設置#person的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "刀劍神域";//設置文本域}};</script>
</head>
<body>
<div><div><p>你喜歡的運動項目:</p><input type="checkbox" name="sport" value="soccer" checked="checked"/>足球<input type="checkbox" name="sport" value="basketball" checked="checked"/>藍球<input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球<hr/><p>你當前的女友是誰:</p><select id="sel01"><option>--女友--</option><option>霞燕</option><option id="ct" value="春桃姑娘">春桃</option><option>秋楓</option><option>冬梅</option></select><hr/><p>你的編程語言:</p><ul id="language"><li id="java">Java</li><li>Python</li><li>Go語言</li></ul><br/><br/><hr/><p>個人介紹:</p><textarea name="person" id="person">個人介紹</textarea></div>
</div>
<div id="btnList"><div><button id="btn01">查找id=java節點</button></div><div><button id="btn02">查找所有option節點</button></div><div><button id="btn03">查找name=sport節點</button></div><div><button id="btn04">查找id=language下所有li節點</button></div><div><button id="btn05">返回id=sel01的所有子節點</button></div><div><button id="btn06">返回id=sel01的第一個子節點</button></div><div><button id="btn07">返回id=java的父節點</button></div><div><button id="btn08">返回id=ct的前后兄弟節點</button></div><div><button id="btn09">讀取id=ct的value屬性值</button></div><div><button id="btn10">設置#person的文本域</button></div>
</div>
</body>
</html>
js dom 烏龜吃雞游戲
靜態注冊實現
tortoiseGame2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tortoise-hen碰撞游戲</title><script type="text/javascript">//公雞的坐標var hen_xPos = 200;var hen_yPos = 200;//烏龜圖片的寬度和高度var tortoise_width = 94;var tortoise_height = 67;//公雞圖片的寬度和高度var hen_width = 76;var hen_height = 73;function move(obj) {//object HTMLButtonElementvar tortoise = document.getElementById("tortoise");var tortoise_left = tortoise.style.left;//100px 值傳遞var tortoise_top = tortoise.style.top;//130px 值傳遞var tortoise_xPos = parseInt(tortoise_left.substring(0, tortoise_left.indexOf("p")));var tortoise_yPos = parseInt(tortoise_top.substring(0, tortoise_top.indexOf("p")));//通過button的 dom對象,獲取innerTextswitch (obj.innerText) {case "向上走":tortoise_yPos -= 10;tortoise.style.top =tortoise_yPos + "px";break;case "向下走":tortoise_yPos += 10;tortoise.style.top = tortoise_yPos + 'px';break;case "向左走":tortoise_xPos -= 10;tortoise.style.left = tortoise_xPos + "px";break;case "向右走":tortoise_xPos += 10;tortoise.style.left = tortoise_xPos + "px";break;}//走完之后再判斷//4.1 得到烏龜左和公雞左的距離,縱向距離y// (1)如果烏龜在公雞上面, 如果縱向距離y < 烏龜圖片的高度時, 說明它們可能在縱向發生重疊, 使用 yy 來記錄// (2) 吐過烏龜在公雞下面,如果縱向距離y < 公雞圖片的高度時, 說明它們可能在縱向發生重疊, 使用 yy 來記錄// 4.2 得到烏龜和公雞左上角的距離, 橫向距離x// (1)如果烏龜在公雞左面, 如果橫向距離x < 烏龜圖片的寬度時, 說明它們可能在橫向發生重疊, 使用 xx 來記錄// (2)如果烏龜在公雞右面, 如果橫向距離x < 公雞圖片的寬度時, 說明它們可能在橫向發生重疊, 使用 xx 來記錄var y = Math.abs(tortoise_yPos - hen_yPos);var x = Math.abs(tortoise_xPos - hen_xPos);var yy = 0;//var xx = 0;//默認橫向沒有重疊if (tortoise_yPos < hen_yPos) {//烏龜在上if (y < tortoise_height) {yy = 1;}} else {//烏龜在下if (y < hen_height) {yy = 1;}}if (tortoise_xPos < hen_xPos) {//烏龜在左if (x < tortoise_width) {xx = 1;}} else {//烏龜在右if (x < hen_width) {xx = 1;}}if (xx && yy) {//js中 0默認是falsealert("發生碰撞");tortoise.style.left = 100 + "px";tortoise.style.top = 130 + "px";}}</script>
</head>
<body>
<table><tr><td></td><!--1.this表示的是你點擊的這個button, 而且已經是一個dom對象3.可以通過dom對象操作屬性和方法--><td><button onclick="move(this)">向上走</button><!--靜態注冊傳參 只能用單引號--></td><td></td></tr><tr><td><button onclick="move(this)">向左走</button></td><td></td><td><button onclick="move(this)">向右走</button></td></tr><tr><td></td><td><button onclick="move(this)">向下走</button></td><td></td></tr>
</table>
<img src="./img/1.bmp" id="tortoise" style="position: absolute; left: 100px; top: 130px;" border="1">
<img src="./img/2.bmp" style="position: absolute; left: 200px; top: 200px;" border="1">
</body>
</html>