JavaScript学习笔记-白红宇

JavaScript学习笔记

阅读量：7012 次

发布时间：2019-06-28

本文共 12419 字，大约阅读时间需要 41 分钟。

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标签使用

**局部变量：在方法内部定义一个变量，只能在方法内部使用

- 在方法外部调用这个变量会出错

四:js的重载

方法名相同，参数列表不同

function add1(www.mcyllpt.com/,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.www.078881.cn sub()); //几次方

- sup();//上标

var str2="sss";

document.write(Str1.sup(www.tiaotiaoylzc.com));

（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(www.huayi1.cn/);

document.write(month+1);

-getDay();//获取当前的星期，注意，获取的星期是（0-6）

-getDate();//获取当前的天

-getHours();//获取当前的小时

-getMinutes();//获取当前的分钟

-getSeconds();//获取当前的秒

-getTime();//获取毫秒数，返回1970年1月1日至今的毫秒数

//应用场景

//使用毫秒数处理缓存http：//www.taohuaqing178.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(www.dongfan178.com/);//

-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地址

一个页面中设置一个按钮，连接到另一个页面

鼠标点击事件 οnclick="js的方法";

**history：请求URL的历史记录

//<input οnclick=" back();">

-到访问的上一个页面

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("<hr/>");

- 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<input.length;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<in.length;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();

}

</script>

十五：元素对象（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()(兼容性高)

</ul>

//获取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 节点值

**标签节点对应的值

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

</ul>

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树

</ul>

</div>

</div>

**apendChild方法

- 添加子节点到末尾，类似于剪切

//获取div2id的id

var div2=document.getElementById("div2id");

//获取ulid的id

var ul1=document.getElementById("ulid");

//把ulid中的li标签添加到div2中

ulid.apendChild(div2id);

** insertBefore(newNode,oldNode)方法

- 在么某个节点之前插入一个新的节点

//在<li id="li3">333</li>之前添加一个<li >000</li>

</ul>

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标签里面（在<li id="li3">333</li>之前添加一个<li >000</li>）

ulid.insertBefore(li4,li3);

}

** 不存在 insertAfter();方法

** removeChild(); 删除节点

//删除li id="li3">333</li>

//获取里标签

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

//获取父节点通过id获取或者是通过parentNode获取

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

ulid.remove(li3);

** replaceChild(newNode,oldNode);//替换节点，通过父节点进行替换

//替换<li id="li3">333</li>为<li id="li4">444</li>

</ul>

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);

</ul>

</div>

function cloneNode1(){

//复制<li id="li3">333</li>到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树的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本的内容

//获取span标签

var span1=document.getElementById("spanid");

//获取标签的文本内容

alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是HTML代码）

</div>

//获取span标签

var span1=document.getElementById("spanid");

//获取div的标签

var div1=document.getElementById("divid");

//向div1标签里面设置内容（可以是HTML代码）

div1.innerHTML="<h2>hehehe</h2>";

* 案例

* 得到当前时间

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);

转载地址：http://wnqtl.baihongyu.com/

你可能感兴趣的文章

Nginx

查看>>

小KING教你做android项目（二）---实现登陆页面并跳转和简单的注册页面

ASP.NET MVC 3 Razor 视图引擎基本语法

查看>>

C# 关于XML的简单操作实例

查看>>

ggplot2：画世界地图和中国地图合并数据增添信息标记

SPOJ Problem 4452:Simple Arithmetics II

查看>>

c# 使用 Tchart控件之数据绑定

查看>>

php 将其他地图位置坐标转换成百度地图坐标

查看>>

HTML5复习

查看>>