FSWD_3_JavaScriptAdvance_jsadvance-CSDN博客

本文链接：https://blog.csdn.net/young_gy/article/details/48749445

for

for
for…in
for…of

<!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)

<!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

<!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) 在后面增加

<!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

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

克隆节点

<!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

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

add event using js

函数
addEventListener()
removeEventListener()

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

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

more on func

declare func

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


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

homework

getElementById()
Math.random()
onload
createElement()
Math.floor()
while
appendChild()