-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
523a1d9
commit f1867fd
Showing
25 changed files
with
1,112 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>DOM与BOM的区别</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id="div1"> | ||
|
|
||
| </div> | ||
| <script type="text/javascript"> | ||
| /* | ||
| BOM:Browser Object Model（浏览器对象模型） | ||
| 通过BOM的对象和方法可以完成浏览器窗口的操作， | ||
| 例如：关闭窗口，前进，后退，修改地址栏的地址， | ||
| 这些操作都属于BOM，BOM的顶级内置对象那个是window; | ||
| DOM:Document Object Model(文档对象模型)， | ||
| 通过DOM的对象和方法可以完成网页中元素 | ||
| 的增删改，让网页产生动态效果， | ||
| DOM的顶级对象是document. | ||
| BOM是浏览器，DOM是浏览器上的网页，所以BOM是包含DOM的。 | ||
| */ | ||
| window.onload = function(){ | ||
| // window对象是BOM的顶级老大 | ||
| // docunment对象是DOM的顶级老大 | ||
| // 实际上完成的写法是： | ||
| // var divObj = window.document.getElementById("div1"); | ||
| // 只不过 window.可以省略 | ||
| var divObj = document.getElementById("div1"); | ||
| console.log(divObj); | ||
| } | ||
|
|
||
| /* 以下两行代码其实是一样的，只是省略了window */ | ||
| console.log(document.getElementById("div1"); | ||
| console.log(window.document.getElementById("div1")); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>innerHTML和innerText的区别</title> | ||
| <style type="text/css"> | ||
| #div1 { | ||
| background-color: burlywood; | ||
| border: 1px solid red; | ||
| width: 200px; | ||
| height: 50px; | ||
| } | ||
| #span1 { | ||
| background-color: red; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <script type="text/javascript"> | ||
| window.onload = function(){ | ||
| document.getElementById("divbtn").onclick = function(){ | ||
| // 设置div中的内容 | ||
| var divElt = document.getElementById("div1"); | ||
| // 通过元素的innerHTML属性来设置内部的内容 | ||
| // innerHTML 是一个属性，不是一个方法 | ||
| // innerHTML属性会将后面的字符串当做一段HTML代码解释并执行。 | ||
| // divElt.innerHTML = "<font color='#FF0000'>用户名不能为空！</font>"; | ||
|
|
||
| // innerText也可以设置元素当中的内容，和innerHTML的区别： | ||
| // innerText后面的字符串即使是一个HTML代码，也不会当做HTML执行， | ||
| // 只是看做普通文本进行输出。 | ||
| divElt.innerText = "<font color='#FF0000'>用户名不能为空！</font>"; | ||
| } | ||
| var spanElt = document.getElementById("spanbtn"); | ||
| spanElt.onclick = function(){ | ||
| var span1 =document.getElementById("span1"); | ||
| // span1.innerHTML = "<a href='https:www.baidu.com'>百度</a>"; | ||
|
|
||
| span1.innerText = "<a href='https:www.baidu.com'>百度</a>"; | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <input type="button" id="divbtn" value="设置div中的内容" /> | ||
| <input type="button" id="spanbtn" value="设置spqn中的内容" /> | ||
|
|
||
| <!-- div独占一行 --> | ||
| <div id="div1"></div> | ||
|
|
||
| <!-- span的大小会随着span中的内容多少发生变化 --> | ||
| <span id="span1"></span> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>获取一个文本框的value</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <script type="text/javascript"> | ||
| window.onload = function(){ | ||
| // 给 btn 按钮绑定单机事件 | ||
| document.getElementById("btn").onclick = function(){ | ||
| // 获取文本对象 | ||
| var usernameElt = document.getElementById("username"); | ||
| // 获取value | ||
| var username = usernameElt.value; // 文本框的value属性用来获取用户的信息。 | ||
| alert(username); | ||
| } | ||
| } | ||
| </script> | ||
| 用户名：<input type="text" id="username" /> | ||
| <br> | ||
| <input type="button" id="btn" value="获取用户名" /> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>获取下拉列表选中项的value（省区联动）</title> | ||
| </head> | ||
| <body> | ||
| <!-- | ||
| 数据库表存储省份和市区的数据 | ||
| t_province | ||
| code(pk) name | ||
| ---------------- | ||
| 001 山东省 | ||
| 002 山西省 | ||
| t_city | ||
| ------------------------------------- | ||
| code(pk) name pcode(fk) 外键 | ||
| 1 济南 001 | ||
| 2 烟台 001 | ||
| 只要前端浏览器能够获取到山东省的code，假设code = 001 | ||
| 那么后台java程序执行sql语句的时候这样执行： | ||
| select * from t_city where pcode = ?;(?是sql中的占位符) | ||
| ps.setString(1,"001"); | ||
| --> | ||
| <!-- 这里的this代表当前的下拉列表对象--> | ||
| <!-- this代表当前下拉列表对象，this.value获取value属性值--> | ||
| <select id="province" onchange="alert(this.value)"> | ||
| <option value ="">请选择省份</option> | ||
| <option value ="001">山东省</option> | ||
| <option value ="002">河北省</option> | ||
| <option value ="003">湖北省</option> | ||
| </select> | ||
|
|
||
|
|
||
| <script type="text/javascript"> | ||
| window.onload = function(){ | ||
| // 给 province2 绑定onchange事件 | ||
| document.getElementById("province2").onchange = function(){ | ||
| // 这里的this代表就是当前发生change事件的这个节点对象 | ||
| // console.log(this.value); | ||
| console.log(document.getElementById("province2").value); | ||
| } | ||
| } | ||
| </script> | ||
| <select id="province2"> | ||
| <option value ="">请选择省份</option> | ||
| <option value ="001">山东省</option> | ||
| <option value ="002">河北省</option> | ||
| <option value ="003">湖北省</option> | ||
| </select> | ||
| </body> | ||
| </html> |
44 changes: 44 additions & 0 deletions
44
src/JavaScript/JS事件/JS事件中的代码执行顺序问题/事件处理的完美案例(元素事件的绑定).html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>事件的最后一个完美案例(元素事件的绑定)</title> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
|
|
||
| /* 这段代码有3个回调函数 */ | ||
| /* 最外层的回调函数是在load事件发生之后才会执行！ */ | ||
| window.onload = function(){ | ||
|
|
||
| /* // 给 id="btn1"的元素绑定鼠标单击 | ||
| var btn1Elt = document.getElementById("btn1"); | ||
| btn1Elt.onclick = function(){ | ||
| console.log("按钮1被点击了"); | ||
| } | ||
| // 给 id="btn2"的元素绑定鼠标单击 | ||
| var btn2Elt = document.getElementById("btn2"); | ||
| btn2Elt.onclick = function(){ | ||
| console.log("按钮2被点击了"); | ||
| } */ | ||
|
|
||
| document.getElementById("btn1").onclick = function(){ | ||
| console.log("按钮1点击") | ||
| } | ||
|
|
||
| document.getElementById("btn2").onclick = function(){ | ||
| console.log("按钮2点击") | ||
| } | ||
|
|
||
| document.getElementById("password").onblur = function(){ | ||
| console.log("失去焦点了") | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <input type="button" id="btn1" value="按钮1" /> | ||
| <input type="button" id="btn2" value="按钮2" /> | ||
| <input type="text" id="password" /> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>提出代码的执行顺序问题</title> | ||
| </head> | ||
| <body> | ||
| <!-- 提出问题 --> | ||
| <!-- 当前代码存在执行顺序的问题，空指针异常 ，未解决！--> | ||
| <!-- | ||
| 此时为什么会报这个异常： | ||
| 因为HTML和JS代码是自上而下执行的，将JS代码中的获取元素id代码 | ||
| 写在了含有id属性的按钮(文本)的前边，此时id属性还没有在浏览器中注册 | ||
| 找不到对应的id属性，所以会报空指针异常 | ||
| 最简单的解决办法：将JS中使用到的包含id属性的元素写在 JS脚本块 的前边 | ||
| 如果一定要写在后边，请见下一个笔记：代码的执行顺序(解决问题) | ||
| --> | ||
| <script type="text/javascript"> | ||
|
|
||
| /* | ||
| 根据id获取元素 | ||
| 代码执行到这里的时候i，id="btn"的节点还没有加载到浏览器的内存当中，所以以下代码返回null | ||
| */ | ||
| var btnElt = document.getElementById("btn"); | ||
| // 现在在控制台输出 btnElt 会发现，此时的btnElt为null | ||
| console.log(btnElt) //null | ||
|
|
||
| /* 绑定鼠标单机事件 */ | ||
| btnElt.onclick = function(){ | ||
| console.log("按钮被点击了，匿名函数被掉用"); | ||
| } | ||
| </script> | ||
|
|
||
| <input type="button" id="btn" value="按钮" /> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.