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有三种方法
- 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()
FSWD_3_JavaScriptAdvance相关推荐
最新文章
- 57张图,13个实验,干死 MySQL 锁!
- Java 7并发编程实战手册
- Ubuntu 默认输入法切换(更改)--- 解决中文输入问题
- ios查看帧率的软件_程序员必看!直播软件开发弱网下保障高清流畅推流的方法...
- IntellIJ IDEA 启动 参数 配置
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
- C/C++中手动获取调用堆栈【转】
- rest-framework之响应器(渲染器)
- 多线程下局部变量与全局变量的使用及区别
- 飞鸽传书:造假与成功
- 运用vs code常见错误_CBA:浙江广厦控股 VS 广东东莞大益 热门篮球竞猜分析
- Unity3D与JSP TomCatserver传递数据和文件( 二 ) Unity3D向java传输表单
- led计数电路实验报告_LED点亮程序
- 如何找到一个好的Joomla主机提供商
- 【代码模板】不存在的NOIP2017
- 计算机二级题库access选择题_计算机二级access选择题题库
- win10插上耳机还外放解决解决方法
- 个性化定制软件安装包流程指导(按照步骤即可定制化安装流程)
- 2月19日服务器例行维护公告,天涯明月刀 7月19日服务器例行维护公告
- 7z和winrar命令行压缩方法