FSWD_3_JavaScriptAdvance

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有三种方法

  1. use the exact DOM path
  2. getElementsByName(h2),可能发现很多个需要找到哪一个是自己需要的
  3. 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()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

8135
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

1K4
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2349
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1831
来自专栏Hadoop数据仓库

Oracle sqlldr 如何导入一个日期列

1. LOAD DATA INFILE * INTO TABLE test FIELDS TERMINATED BY X'9' TRAILING NULLCO...

1876
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

6426
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1182
来自专栏Hongten

spring开发_JDBC操作MySQL数据库_使用xml配置事务管理

http://www.cnblogs.com/hongten/archive/2012/03/09/java_spring_jdbc.html

671
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1442
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2762

扫码关注云+社区