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 = "#" 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方法;

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的运行;