Web学习第三天

版权声明:斌哥版权,如有雷同,纯属虚构 https://blog.csdn.net/iostream992/article/details/85059754

1、js的String对象

创建String对象

Var str="abc";

 

方法和属性(文档)

属性length:字符串的长度

 

方法

(1)与HTML相关的方法

-bold()加粗

-fontcolor("color")字体颜色

-fontsize(x) x:1-7 设置字体大大小

-link(url) 将字符串显示成超链接

-sub() 设置下标 sup()设置上标

 

(2)与java相似的方法

-concat( ) 连接字符串

-charAt( ) 返回指定位置的字符串 字符位置不存在返回一个空字符

-indexOf( ) 返回字符串的位置 当字符不存在返回-1

-split( ) 切分字符串,把字符串切分成数组

-replace( ) 替换方法

传递两个参数

第一个参数是原始的值

第二个是要替换的值

-substr( ) 从第几位开始向后解决几位

-substring( )冲第几位开始向后截取到底几位,不包括后面的那位

 

2、js的Array对象

创建数组(三种)

-var arr1=[1,2,3];

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

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

 

-var arr=[];//创建一个空数组

方法要加括号,属性什么都不加

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

方法:

-concat方法:数组连接

-join方法:分割数组中的元素

-push( )方法:向数组末尾添加数组元素,返回值是数组添加完后的长度

     如果添加的是整个数组,是吧数组当成一个整体添加进去,而不是一个个添加

 

-pop( ):删除最后一个元素,而且返回删除元素

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

 

3、js的Date对象

在java里面获取当前时间

Date date=new Date();

//格式化

//toLocaleString( )

js获取当前时间

获取当前年的方法

获取当前月的方法:返回的是0-11月

获取当前的星期的方法: 返回一周天的某一天(0-6)

                                      0:星期日

获取当前日的方法: (1-31)

获取当前小时的方法 (0-23)

获取当前的分钟的方法

获取当前秒的方法

获取毫秒数的方法

getTime( )

1970年1月1号距离今的毫秒数

应用场景:使用毫秒数来处理缓存的效果(不有缓存)

http://www.baidu.com?毫秒数

 

4、js的Math对象

数学里的运算

里面都是静态方法,直接用Math.来调用

 

ceil(x):向上舍入

floor(x):向下舍入

round(x):四舍五入

 

random():达到一个随机数(0-1之间的随机数)

                        伪随机数

 

pow(x,y)

5、js的全局函数

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

eval():执行js代码(如果字符串是一个js代码,可以直接执行)

encodeURI():对字符进行编码

decodeURI() :对字符进行解码

 

isNaN():判断当前字符是否是数字

-var str2="aaa";

alert(isNaN(str2));

//如果是数字,返回false

//如果不是数字,返回true

parsetInt():类型转换

-var str3="123";

document.write(parseInt(str3)+1);

 

6、js的函数的重载

说明是重载?方法名相同,参数不同

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

调用最后一个方法

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

js里面是否存在重载

1、js里面不存在重载

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

 

 

7、js的bom对象

bom:broswer object model:浏览器对象模型

有哪些对象:

navigator:

可以获取客户机(浏览器)的信息

-navigator.appName

screen:

获取屏幕的信息

location:

请求url地址

-href属性

获取当前请求的url地址

设置url地址

-页面上安置一个按钮,按钮上绑定一个事件,

-当我点击这个按钮,页面可以跳转到另外一个页面上

 

history:

请求的url的历史记录

-创建三个页面

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

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

3、创建c.html

 

window(重点掌握)

窗口对象

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

 

方法

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

简写alert()

-confirm():确认框

-var flag=window.confirm("是否删除?");

-prompt():输入的对话框

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

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

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

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

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

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

-window.close();

-做定时器

setInterval("js代码",毫秒数):1秒=1000毫秒

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

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

setTimeout("js代码",毫秒数):

-表示在毫秒数后执行,但是只能执行一次

-表示4s后执行alert,但是只会执行一次

clearInterval():清除setInterval设置的定时器

var id1=setInterval("alert('123');",3000);

//通过setInterval会有一个返回值

clearInterval(id1);

clearTimeout():清除setTimeout设置的定时器

var id2=setTimeout("alert('abc');",4000);

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:支持xml 1.0的一些新特性

 

*DHTML:是很多技术的简称

-HTML:封装数据

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

-dom:操作HTML文档(标记型文档)

-javascript:专门指的是js的语法语句(ECMAScript)

BOM、HTML、DOM关系图

 

 

9、document对象

表示整个的文档

常用方法

*write()方法:

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

2、向页面输出html代码

-var str=“ABC”

document.write(str);

document.write(<hr/>);

*getElementById():返回对拥有指定id的第一个对象的引用

-通过id得到元素

-传递的参数是标签里面的id的值

得到属性值:标签对象.属性名称

 

 

*getElementsByName():返回带有指定名称的对象那个集合

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

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

*getElementsByTagName("标签名称"):返回带有指定标签名的对象集合

 通过标签名称来得到元素

 

注  意   

当标签只有一个时,这个标签只能使用name获取,

不需要遍历,直接通过数组下标获取到值

同理

 

10、案例  window弹窗

 

 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/iostream992/article/details/85059754