js学习笔记

js学习笔记

关于整个js部分，可以分为三个小部分：语言基础和BOM、DOM。

语言基础

语言基础很多都和java中的语法一样，对于一个简单的hello world可以在js中这样实现

<script>
  document.write("Hello World");
</script>

当使用外部js文件，需要引入：<script src="path"></script>
src中写入路径就可以。
js中使用var来声明变量，使用function来声明函数，js中的注释、变量类型、类型转换、函数等语法基本和java一样。js中也可以使用循环、条件语句等，举例：使用for循环进行遍历：

<script>
function p(s){
  document.write(s);
  document.write("<br>");
} 
document.write("使用for循环打印 0 到 4<br>");
for(var i=0;i<5;i++){
  p(i);
}
</script>

结果：

使用for循环打印 0 到 4
0
1
2
3
4

BOM

js BOM是浏览器对象模型(Browser Object Model)
浏览器对象包括 ：

Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

除此之外，需要学习几个特定的弹窗、计时器等，

alert	警告框	
confirm	确认框	
prompt	输入框
setTimeout	只执行一次	
setInterval	不停地重复执行	
clearInterval	终止重复执行	
document.write()	不要在setInterval调用的函数中使用document.write();

DOM

DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
dom中我理解是可以将js与html结合的重要手段，在dom中，可以根据id或者name等获取html中的元素，在js中变成节点，然后对节点进行操作。DOM把所有的html都转换为节点 ，整个文档 是一个节点 ，元素 是节点 ，元素属性 是节点 ，元素内容 是节点 ，注释 也是节点。

    document.getElementById	通过id获取元素节点	
    getElementsByTagName	通过标签名称获取元素节点	
    getElementsByClassName	通过类名获取元素节点	
    getElementsByName	通过表单元素的name获取元素节点	
    attributes	获取属性节点	
    childNodes	获取内容节点
    nodeName	节点名称	
	nodeValue	节点值	
    nodeType	节点类型	
    innerHTML	元素的文本内容	
    id			元素上的属性
    value
    className	

注：一个元素节点的style属性即对应的css：例：

<button onclick="hide()">隐藏div</button>   
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
</script>

结果：

隐藏div  显示div 

这是一个div

隐藏div和显示div为两个按钮，点击可以实现下面文字的隐藏和显示。

js中的事件在DOM中有很多：

onfocus
onblur	焦点事件	

onmousedown
onmouseup
onmousemove
onmouseout	鼠标事件	

onkeydown
onkeypress
onkeyup	键盘事件	

onclick
ondbclick	点击事件	

onchange	变化事件	
onsubmit	提交事件	
onload	加载事件	
this	当前组件	
return false	阻止事件的发生

同时可以创建删除节点：

createElement	创建元素节点	
createTextNode	创建文本节点	
createAttribute	创建属性节点
removeChild	删除元素节点	
removeAttribute	删除属性节点	
removeChild	删除文本节点