js的对象,bom,dom实例介绍

1.js的string对象

**创建一个string对象

***var str = "abc";

**方法和属性(文档)

***属性 length: 字符串的长度

***方法

(1)与html相关的方法

-bold():加粗

-fontcolor():设置字符串的颜色

-fontsize():设置字体的大小

-link():将字符串显示为超链接

***document.write(str4.link("https://www.baidu.com.cn"));

document.write(str4.link("hello.html"));

-sub() sup():下标和上标

(2)与java相似的方法

-concat():连接字符串

***var str1 = "abc";

var str2 = "dfg";

document.write(str1.concat(str2));

-charat():返回指定位置的字符串

*** document.write(str3.charat(20)); //字符的位置不存在，返回空字符串

-indexof():返回字符串的位置

*** document.write(str4.indexof("w")); //字符不存在，返回-1

-split():切分字符串

*** var str5 = "a-b-c-d";

var arr1 = str5.split("-");

document.write("length:"+arr1.length);

-replace():替换字符串

*传递两个参数：

--第一个参数是原始的字符

--要替换成的字符

*** var str6 ="abcd";

document.write(str6.replace(str6,"123"));

document.write("

");

var str7 = "abcd";

document.write(str7.replace("a","q"));

-substr()和substring()

*** var str8 = "asdfghjkl";

document.write(str8.substr(5,3)); //hjk 从下标为5的位置往后截取3个

document.write(str8.substring(3,5)); //fg 从下标为几开始到下标为几结束 [3,5)

2.js的array对象

**创建数组(三种)

-var arr1 = [2,3,"4"];

-var arr2 = new array(3); //长度是3

-var arr3 = new array(1,2,3); //数组中的元素是1，2，3

**属性:length:查看数组的长度

**方法

-concat方法： 数组的连接

var arr11 = [1,2,3];

var arr12 = ["a",5,6];

document.write(arr11.concat(arr12));

-join():根据指定的字符来分割字符

var arr13 = new array(3);

arr13[0] = "a";

arr13[1] = "b";

arr13[2] = "c";

document.write(arr13); //默认用逗号连接

document.write("

");

document.write(arr13.join("-")); //变为用-连接

-push():向数组末尾添加元素，返回数组的新的长度

**如果添加的是一个数组，这个时候把数组当作一个整体的字符串添加进去

//push方法

document.write("

");

var arr14 = new array(3);

arr14[0] = "top";

arr14[1] = "lucy";

arr14[2] = "jack";

document.write(arr14);

document.write("

");

document.write("old length:"+arr14.length);

document.write("

");

document.write("new length:"+arr14.push("zhangsan"));

document.write("

");

document.write("new array:"+arr14);

document.write("

");

var arr15 = ["aaa","bbb","ccc"];

var arr16 = ["www","qqq"];

document.write("old array:"+arr15);

document.write("

");

document.write("old length:"+arr15.length);

document.write("

");

document.write("new length:"+arr15.push(arr16));

document.write("

");

document.write("new array:"+arr15);

document.write("

");

for(var i = 0;i document.write(arr15[i]);

document.write(" ");

}

-pop():表示删除最后一个元素

//pop

document.write("

");

var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];

document.write("old array:"+arr17);

document.write("

");

document.write("return:"+arr17.pop());

document.write("

");

document.write("new array:"+arr17);

-reverse():颠倒数组中元素的顺序

document.write("

");

var arr18 = ["zhangsan","lisi","wangwu","zhaoliu"];

document.write("old array:"+arr18);

document.write("

");

document.write("new array:"+arr18.reverse());

3.js的date对象

**在java里面获取当前的时间

date date = new date();

//格式化

//tolocalestring()

**js里面如何获取当前的时间

var date = new date();

//获取当前时间

var date = new date();

document.write(date); //sat feb 10 2018 10:51:22 gmt+0800 (中国标准时间)

//转换成习惯的格式

document.write("

");

document.write(date.tolocalestring()); //2018年2月10日 10:54:26

**获取当前年的方法

getfullyear():得到当前的年

****document.write("year:"+date.getfullyear());

**获取当前月的方法

getmonth():获取当前的月

***返回的是 0-11月，如果想要准确的值，加1

***document.write("month:"+(date.getmonth()+1)); //必须要+1才行

**获取当前的星期的方法

getday():得到一周中的某一天

***返回的是0-6

***外国把星期日作为一周的第一天，星期日返回的是0

而星期一到星期六 返回的是1-6

*** document.write("星期:"+(date.getday()+1));

**获取当前的日

getdate():得到当前的天

***返回值是 1 ~ 31 之间的一个整数

*** document.write("day:"+date.getdate());

**获取当前的小时

gethours():获取小时

***返回值是 0 (午夜) 到 23 (晚上 11 点)之间的一个整数

*** document.write("hour:"+date.gethours());

**获取当前的分钟

getminutes():获取分钟

***返回值是 0 ~ 59 之间的一个整数

*** document.write("minutes:"+date.getminutes());

**获取当前的秒

getseconds():获取当前的秒

***返回值是 0 ~ 59 之间的一个整数

***document.write(date.getseconds());

**获取毫秒数

gettime()

返回的是1970 1 1至今的毫秒数

**应用场景:

使用毫秒数处理缓存的效果(不有缓存)

https://www.baidu.com毫秒数

4.js的math对象

*数学的运算

**里面的都是静态方法，使用可以直接使用 math.方法()

**ceil(x):向上舍入 document.write("ceil:"+math.ceil(mm));

**floor(x):向下舍入

**round(x):四舍五入

**random():得到一个随机数(伪随机数)

-得到0-9的随机数

document.write(math.floor(math.random()*10));

5.js的全局函数

*由于不属于任何一个对象，直接写名称使用

**eval():执行js代码(如果字符串是一个js代码，使用方法直接执行)

***var str = "alert('1234')";

//alert(str);

eval(str);

** encodeuri():对字符进行编码

-%e6%b5%8b%e8%af%95%e4%b8%ad%e6%96%87aaa1234

decodeuri():对字符进行解码

-测试中文aaa1234

encodeuricomponent()和decodeuricomponent()

**isnan():判断当前字符串是否是数字

-var str2 = "aaa";

alert(isnan(str2));

***如果是数字会返回flase

***如果不是数字，返回true

**parseint():类型转换

var str3 = "123";

document.write(str3+1); //1231

document.write("

");

document.write(parseint(str3)+1); //124

6.js的函数重载

**什么是重载方法名相同而参数不同

**js的重载是否重载 不存在

**调用最后一个方法

**把传递的参数保存到argument数组里面

**(面试)js里面是否存在重载

(1)js里面不存在重载

(2)但是可以通过其他的方式模拟重载的效果 通过arguments数组来实现

***function add1(){

//比如传递的是两个参数

if(arguments.length==2){

return arguments[0]+arguments[1];

}else if(arguments.length==3){

return arguments[0]+arguments[1]+arguments[2];

}

}

//调用

alert(add1(1,2));

alert(add1(1,2,3));

7.js的bom对象

**bom: broswer object model:对象模型

**有哪些对象

*** navigator :获取客户机的信息 (浏览器的信息)

-navigator.appname

-document.write(navigator.appname);

*** screen:获取屏幕的信息

-document.write(screen.width);

document.write("

");

document.write(screen.height);

*** location:请求的url地址

-href属性

*** 获取到请求的url地址

-document.write(location.href);

*** 设置url地址

-页面上放置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面

-location.href =

***

-鼠标点击事件 onclick="js的方法"

*** history:请求的url的历史记录

-创建三个页面

1.创建第一个页面 a.html 写一个超链接 到 b.html

2.创建b.html 链接到 c.html

3.创建c.html

-到访问的上一个页面

-history.back();

-history.go(-1);

-到下一个页面

-history.forward();

-history.go(1);

**** window(****)

*窗口对象

*顶层对象(所有bom对象都是在window里面操作的)

**方法

-window.alert():页面弹出一个框，显示内容

**简写alert

-confirm():确认提示框

- var flag = window.confirm("显示的内容");

-prompt():输入的对话框

- window.prompt("please input","0");

- window.prompt("在框上显示的内容","输入框里的默认值");

-open():打开一个新的窗口

**open("打开的新窗口的地址","","窗口的特征，比如窗口的宽度和高度")

-创建一个按钮，点击这个按钮，打开一个新的窗口

- window.open("history/a.html","","width=200,height=100");

-close():关闭窗口(浏览器兼容性比较差)

-window.close();

-做定时器

** setinterval("js的代码",毫秒数) 1秒=1000毫秒

-表示每三秒，执行一次alert方法

window.setinterval("alert('123');",3000);

** settimeout("js的代码"，毫秒数)

-表示在毫秒数之后执行，但是只会执行一次

-表示4秒之后执行js代码，但是只会执行一次

window.settimeout("alert('abc');",4000);

** clearinterval():清除setinterval设置的定时器

var id1 = setinterval("alert('13')",3000);//通过setinterval会有一个返回值

clearinterval(id1);

** cleartimeout():清除settimeout设置的定时器

var id2 = settimeout("alert('abc');",3000);

cleartimeout(id2);

8.js的dom对象

*dom:document object model:文档对象模型

**文档:

超文本文档(超文本标记文档) html,xml

**对象:

提供了属性和方法

**模型:使用属性和方法操作超文本标记性文档

***可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

***想要对标记型文档进行操作，首先需要对标记性文档里面的所有内容封装成对象

--需要把html里面的标签，属性，文本内容都封装成对象

***要相对标记型文档进行操作，解析标记型文档

-画图分析，如何使用dom解析html

***解析过程

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象

-document对象:整个文档

-element对象:标签对象

-属性对象

-文本对象

-node节点对象:这个对象是这些对象的父对象

***如果在对象里找不到想要的方法，这个时候到node对象里面去找

dom对象模型有三种:

dom level 1:将html文档封装成对象。

dom level 2:在level 1的基础上添加新的功能，例如:对于事件和css样式的支持。

dom level 3:支持xml1.0的一些新特性

* dhtml:是很多技术的简称

**html:封装数据

**css:使用属性和属性值设置样式

**dom:操作html文档(标记型文档)

**javascript：专门指的是js的语法语句(ecmascript)

9.document对象

*表示整个文档

**常用方法

**** write():

(1)向页面输出变量(值)

(2)向页面输出html代码

var str = "abc";

document.write(str);

document.write("

");

**** getelementbyid("传递的参数是标签里面的id的值");

-通过id得到元素(标签)

-使用getelementbyid得到input标签

var input1 = document.getelementbyid("nameid"); //返回值是标签对象

//得到input里面的value值

alert(input1.value); //标签对象.属性名称

//向input里面设置一个值value

input1.value = "bbbbbbb";

****getelementsbyname("传递的参数是标签里面name的值");

-通过标签name的属性值得到标签

-返回的是一个集合(数组)

-//使用getelementsbyid得到input标签

var inputs = document.getelementsbyname("name1");

//alert(inputs.length);

//遍历数组

for(var i = 0;i var inputs1 = inputs[i]; //每次循环得到input对象，赋值到inputs里面

alert(inputs1.value); //得到每个input标签里面的value值

}

****getelementbytagname("标签的名称");

-通过标签名称得到元素

- var inputs1 = document.getelementsbytagname("input"); //传递的参数是标签名称

document.write(inputs1.length);

//遍历数组，得到每个input标签

for(var m = 0;m //得到每个input标签

var input1 = inputs1[m];

//得到value值

alert(input1.value);

}

**** 注意的地方

****只有一个标签，这个标签只能使用name获取，这个使用getelementsbyname返回的是数组，

现在只有一个元素，这个时候不需要遍历，而可以直接通过数组的下标来获取到值

var inputs2 = document.getelementsbyname("name11")[0];

document.write(inputs2.value);

10.案例：window弹窗

-实现过程

1.创建一个页面

**两个输入项和一个按钮

**按钮上面有一个事件：弹出一个新窗口 open方法

2.创建弹出的页面

**表格

**每一个有一个按钮和编号和姓名

**按钮上也有一个事件：把当前的编号和姓名赋值到第一个页面的相应的位置

function s1(num1,name1){

//需要把num1和name1赋值到window页面中

//跨页面的操作 opener:得到创建这个窗口的窗口，得到window页面

var pwin = window.opener; //得到window页面

pwin.document.getelementbyid("numid").value = num1;

pwin.document.getelementbyid("nameid").value = name1;

//关闭窗口

window.close();

}

-opener:属性，获取创建当前窗口的窗口

-做这个案例时候会有一个问题

**由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件

**在实际开发中，没有这样的问题，实际中不可能访问本地文件