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 条评论
登录 后参与评论

相关文章

来自专栏云瓣

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...)

581
来自专栏Android Note

Android 资源文件

1324
来自专栏Android先生

VLayout适配器的万能封装

传统的RecyclerView高级应用,还是挺麻烦的,阿里开源了Vlayout,采用代理模式独立承担各式各样的布局,大大的减少了程序媛的工作量,...

1144
来自专栏郭霖

Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法

大家好,欢迎继续回到Android属性动画完全解析。在上一篇文章当中我们学习了属性动画的一些进阶技巧,包括ValueAnimator和ObjectAnimato...

2537
来自专栏hightopo

基于 HTML5 Canvas 绘制的电信网络拓扑图

1293
来自专栏天天

面向对象编程(随机点名)

592
来自专栏河湾欢儿的专栏

第八节dom以及dom库的封装

762
来自专栏老司机的简书

TableView优化之高度缓存

不管你信与不信,这都不是真的。 因为最近公司的项目要上二版,然而我还没有提前完成他的决心,所以,你懂得。

1543
来自专栏前端小作坊

React diff 算法

React是facebook开发的一个用于UI开发的基础库。它自底向上重新设计了,为了实现高性能。在这篇文章中将展示React的diff算法是如何来优化你的ap...

903
来自专栏用户2442861的专栏

ListView 原理的介绍 qt也可以吧想通的Android

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/44996879

241

扫码关注云+社区