开发者社区> 前端白鸽> 正文

JavaScript学习笔记

简介: 一:数组 //数组的构造的第一种方法 var arr=[1,2,3] var arr=[1,"2",true] //数组的构造的第二种方法 var arr1=new Array(5);//表示创建一个长度为5的数组 alert("arr1:"+arr1.
+关注继续查看

一:数组

//数组的构造的第一种方法

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】

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript学习(九)
  对象访问语句 for...in循环语句 for...in循环语句和for循环语句十分相似,for...in语句用来遍历对象的每一个属性。
868 0
JavaScript学习(练习)
练习:用户登录界面 代码:             function check(){                 var name=form1.
608 0
JavaScript学习(四)
一元运算符:只需要一个操作数。 + 正号:正号不会对我们的数值产生任何影响             - 负号:负号可以对数值进行负号取反 正负号都可以将数值类型转换成number,原理和number()函数一样。
629 0
JavaScript学习(二)
一、javascript基本代码 /**/  多行注释                     //单行注释 要养成一个良好的写注释习惯,也可以通过注释来对代码进行简单的测试。
841 0
JavaScript学习(十)
目录 练习: String对象的方法 1.查找字符串 (1)charAt()方法   (2)indexOf()方法 (3)lastIndexOf()方法 2.截取字符串 (1)silce()方法 (2)substr()方法 (3)substring()方法 3.连接和拆分 (1)concat()方法 (2)split()方法 4.格式化字符串 练习: 在text文档中输入英文小写字母,点击按钮之后把文本框中的小写字母变成大写。
811 0
非常好的JavaScript学习资源推荐
  本文转载自一位做前端开发的朋友的博客【岁月如歌】,他向学习JavaScript的朋友推荐了很多非常不错的书籍及在线教程,适合英语能力不错的朋友参阅,转载如下:   最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。
1282 0
JavaScript学习(八)
目录 对象分类: 1.内建对象: 2.宿主对象: 3.自定义对象: javascript内部对象 FileSystemObject对象 动态创建FileSystemObject对象 FileSystemObject对象的方法 In 运算符 JS数据类型 对象字面量 函数: 对象分类: 1.
875 0
JavaScript学习(三)
强制类型转换(将一个数据类型强制转换为另一个数据类型) 在JS中如果需要写16进制的数字,需要以0x开头。8进制数字,需要以0开头。
779 0
JavaScript学习(六)
目录 函数 函数的定义 函数的调用 函数的简单调用 在事件响应中调用函数 通过超链接定义函数 函数参数的使用   使用函数的返回值 嵌套函数 递归函数 javascript中的内置函数 (1)pa...
966 0
好程序员web前端培训JavaScript学习笔记DOM
var box = document.getElementById('box') console.log(box) //
326 0
+关注
前端白鸽
前端学习交流企鹅群:731771211
73
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载