js基本知识2

js函数:
只有在调用的时候才会执行  
function funName(args){}
也可以将函数储存在一个变量内

var funName = function(arg1,arg2){
   return arg1*arg2;
}
var res = funName(1,2);

Function()构造函数 var funName = new Function("a","b","return a*b"); var res = funName(1,2);
同变量，js函数也会"提升"，默认在js代码执行之前声明.
函数自调用: (function(){code to be executed;})();//不需要调用者 自动调用函数
在java基础里面也讲过  函数是js里面的一个对象  typeof 操作符运算之后  结果会是  "function"  toString()方法会获取方法完整的内容

参数:js函数有个内置对象Arguments，是js函数调用的参数数组，Arguments[index]获取第index+1个参数
注意:this 是 JavaScript 语言的一个关键字,它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

函数调用:

1)默认函数调用者是window全局对象  即 window.funName() 与 funName()是一致的

2)函数作为方法调用，比如

var dog = {
	fname:"mill",
	lname:"dock",
	fullName:function(){return this.fname+" "+this.lname;}};

3)构造函数调用函数

function MyConstructor(arg1,arg2){

 this.fname = arg1;

this.lname = arg2;

var res = new MyConstructor("mill","dock");

res.fname;//即mill

4)作为函数方法调用函数 call() 和 apply() 预定义的函数  第一个参数必须是对象本身

function funName(add1,add2){
      return add1+add2;
}
var res = funName.call(res,1,2);
//或者使用数组
var arr=[1,2];
var res = funName.call(res,arr);

js内嵌函数:函数里面内嵌函数 可以内部调用内嵌函数
function counter(){
var count = 0;
function add(){count += 1;}
add();//调用内嵌函数
return count;
}//当然此函数每次执行都会初始化count=0 无法达到预期计数效果-->函数自调用

var add = (function(){
var account = 0;
return function(){
   return count+=1;
})();
add();add();add();//每次调用自增1 

---->JavaScript闭包  使得函数拥有私有变量成为可能  不会每次都初始化一遍私有变量
DOM(Document Object Model)学习
js操作html元素-->通过元素id || 通过标签名字找到元素 || 通过类名寻找元素
通过id :     Document.getElementById("eleId");
通过标签名:  id.getElementByTagName("eleTag");//从id标签内部寻找eleTag标签  返回数组 因为可能有多个同tag标签
通过类名:    document.getElementByClassName("eleClass");//返回数组  因为可能有多个同class名标签


js改变html
改变内容: document.write("");//直接通过输出流输出内容 注:不要在内容加载完毕后使用 会覆盖以前的文档
或者  document.getElementById("id").innerHTML = "text to be inserted";
改变属性attribute
document.getElementById("id").attribute = "value";
改变CSS
document.getElementById("id").style.cssStyleAttribute = "value";
如 document.getElementById("id").style.color = "red";
使用事件:(点击 鼠标移动 提交表单 修改输入框内容等等事件)
以点击(onclick)为例:
<h1 id="id1">text to be changed</h1>
<button type="button" οnclick="document.getElement.getIdBy('id1').style.color = 'red'" value='click'/>
PS:从学习的内容易知 处理事件可以直接通过属性 也可以通过事件处理器调用一个定义好的js函数
**为了简化各html元素的内容 可以在<script></script>内部为元素分配事件
<script>document.getElementById('id1').onclick = function(){displayDate();}</script>
function displayDate(){document.getElementById('id2').innerHTML = Date();}
各种事件(重温并添加)
onclick 点击完毕    onload 进入页面  onunload 离开页面 
onchange 改变  onmouseover 鼠标移动到元素上方   onmouseout 鼠标移出元素
onmousedown 鼠标按下  onmouseup 释放鼠标 
执行顺序 onmousedown -->  onmouseup --> onclick
事件监听器EventListener(各事件名字去掉on 就是监听的时间event )
addEventListener("event",function[,useCapture boolean冒泡or捕获]) //第三个可选参数见下 默认false冒泡
添加事件监听不会覆盖已经存在的事件句柄  可以给一个元素添加多个相同事件句柄
**故而 一个元素可以有2(多)个click事件  但是执行的顺序跟添加监听器的顺序有关
document.getElementById('id').addEventListener(click,funName);//此处funName可以是匿名函数，直接调用
window全局对象也可以添加监听器
window.addEventLisener("resize",function(){document.getElementById('id').innerHTML='text';});//resize事件
添加监听器冒泡or捕获参数(有这个参数的原因:因为元素是可以嵌套的，父元素和子元素可以有相同的事件触发，会有一个执行先后)
冒泡: 先触发内部元素的事件 再触发外部元素的事件
捕获: 先触发外部元素的事件 再"捕获"内部元素的事件
移除事件监听:
removeEventListener("event",function);

HTML DOM 节点

添加/创建新的HTML元素

为了向HTML DOM中添加新的元素-->首先添加该元素(也叫元素节点)

var ele = document.createElement("p");
var node = document.createNode("text to be inserted");
ele.appendChild(node);
var element = document.getElementById("divId");
element.appendChild(ele);

//从而在html中的div标签内部  添加了<p>text to be inserted</p>删除已有的HTML元素(父元素删除子元素)

var parent = document.getElementById("parent");

var child = document.getElementById("child");

parent.removeChild(child);