您的位置：首页 > Web前端 > JavaScript

FSWD_3_JavaScriptAdvance

2015-09-26 19:43 531 查看

for

for

for…in

for…of

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        var numArray = [4,5,6];
        var person = {age:5,job:'worker'}
        for (var i = 0; i < numArray.length; i++) {
            alert(numArray[i])
        }
        for (var index in numArray){
            alert(numArray[index])
        }
        for (var key in person){
            alert(key+'='+person[key])
        }
        for (var i of numArray){
            alert(i)
        }
    </script>
</head>
<body>

</body>
</html>

more array

sort

reverse

indexOf 从前往后搜索第一个的index，如果没有输出-1，第一个参数是搜索的内容，第二个参数用于指定开始搜索的位

lastIndexOf 从后向前搜索

slice(ab)：切片[a,b)

splice(position,quantity):移去元素

splice(position,0，element):增加元素

splice(position,quantity，element):替换元素

forEach(function) func(element,index,array)

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        var aArray = [1,2,3]
        aArray.forEach(alert)
        aArray.forEach(function(elem,idx,arr) {arr[idx]=elem*elem})
        aArray.forEach(alert)
    </script>
</head>
<body>

</body>
</html>

map(func):输入和输出都是数组

DOM

Document Object Model

When you load something into browser(HTML XML SVG), it’s converted into DOM structure.

tree structure

role of text nodes

concept of whitespace and how it stored. It’s not visible and used to instruct to the next line.

node relation

visualize the path for a node,自己编一个向上查找母节点的函数。

一些链接函数

parentNode

childNodes[]

firstChild

lastChild

previousSibling

nextSibling

find a node有三种方法

use the exact DOM path

getElementsByName(h2)，可能发现很多个需要找到哪一个是自己需要的

getElementById(id)，注意在每个element后面尽可能的加入id，name慢慢被id取代

change attribute of node

setAttribute(“style”,”color:red”)

函数

getElementsByName

getElementById

setAttribute

创造不同种类的nodes

createElement(‘div’)

createElement(‘hello’)

createElement(‘hr’)

增加node

insertBefore(newItem,destParent.firstChild) 增加了一个新的sibling

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        function insert_new_text() {
            var newItem = document.createElement('hr');
            var destParent = document.getElementsByTagName('body')[0];
            destParent.insertBefore(newItem, destParent.firstChild);
        }
    </script>
</head>
<body onclick='insert_new_text()'>
    <h1 id='my_text'>Please click on the page.</h1>

</body>
</html>

appendChild(newText) 在后面增加

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        function insert_new_text() {
            var newText = document.createTextNode("This is dynamically added text");
            var textpart = document.getElementById("my_text");
            textpart.appendChild(newText);
        }
    </script>
</head>
<body onclick="insert_new_text()">
    <h1 id='my_text'>Please click on the page.</h1>

</body>
</html>

函数

createElement()

createTextNode()

insertBefore()

appendChild()

删除node

函数

removeChild

删除所有的node

[code]vartheNode = document.getElementById('theBody);
whiel(theNode.firstChild)
    theNode.removeChild(theNode.firstChild)

克隆节点

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        function myFunction() {
            alert("sa");
            var theNode = document.getElementById('myList').lastChild;
            var the_clone = theNode.cloneNode();
            document.getElementById('myList').appendChild(the_clone);
        }
    </script>
</head>
<body>
    <ul id='myList'>
        <li>good morning</li>
        <li>hello</li>
    </ul>
    <p>click the button to cloneNode</p>
    <button onclick="myFunction()">Copy it!</button>
</body>
</html>

函数

the_node.cloneNode()

the_node.cloneNode(true)

dest.appenChild(the_node)

mouse events

onclick = onmousedown followed by nomouseup

onmousedown

nomouseup

onmouseover

onmouseout

timer events

setTimeout(func,ms)

setInterval(func,ms) repeatedly again and again

clearTimeout(the_timer)

clearInterval(the_timer) 停止操作

useful for dynamic web page behavior

[code]var the_timer
the_timer1 = setTimeout(do_something,1000) 
the_timer2 = setInterval(do_something,1000)

add event using js

函数

addEventListener()

removeEventListener()

[code]#增加
window.onload = do_something
window.addEventListener('load',do_something)
<body onload=do_something>

#删除
theBody.removeEventListener('load',do_something)

more on func

declare func

[code]function f1() {}
var f = function () {}   #这种方法可以使函数稍后创建
var f = function f1() {}

#函数也是对象，可以传递函数

homework

getElementById()

Math.random()

onload

createElement()

Math.floor()

while

appendChild()

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航