1.JS函数的学习(方法)
函数也是对象
1.1函数有3种声明方法
函数声明的三种形式
(1) function 函数名(){
函数体
}
(2) var 函数名=function(){
函数体
}
(3)var 函数名=new Function("函数体")；
1.2输出方式3种的归纳
alert(a);//1.弹窗式输出
document.write("HELLO"+b+”
”);//2.页面输出(添加的标签需要加引号)
console.log("诸葛云")//3.控制台输出
注意：控制台输出的语句不能加标签和 ，它会原样输出。
1.3函数参数传递
在js函数的形参和实参个数可以不一样，如果参数，形参多余实参，不足的实参会显示undefined
var a=10;
var b="你好";
//函数声明方法一function test01(){
alert(a);//1.弹窗式输出}
//函数声明方法二var test02=function (){
document.write("HELLO"+b);//2.页面输出console.log("诸葛云")//3.控制台输出}
//函数声明方法三var test03=new Function("console.log('我是控制台'+b)");
//注意 new Function()中F为大写，这里输出语句字符连接要使用单引号//函数本身也是一个对象
function test04(c,d){//不用再在方法中声明变量类型即不用(var a,var b)document.write(a+'和'+"
"+b)
}
//调用方法test01();
test02();
test03();
test04(13,14);
1.4.函数的返回值
如果函数没有返回值 这时候return返回 undefined
():函数执行符(函数(方法)可以赋值给一个变量，当这个变量加上()后，它将变为一个函数，不再是变量)
var aa=function (){
alert("吃饭了");
document.write("haode");
console.log("avg");
}
function test05(){
console.log("参数值："+aa);
return aa;
}
使用函数执行符：()
var aa=function (){
alert("吃饭了");
document.write("haode");
console.log("avg");
}
function test05(){
console.log("参数值："+aa());
return aa;//此时没有返回值
}
2 常用对象
2.1Date 日期对象
var date=newDate(); //注意创建对象前面是 var
document.write(date.getDate()+"
");//本月中的第几天
document.write(date.getDay()+"
");//本星期的第几天
document.write(date.getMonth()+"
");//返回的月份 0-11
document.write(date.getYear()+"
");//返回的是1900年到现在年份的差值2019-1900
document.write(date.getFullYear()+"
");//返回全年2019
document.write(date.toLocaleString()+"
");//2018/6/22 下午12:17:14:返回本地的时间
2.2Math 对象学习
Math.rondom() //获得随机数
var ran=Math.random()*1000;//随机数范围是0-1
console.log(Math.floor(ran));//向下取整 756.971 ==756
console.log(Math.ceil(ran));//向上取整 398.063==398
//获得4位随机数--(可以用来做验证码)
console.log(Math.floor(Math.random()*9000+1000) );
2.3String 对象
var a="abcdefg"
var b="q-w-e-r"
1).获得下标为2的内容：
document.write(a.charAt(2)+"
");//返回c
2)获得”b”的下标
document.write(a.indexOf("b")+"
");//返回1
document.write(a.indexOf("cd")+"
");//返回2
3)字符串截取 开始下标 截取长度
document.write(a.substr(3,2)+"
")//返回de
4)截取从下标2到最后
document.write(a.substr(2)+"
")//返回cdefg
5)字符串截取 开始下标 结束的下标(范围为左闭右开)
document.write(a.substring(2,5)+"
");//返回cde
6)截取从下标2到最后
document.write(a.substring(3)+"
")//返回defg
7)split() 方法用于把一个字符串按照(某个字符)分割成字符串数组。
console.log(b.split("-"));//返回的还是一个数组
2.4 Global 对象(全局对象)
eval() 全局变量的一个方法，把字符串转成可以执行的js的代码
var c="var e=2*6"
document.write(c+"
");//输出 var e=2*6
eval(c);
document.write(e+"
");//输出 12
检查某个值是否是数字。
var d=1;
var f="123a";
document.write(isNaN(d));//false d 不是not a number
document.write(isNaN(f));//true f 是not a number
3 .JS中数组的学习
创建数组的4种方法：
//方式一
var arr1=new Array();
//方式二
var arr2=new Array(5);
//方式三
var arr3=new Array(12,"您好",new Date(),true);
//方式四
var arr4=[13,"老科",new Date(),false];
注意：数组有长度，但没有元素的时候会使用empty来补充
3.1数组的使用
var aa=new Array();
aa[0]="A";
aa[5]="B"//此时数组长度为6，没有值得用empty代替
console.log(aa);
console.log(aa.length);//返回6
js中数组没有规定长度，也可以使用。数组的下标可以不连续 如果没有给值就是empty
3.2数组的扩容和缩小
//数组的扩容和缩小
function test(){
var bb=new Array(5);
console.log(bb.length);//返回5
bb.length=10;
console.log(bb.length);//返回10
bb.length=3;
console.log(bb.length);//返回3
}
注意：对于数组长度缩小，且数组有数据，则只保留在数组长度内的数据。
3.3数组的遍历
function test01(){
var cc=new Array(12,"66","大河","ABC",true);
//方式一
for(var i=0;i
console.log(cc[i]);
}
console.log("---------------")
//方式二
for(var t in cc){
console.log(cc[t]);//此处和JAVA不一样，java可以直接输出，但这里遍历出来的是数组下标
}
}
注意：第二种方式，用的是in不再是 ：遍历出的是下标
3.4 数组中常用的方法
function demo5(){
var arr=["bjsxt",123,new Date(),false];
console.log(arr);
1)向数组的末尾添加一个或更多元素，并返回新的长度。
arr.push("我们");
2)删除并返回数组的最后一个元素(删除数组最后一个元素，并把它返回)
arr.pop();
3)向数组的开头添加一个或更多元素，并返回新的长度。
arr.unshift("你好");
删除并返回数组的第一个元素
arr.shift();
5)删除开始的下标 删除的个数—splice()。
arr.splice(1,2)
6)删除元素，并向数组添加新元素—splice()。
arr.splice(1,0,"你")
//从下标1开始删除，删除0个，并把字符”你”添加到下标1的位置。可用于替换。
4 Event 事件
满足一定的条件才会去执行
4.1 什么是事件
1)事件是可以被 JavaScript 侦测到的行为
2)网页中的每个元素都可以产生某些可以触发 JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数
3)事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
4.2 有哪些事件
事件是属于event这个对象的
注意ondblclick的拼写
1 up:
2 dowm:
5.1、全局变量：函数外声明的变量，称为全部变量
局部变量：函数内部使用var声明的变量，称为局部变量
在JS中，只有函数作用域，没有块级作用域！！！也就是说，if/for等有{}的结构体，并不能具备自己的作用域。
所以，函数外部不能访问函数内部局部变量(私有属性)。因为，函数内部的变量，在函数执行完毕以后，就会被释放掉
5.2变量(全局变量/局部变量)声明和调用的顺序要求。
1)全局变量一定要在调用前声明，否则出现not defined报错
2)函数体内声明的局部变量，在函数体内都是可见的；在函数体内，局部变量在声明前就可以调用了，不会报错，出现undefined
5.3 for循环内的循环变量是什么变量？(全局？局部？)
1)、函数内嵌于循环；
答：for循环内含函数体的情况：如下例，for循环体内的循环变量i，跟全局变量性质类似，存储内存引用，直到内存释放。而函数体function abc(){}并不是立即执行，循环结束后，执行函数，所以打印的值是5(内存引用存储的最终值)
for(var i=0; i<5; i++){
function abc(){
console.log(i);
}
}
console.log(i);
abc();
2)循环包含在函数中；
答：函数内包含for循环的情况：函数立即执行，打印的值则是循环的每一个值！
function a(){
for(var d=0; d<5; d++){
console.log(d);
}
}
a();
3)let声明 let声明的循环变量，仅在循环体内有效，出循环体存储则释放,调用则会出现not defined的报错；
var a=[];
for(let i=0; i<5; i++){
function ab(){
a[i]=i;
console.log(a[i]);
}
}
ab();
console.log(i);
6 .BOM --window对象
1)BOM：(browser object model)浏览器对象模型,即对浏览器进行访问和操作。
2)BOM有一系列对象组成，是访问，控制，修改浏览器的属性和方法
3)BOM没有统一标准
4)BOM的顶层是window对象
6.1DOM：(document object model)文档对象模型。
DOM用于XHTML，XML文档的应用程序接口(API)
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象
DOM也是归BOM管的
6.2
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象
7. BOM对象-window对象的使用
7.1三种弹窗方式
1)只含有确定的按钮
window.alert("今天星期一， 马上周五了， 我好开心呢");
2)有确定按钮和取消按钮的弹框
var flag= window.confirm("确实很开心");
//如果返回的是true代表点击的是确定 ， 如果返回是false代表点击的取消
3).含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值
var val= window.prompt("请输入昵称：","例如：李白");
//取消 返回 null
7.2定时器的应用
//2S后调用方法 执行一次
var time1=window.setTimeout("test04()",2000);
//每间隔2s就会执行方法 执行了多次
window.setInterval("test04()",2000);
7.3清除计时器的操作
//清除计时器的操作 其中的名称就是清除计时器的名称
window.clearInterval(time);
window.clearTimeout(time1);
7.4关闭和打开浏览器
//打开网址，另开一窗口
function m5(){
window.open("http://www.baidu.com")
}
//关闭当前窗口
function m6(){
close();
}
综合示例
//打开指定的页面
window.open("http://www.baidu.com");
//关闭浏览器窗口。
window.close();
//三种弹窗方式
function m1(){
alert("弹窗一alert、");
}
function m2(){
window.confirm("弹窗二confirm 双击");
}
function m3(){
window.prompt("弹窗三-prompt 双击","libai");
}
function getTime(){
var date=new Date();
var time=date.toLocaleString();
var sp=document.getElementById("span_1");//获取span标签对象
sp.innerHTML=time;//注意点：这里是sp.innerHTMl=time,是“=“号
}
//两种定时器
/*定时器一*/
setTimeout("getTime()",1000);
/*定时器二*/
//var temp=setInterval("getTime()",1000);
//关闭定时器
function m4(){
window.clearInterval(temp);
}
//打开网址，另开一窗口
function m5(){
window.open("http://www.baidu.com")
}
//关闭当前窗口
function m6(){
close();
}
8 Window的对象学习
8.1Location：对象
//获得URL
var href= window.location.href;
//获得端口号 8020
var port=window.location.port;
//主机名称(就是主机IP)
var hostname=window.location.hostname;
//主机加端口号
var host=window.location.host;
//修改当前的URL地址
window.location.href="http://www.taobao.com";
//刷新网页
window.location.reload();
8.2History 对象：
//返回历史记录的数量
var len= window.history.length;
//后退按钮
window.history.back();
//前进按钮
window.history.forward();
//如果是正数标识前进指定的页面 如果是负数标识后退指定
的页面
window.history.go(-1);
8.3Screen：对象(了解)：
//获得当前屏幕的分辨率
var he = window.screen.height;
var wi = window.screen.width;
Navigator 对象(了解)：
//返回由客户机发送服务器的 user-agent 头部的值。
console.log(window.navigator.userAgent);
9.DOM 节点分类 node
元素节点： (element node) 我的链接
属性节点： (attribute node )href="链接地址"
文本节点： (text node) 链接地址 我的链接
9.获得元素对象的方式(DOM)
9.1常用直接获得的方式：
1)通过id属性获取元素对象
var div= document.getElementById("div1");
2)通过标签名获取元素对象
var inp =document.getElementsByTagName("input");
返回HTMLCollection，得到的是个数组,Tag(标签的意思)
3)通过name属性获取元素对象
var inp= document.getElementsByName("inp");
得到的是个数组
4)通过class属性获取元素对象
document.getElementsByClassName("inp1");
9.2常用间接获得对象的方式：
1)获得div下的所有的子节点 注意： 空白的文本也是一个节点
var child= div.childNodes;
2)获得当前节点inp的父级节点---直系父节点
var parent= inp.parentNode;
3)获得当前节点的上一个节点
var pre= inp.previousSibling.previousSibling;
4)获得上一个节点对象不包含空白文本
var pre1=span.previousElementSibling;
5)获得当前节点的下一个节点
var next=inp.nextSibling.nextSibling;
6)获得下一个元素节点 不包括空白文本
var next2=span.nextElementSibling;
10.DOM属性(name,value,id,type等)的操作
获得属性
获得id名称是inp1对象节点
var inp1=document.getElementById("inp1");
1)方式一：获得元素的属性(获得的是实时的值)
var ty=inp1.type;
var va=inp1.value;
var na=inp1.name;
//操作元素的属性
inp1.type="button";
inp1.value="测试改变";
2)方式二： 获得元素的属性
var ty1=inp1.getAttribute("type");
//获得属性的默认值
var va2=inp1.getAttribute("value");
//方式二： 操作元素的属性
inp1.setAttribute("type","button");
11.DOM样式(width.height.color等)的操作
1.操作前需要先获得需要操作的元素节点
2.在js中只能通过行内式获取样式，不能获取
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
