js函数:
只有在调用的时候才会执行
function funName(args){}
也可以将函数储存在一个变量内
同变量,js函数也会"提升",默认在js代码执行之前声明.
函数自调用: (function(){code to be executed;})();//不需要调用者 自动调用函数
在java基础里面也讲过 函数是js里面的一个对象 typeof 操作符运算之后 结果会是 "function" toString()方法会获取方法完整的内容
参数:js函数有个内置对象Arguments,是js函数调用的参数数组,Arguments[index]获取第index+1个参数
注意:this 是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用
function counter(){
var count = 0;
function add(){count += 1;}
add();//调用内嵌函数
return count;
}//当然此函数每次执行都会初始化count=0 无法达到预期计数效果-->函数自调用
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);
只有在调用的时候才会执行
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);