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

相关文章

来自专栏天天

childNodes属性和nodeType属性

814
来自专栏IMWeb前端团队

React学习笔记之JSX

什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的...

1979
来自专栏向治洪

React语法基础之JSX

概述 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX是什么 JSX是Rea...

2247
来自专栏一“技”之长

iOS中动态更新补丁策略JSPatch运用基础二

    上篇博客中介绍了iOS开发中JSPatch引擎进行动态热修复的一些基础功能,其中包括向Objective-C类中添加类方法与成员方法、添加临时成员变量,...

702
来自专栏积累沉淀

JavaScript DOM基础2

DOM自身存在很多类型,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。 一.DOM类型 DOM基础...

1748
来自专栏向治洪

深入理解 JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 为什么要使用 JSX? 你不需要为...

17010
来自专栏抠抠空间

JavaScript之实例

<meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge">...

3378
来自专栏技术墨客

React学习(2)——状态、事件与动态渲染 原

    上一篇文章最后说明了组件传入的参数必须是只读的,但是在丰富的前端应用中,页面样式是时时刻刻会发生变化的。在前面的章节中介绍了一个时钟的例子,通过重复调用...

401
来自专栏天天

20171020

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

Uncaught Error: _registerComponent(...): Target container is not a DOM element

Uncaught Error: _registerComponent(...): Target container is not a DOM element

723

扫码关注云+社区