JavaScript学习笔记
一：数组
//数组的构造的第一种方法
var arr=[1,2,3]
var arr=[1,"2",true]
//数组的构造的第二种方法
var arr1=new Array(5);//表示创建一个长度为5的数组
alert("arr1:"+arr1.length)//输出数组的长度
//数组的构造的第三种方法
var arr2=new Array(1,2,3);
二：方法的构造
//方法构造的第一种方法
function 方法名(参数列表){
方法体；
返回值（可有可无）
}
//实例1 无参
function test(){
alert("aaa");
}
//调用
test();
//实例2 有参
function test2(a,b){
var sum=a+b;
alert(sum);
}
//调用
test(2,3);
//方法构造的第二种方法
//匿名函数
var add=function(参数列表){
方法体和返回值;
}
//实例
var add3= function(m,n){
alert(m+n);
}
//调用
add3(5,6);
三：js的全局变量和局部变量
**全局变量：在js页面标签中定义一个变量，这个变量在页面中的js部分都可以使用
- 在方法的外部使用，在方法的内部使用，在另一个Script标签使用
**局部变量：在方法内部定义一个变量，只能在方法内部使用
- 在方法外部调用这个变量会出错
【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。加群：731771211。免费赠送web前端系统的学习资料！！前端学习必备公众号ID：mtbcxx】
四:js的重载
方法名相同，参数列表不同
function add1(a,b){
return (a+b);
}
function add2(a,b,c){
return (a+b+c);
}
add1(2,3);
add2(2,3,4);
五：js的String对象
**创建String对象
***var Str="";
**String属性
*** length 长度
**方法
（1）和html相关的方法
- bold();//加粗
var str1="sss";
document.write(Str1.blid);
- fontcolor();//设置字符串的颜色
document.write(Str1.fontcolor("red"));
- fontsize();//范围数字1-7,设置字体的大小
document.write(Str1.fontsize(2));
- link();//让字符串显示成超链接
document.write(Str1.link("hello.html"));
- sub();//下标
document.write(Str1.sub()); //几次方
- sup();//上标
var str2="sss";
document.write(Str1.sup());
（2）与java相似的方法
var str1="abc";
var str2="def";
- concat();//连接字符串的方法
document.write(Str1.concat(str2));//abcdef
- charAt();//返回指定位置的字符串
document.write(Str1.charAt(0));//a //字符串位置不存在，返回的是一个空的字符串
- indexOf();//返回字符串的位置
document.write(Str1.indexOf("a"));
//字符串不存在返回-1
- split();//切分字符串，切分为数组
var str3="d-e-f";
var arr1=Str3.split("-");
document.write(Str3.length);
- replace();//将指定得字符串替换成你将要换成的字符串
document.write(str1.replace("a","ttt"));
- substr();和subString();
var str4="abcdefghuiop";
document.write(str4.sunstr(5,3));//fgh[5,3]
//从第五位开始向后截取3位
document.write(str4.sunstrng(5,3));//fg
//从第几位开始到第几位结束，但不包含最后一位[5,3)
六,js 的Array对象
**创建数组
-var arr1=[1,2,3];
-var arr2=new Array(3);
-var arr3=new Array(1,32,3);
**方法
-conact();//数组的连接
var arr1=[1,2,3];
var arr2=[4,5,6];
document.write(arr1.concat(arr2));//1,2,3,4,5,6
-join();//根据一个指定的字符进行数组分割
document.write(arr1.join("-"));//1-2-3
-push();//向数组的末尾添加一个或多个元素，返回新的数组长度
document.write(arr1.push("qwe"));//1,2,3,qwe
document.write(arr1.push(arr2));
//把数组arr2添加到arr1之后，新的数组长度为四，因为是把数组arr2整体当成一个元素添加到了arr1中
-pop();//删除最后一个元素并返回
document.write(arr1.pop());//返回3
-reverse();//倒序
document.write(arr1.reverse());
七.js的date对象
** js获取当前时间
var date=new Date();
document.write(date);//未格式化的时间
document.write(date.toLocaleString());//格式化后的时间
-getFullYear();//获取当前的年份
document.write(date.getFullYear());
-getMonth();//获取当前月份，注意，获取的月份是（0-11）
var month=date.getMonth();
document.write(month+1);
-getDay();//获取当前的星期，注意，获取的星期是（0-6）
-getDate();//获取当前的天
-getHours();//获取 当前的小时
-getMinutes();//获取当前的分钟
-getSeconds();//获取当前的秒
-getTime();//获取毫秒数，返回1970年1月1日至今的毫秒数
//应用场景
//使用毫秒数处理缓存http：//www.baidu.com?毫秒数
八,js的Math对象
**数学
var mm=10.4;
-cell(x);//向上舍入
document.write(Math.ceil(mm));//11
-floor(x);//向下舍入
document.write(Math.fllor(mm));//10
-round(x);//四舍五入
document.write(Math.round(mm));//10
-random();//得到随机数（0-1），是伪随机数
document.write(Math.random());//小数0.23131441
document.write(Math.floor(Math.random()*10));//0-9
-Max(x,y);//返回最大值
-pow(x,y);//返回x的y次方
九.js的全局函数
*由于不属于任何一个对象，直接写名称使用
-eval();//执行js代码
var str="alert('1234')";
eval(str);//1234
-encodeURI();// 对字符进行编码
var str="测试中文aaa1234";
var encode1=encodeURI(str);
document.write(enocde1);
-decodeURI();// 对字符进行解码
var encode2=encodeDRI(str);
document.write(enocde2);
-encodeURIComponent();//
-decodeURIComponent();//
-isNaN();//判断当前字符串是否为数字
var str="123";//false
document.write(isNaN(str));//是数字返回false，如果不是数字返回的是true
-parseInt();//类型转换
var str="123";
document.write(parseInt(str)+1);//124
十.js的重载
** js的重载是否存在？不存在
**会调用最近的方法（面试题）
（1）js里面不存在重载
（2）但是可以通过其他方法来模拟重载 arguments数组
十一.js的bom对象
** broswer object model
--对象
**navigater：//获取浏览器的名称
document.write(navigater.appName);
**screen:获取屏幕的信息
document.write(screen.height);
document.write(screen.weight);
**location:请求的URL地址
-href属性：
***获取请求的url地址
document.write(location.href);
***设置URL地址
一个页面中设置一个按钮，连接到另一个页面
鼠标点击事件 onclick="js的方法";
**history：请求URL的历史记录
//
-到访问的上一个页面
function back(){
history.back();
//history.go(-1);//等同于back();方法
}
-到访问的下一个页面
function next(){
history.forward();
//history.go(1);//等同于forward();方法
}
**window（重点）
*窗口对象
*顶层对象(所有的bom对象都是在window里面操作)
**方法
-window.alert();//在窗口弹出一个页面
-window.confirm();//确认提示框
-var flag=window.confirm("是否删除");
alert(flag);//true
-window.prompt();//输入对话框
window.prompt(text，defaulttext);
window.prompt("显示输入提示","默认值");
window.prompt("请输入：","0");
-open();//
window.open("连接到新的地址","","窗口特征，比如高和款等信息");
window.open("hello.html","","heigth=200,weight=300");
-close();//关闭窗口，兼容性比较差
-做定时器
** setInterval("js代码",毫秒数);
window.setInterval("alert('123')",3000);//每三秒就执行一次alert方法
** setTimeout("js代码",毫秒数);//在指定的毫秒数之后去执行，但是只执行一次
window.setTimeout("alert('123')",3000);//在三秒之后执行alert，但是只执行一次
** clearInterval();//清除setInterval的方法
var clear1=window.setInterval("alert('123')",3000);\
function clear1(){
clearInterval(clear1);
}
** clearTimeout();//清除setTimeout的方法
var clear1=window.setTimeout("alert('123')",3000);
function clear2(){
clearTimeout(clear1);
}
十二.js的dom对象
* dom : document object model
** 文档
超文本标记文档 html xml
** 对象
提供了属性和方法
** 模型
提供属性和方法操作超文本标记性文档
*** 可以使用js里面的dom对象进行操作
*** 想要对标记性超文本文档进行操作，首先需要对标记性超文本型文档里面所有的内容封装成对象
--需要把html里面的标签、属性、文本内容封装成对象
*** 解析过程
根据html的成绩结构，在内存中分配一个树形结构，需要把html中的每一个部分都封装成一个对象
-document对象：整个文档
-element对象：标签对象
-属性对象
-文本对象
--Node节点对象：这个对象时这些对象的父对象
*** 如果在这些对象里面找不到相对应的方法，这个时候需要到Node对象里面去找
* DHTML:是很多技术的简称
** html：封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档(标记性文档)
** JavaScript：专门指的是js的语法语句
十三.document对象：整个文档
* 表示整个文档
** 常用方法
- write方法
（1）向页面输出变量值
document.write(str1);
（2）向页面输出html代码
document.write("
");
- getElementById();//通过id得到标签，返回的是一个对象
var input=document.getElementById("nameid");//获取的是标签中的id值
//得到input里面的value值
alert(input.value);
//向input里面设置一个value值
input.value="bbbb";
- getElementsByName();//通过标签的name属性值来得到标签，返回的是一个数组
var input=document.getElementsByName("name1");
alert(input.length);
//遍历数组
for(var i=0;i
var in=nput[i];//每次循环得到的是input的对象
alert(in.value);//得到每个input标签的value值
}
- getElementsByTagName(“标签名称”);//返回的是一个数组
var in=document.getElementsByTagName("input");//传递的参数是标签名称
alert(in.length);
//遍历集合，每次得一个input标签
for(var i=0;i
var ip=in[i];
alert(ip.value);
}
*** 注意地方
//只有一个标签，这个标签智能通过name获取到，这个使用getElementByName返回的是一个数组
var in=document.getElementsByName("name1")[0];
alert(in.value);
//通过input标签获取
var in=document.getElementsByName("input")[0];
alert(in.value);
十四.window弹窗案例
//实现s1的方法
//需要把num1和num2赋值到window页面
//跨页面操作 opener：创建这个窗口的窗口 得到window页面
function s1(num1,num2){
var pwin=window.opener;//得到window的页面
pwin.document.getElementById("nameId").value=num1;
pwin.document.getElementById("pwdId").value=num2;
window.close();
}
十五：元素对象（element）
** 要操作element对象，首先要获取element
** 方法
获取值
var input=document.getElementById("inid");
alert(input.getAttribute("value"));
设置值
input.setAttribute("参数名","haha");
input.setAttribute("class","haha");
删除属性,但是不能删除value属性
input.removeAttribute("name");
** 获取标签下面的子标签 childNodes()（兼容性差），getElementsByTagName()(兼容性高)
111
222
333
//获取ul标签
var ul1=document.getElementById("ulid");
//返回的是一个集合
//获取ul下面的子标签,兼容性差
var lis=ulid.childNodes;
alert(lis.length);
//获取ul下面的子标签，兼容性高
var lis1=ulid.getElementsByTagName("li")
alert(lis.length);
** Node对象属性1
***nodeName 节点名称
***nodeType 节点类型
***nodeValue 节点值
**标签节点对应的值
haha
var span1=document.getElementById("spanid");
alert(span1.nodeName); // SPAN 大写标签名称
alert(span1.nodeType); // 1
alert(span1.nodeValue); // null
//属性节点对应的值
var id1=spqn1.getAttributeNode("id");
alert(id1.nodeName); // id
alert(id1.nodeType); // 2
alert(id1.nodeValue); // spanid
//获取文本对象
var test1=span1.firstChild;
//文本节点对应的值
alert(test1.nodeType); // 3
alert(test1.nodeName); // #text
alert(test1.nodeValue); // haha
** Node对象属性2
111
222
333
var li1=document.getElementById("li1");
* 父节点 ul是li的父节点
parentNode：父节点
var ul1=li1.parentNode;
//得到ul
alert(ul1.id);
* 子节点 li是ul的子节点
childNodes：得到所有的子节点，但是兼容性差
firstChild：第一个子节点
//获取ul的第一个子节点
//得到ul
var ul1=document.getElementById("ulid");
var li1=ul1.firstChild;
alert(li1.id); // li1
lastChild：最后一个子节点
//获取ul的最后一个子节点
//得到ul
var ul1=document.getElementById("ulid");
var li4=ul1.lastChild;
alert(li4.id); // li4
* 同辈对象
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
//获取li的id是li3的上个和先一个兄弟节点
var li=document.getElementById("li3");
alert(li.nextSibling.id); // li4
alert(li.previousSibling.id); // li2
十六.操作dom树
111
222
333
**apendChild方法
- 添加子节点到末尾，类似于剪切
//获取div2id的id
var div2=document.getElementById("div2id");
//获取ulid的id
var ul1=document.getElementById("ulid");
//把ulid中的li标签添加到div2中
ulid.apendChild(div2id);
** insertBefore(newNode,oldNode)方法
- 在么某个节点之前插入一个新的节点
//在
333
之前添加一个
000
111
222
333
function insert1(){
//获取li3的标签
var li3=document.getElementById("li3");
//获取ulid的标签
var ulid=document.getElementById("ulid");
//创建li标签
var li4=document.createElement("li");
//创建文本
var text4=document.createTextNode("000");
//把文本添加到ul标签里面（在
333
之前添加一个
000
）
ulid.insertBefore(li4,li3);
}
** 不存在 insertAfter();方法
** removeChild(); 删除节点
//删除li id="li3">333
//获取里标签
var li3=document.getElementById("li3");
//获取父节点 通过id获取或者是通过parentNode获取
var ulid=document.getElementById("ulid");
ulid.remove(li3);
** replaceChild(newNode,oldNode);//替换节点，通过父节点进行替换
//替换
333
为
444
111
222
333
function replace1(){
//获取li3的标签
var li3=document.getElementById("li3");
//创建新的标签
var li4=document.createElement("li");
//创建新的标签文本
var text4=document.createTextNode("444");
//把文本添加到标签
li4.apendChild(text4);
//获取ulid标签
var uid=document.getElementById("ulid");
//执行替换方法
uid.replaceChild(li4,li3);
}
** 赋值节点
***cloneNode(boolean);
111
222
333
function cloneNode1(){
//复制
333
到div中
//获取ulid标签
var ulid=document.getElementById("ulid");
//执行复制方法
var copyul=ulid.cloneNode(true);
//获取divv的标签
var divv=document.getElementById("divv");
//把复制的ul标签放在新的div里面
divv.apendChild(copyul);
}
** 操作dom树的总结
* 获取节点使用方法
getElementById();//通过节点的id属性，查找相应的节点
getElementsByName();//通过节点的name属性，查找相应的节点
getElementsByTagName();//通过节点名称，查找相应的节点
*插入节点的方法
insertBefore方法：
appendChild方法：添加到末尾
*删除方法
removeChild方法：通过父节点删除
* 替换节点的方法
replaceChild方法：通过父节点进行替换
十七.innerHTML属性
* 这个属性不是dom树的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本的内容
haha
//获取span标签
var span1=document.getElementById("spanid");
//获取标签的文本内容
alert(span1.innerHTML);
第二个作用：向标签里面设置内容（可以是HTML代码）
haha
//获取span标签
var span1=document.getElementById("spanid");
//获取div的标签
var div1=document.getElementById("divid");
//向div1标签里面设置内容（可以是HTML代码）
div1.innerHTML="
hehehe
";
* 案例
* 得到当前时间
var date =new date();
var d1= date.toLocaleString();
*需要每一秒获取时间
setInterval方法，定时器
*显示到页面上
每一秒向div写一次时间
* 使用innerHTML属性
function getd1(){
//获取当前时间
var date = new date();
//格式化当前时间
var d1 = date.toLocaleString();
//获取div的id
var divv = document.getElementById("divid");
//添加到div中
divv.innerHTML = d1;
}
//使用定时器实现每一秒写一次时间
setInterval("getd1();",1000);
如果对你有帮助的话，可以点赞收藏哟！
【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。加群：731771211。免费赠送web前端系统的学习资料！！前端学习必备公众号ID：mtbcxx】
