javaScript第二篇
事件处理函数
javaScript响应用户操作等都是通过事件处理来触发;其基本形式为
event = "javaScript statement(s);"
事件 = "事件处理函数"
function ent(hello) { //alert(hello.getAttribute("href")); var sur = document.getElementById("srt"); sur.setAttribute("src", hello.getAttribute("href")); } //alert("hello world!"); //ent();
ent是用户自定义函数；
在html中我们可以通过事件，比如鼠标移动事件来处理函数；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>hello world</h1> <ul> <li><a href = "./imges/01.jpg" onmouseover="ent(this); return false;">图片01</a></li> <li><a href = "./imges/02.jpg" onmouseover="ent(this); return false;">图片02</a></li> <li><a href = "./imges/03.jpg" onmouseover="ent(this); return false;">图片03</a></li> </ul> <img id = "srt" src = "./imges/01.jpg" /> <script src = "me.js"></script> </body> </html>
通过文本节点改变值
.childNodes 获得元素的所有子元素以数组存放;firstchild == childNodes[0], lastchild == childNodes[childNodes.length - 1]分别表示元素首尾节点
.nodeType（此元素属性可返回节点属性值）
- 1 元素节点
- 2 属性节点
- 3 文本节点
文本节点属性.nodeValue (通过此附值本属性以改变文本节点值)
function ent(hello) { //alert(hello.getAttribute("href")); var sur = document.getElementById("srt"); sur.setAttribute("src", hello.getAttribute("href")); var text = hello.getAttribute("title"); var note = document.getElementById("imgnote"); note.firstChild.nodeValue = text; } //alert("hello world!"); //ent();
建立弹出窗口函数
function op(url)
{
window.open(url);
}
伪协议调用javaScript函数;
<a href = "javascript:op("http:/....");"></a>
内联事件处理函数
<a href = "#" onclick = "op("http:/....")"> </a> //#号一般代表指向一个空链接；有的浏览器指向网页头
<a href = ""http:/...."" onclick = "op("http:/....")"> </a> //可防止在禁用javaScript浏览器中打开连接;
事件分离
window.onload = name;
function name()
{
var temp = getElementById("xxx");
temp.onmousexxxx = function()
{
//事件处理；
xxxxxxxx;
xxxxxx;
}
}
原理解析：
当html页面加载完成会自动调用onload事件；所以第一步让网页加载完成自动调用name()函数
此时name()函数onmousexxxx事件捕获用户事件的发生，当事件发生时，则会触发function()处理消息
事件分离改进版js
onload = even(); function even() {
var ahref = document.getElementsByTagName("a"); for(i = 0; i < ahref.length; i++)
｛ if(ahref[i].className == "imgchange") { ahref[i].onmouseover = function(){ ent(this); return false; } }
｝ } function ent(hello) { //alert(hello.getAttribute("href")); var sur = document.getElementById("srt"); sur.setAttribute("src", hello.getAttribute("href")); var text = hello.getAttribute("title"); var note = document.getElementById("imgnote"); note.childNodes[1].firstChild.nodeValue = text; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>hello world</h1> <ul> <li><a title = "第一张图片" href = "./imges/01.jpg" class="imgchange">图片01</a></li> <li><a title = "第二张图片" href = "./imges/02.jpg" class="imgchange">图片02</a></li> <li><a title = "第三张图片" href = "./imges/03.jpg" class="imgchange">图片03</a></li> </ul> <p id = "imgnote">图片说明 <strong>fdswfef</strong>需要</p> <img id = "srt" src = "./imges/01.jpg" /> <script src = "me.js"></script> </body> </html>
代码优化：
if(!document.getElementsByTagName) return false;浏览器支持检测;在使用某方法前，通常需要通过检测某方法是否被浏览器支持；注意的是，检测方法不能有（）括号；否则检测的是函数返回值;
尽量少的访问标签元素；
尽量合并多个js文件为一个；
使用代码优化工具，去除不必要的空格注释
改变html结构与内容
innerHTML方法;
<div id = “test”> </div>
window.onload = function(){
var di = document.getElementById("test");
di.innerHTML = "<p> test hello <strong> world </strong> </p>";
}
innerHTML方法的效果是全部插入，无细节可言；对于长篇需要插入的内容实用；
DOM方式：
创建元素对象; var elem = createElement("p");
设置属性（可选）elem.setAttribute(" ", " ");
创建文本节点，添加文本（可选）var text = createTextNode = " 文本内容";
调用对象appendChild()方法。添加节点 p.appendChild("text");//些方法默认添加内容到父元素最后一位（可通过已知元素的parentNode属性获得父元素对象）
insertBefore()方法则可以将节点插入到指定节点前；可配合nextSibling属性获得下一兄弟元素对象;再用insertBefore()插入节点,起到向后插入元素的目的;
对之前项目的改进:
将<img id="srt"> </img>以动态插入的方式加载到html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>hello world</h1> <ul id = "imgchange"> <li><a title = "第一张图片" href = "./imges/01.jpg" >图片01</a></li> <li><a title = "第二张图片" href = "./imges/02.jpg" >图片02</a></li> <li><a title = "第三张图片" href = "./imges/03.jpg" >图片03</a></li> </ul> <script src = "me.js"></script> </body> </html>
onload = function () { pp = document.createElement("p"); var txt = document.createTextNode(""); pp.appendChild(txt); var im = document.createElement("img"); var bo = document.getElementsByTagName("body")[0]; bo.appendChild(pp); bo.appendChild(im); var t = document.getElementById("imgchange"); var ahref = t.getElementsByTagName("a"); for (i = 0; i < ahref.length; i++) { ahref[i].onmouseover = function () { var text = this.getAttribute("title"); pp.firstChild.nodeValue = text; im.setAttribute("src", this.getAttribute("href")); return false; } } }
javaScript改变样式
可以通过element.style.样式 = 新样式;来改变某个元素样式;
通过javaScript改变元素位置信息
element.style.postion = " "
element.style.top =
element.style.left =
javaScript时间控制
var timeout = setTimeout("function", valu) ; 第一个参数为一个函数,第二个参数为等待时间,以毫秒为记
clearTimeout(timeout);终止某个setTimeout的运行;
