1. 技术文章
  2. JavaWeb（4）-JS对象

JavaWeb（4）-JS对象

由 牧云@^-^@ 提交于 2020-02-06 03:38:49

JS对象

js的string对象

创建string对象

var str = "abc";

string对象常用属性、方法

1.属性
length表示字符串的长度
2.方法
（1）与html相关的方法
bold()方法：使用粗体显示字符串 str.bold()
fontcolor()：设置字符串颜色str.fontcolor("red");
fontsize()：设置字符串尺寸str.fontsize(5)
link()：将字符串显示为超链接str.link(url)
sub(),sup()：分别设置下标和上标str1.sub() str2.sup()
（2）与java相似的方法
concat()：连接字符串str1.concat(str2)
charAt()：返回指定位置的字符串str.charAt(0)
indexOf()：返回字符串的位置str.indexOf("a") 字符不存在时返回-1
split()：切分字符串成数组var arr1 = str.split("-");
replace()：替换字符串str1.replace("原始值","替换值");
substr()：抽取字符串str.substr(从下标为第几位开始,截取几个字符)
substring()：str.substring(从下标为第几位开始,到下标为第几位结束且不包含最后一位)

var str="abcedfghi"
document.write(substr(5,3));//输出fgh
document.write(substring(3,5));//输出ed
document.write(substring(5,3));//输出fd

js的array对象

创建array对象

三种方式：
var arr1 = [1,2,3];
var arr2 = new Array(3);//长度是3
var arr3 = new Array(1,2,3);//数组中的元素是1,2,3

array对象常用属性、方法

1.属性
length属性：数组长度arr1.length
2.方法：
concat()：数组连接arr1.concat(arr2)
join()：根据指定字符分割数组arr1.join("-")输出结果为1-2-3
push()：向数组末尾添加一个元素，返回数组新的长度arr1.push("a")

var arr1 = ["a","b"];
var arr2 = ["c","d"];
document.write(arr1.push(arr2));

输出结果为3，arr2作为一个整体字符串添加
pop()：删除并返回最后一个元素
reverse()：颠倒数组中元素的顺序arr.reverse()

js的Date对象

获取当前时间

var date = new Date();

常用方法

转换时间格式
date.toLocalString();
获取当前的年、月、日、星期、时间
date.getFullYear();
date.getMonth()+1;
date.getDate();
date.getDay();//返回0-6，表示周日-周六
date.getHours();
date.getMinutes();
date.getSeconds();
date.getTime();//获取1970年1月1日至今的毫秒数

js的Math对象

1.属性
PI ： 圆周率
2.方法
里边都是静态方法，直接使用Math.方法()
Math.ceil(x)：向上舍入
Math.floor(x)：向下舍入
Math.round(x)：四舍五入

var x=10.4
document.write(Math.ceil(x));//输出11
document.write(Math.floor(x));//输出10
document.write(Math.round(x));//输出10

Math.random()：返回0.0-1.0伪随机数
Math.floor(Math.random()*10);可以得到0-9的随机数
Math.max(x,y);
Math.min(x,y);
Math.pow(x,y); x的y次方

js的全局函数

由于不属于任何对象，直接写名称使用
eval：如果字符串是一个js代码，直接执行

var str = "alert("a");";
eval(str);

encodeURI()：对字符进行编码
decodeURI()：对字符进行解码
encodeURIComponent()：把字符串编码为URI组件
decodeURIComponent()：解码一个编码的URI组件

isNaN()：判断当前字符串是否是数字，是数字返回false，不是数字返回true
parseInt()：类型转化

js函数的重载

重载：方法名相同，参数不同
js里面不存在重载，但是可以通过其他方式模拟重载的效果，把传递的参数传到arguments数组来实现

错误写法：

function add1(a,b){
	return a+b;
}
function add1(a,b,c){
	return a+b+c;
}
function add1(a,b,c,d){
	return a+b+c+d;
}
alert(add1(1,2));//输出异常
alert(add1(1,2,3));//输出异常
alert(add1(1,2,3,4));//输出10

结论：只会调用最后一个方法

用arguments数组模拟效果：

function add(){
	if(arguments.length == 2){
		return arguments[0]+arguments[1];
	}else if(arguments.length == 3){
		return arguments[0]+arguments[1]+arguments[2];
	}else if(arguments.length == 4){
		return arguments[0]+arguments[1]+arguments[2]+arguments[3];
	}else{
	retutn 0;
	}
}
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));

js的bom对象

1.bom

browser object model浏览器对象模型

2.对象：

（1）navigator

获取客户机（浏览器）的信息navigator.appName

（2）screen

获取屏幕的信息screen.width,screen.height

（3）location

请求url地址，href属性（获取请求的url地址location.href设置url地址）

（4）history

请求的url的历史记录history.back() history.go(-1)到访问的上一个页面、 history.forward() history.go(1)到访问的下一个页面

（5）window

顶层对象。所有的bom对象都是在window里边操作的
属性：opener（获取创建当前窗口的窗口）var w = window.opener
方法：
alert()：页面弹出一个框，显示内容
confirm()：确认框

var flag = windows.confirm("是否确认删除？");
//返回值
if(flag == true){}

prompt()：输入对话框

window.prompt("显示的内容","输入框中的默认值");

open()：打开一个新的浏览器窗口

window.open("新窗口的地址","","窗口的特征（宽高）width=200,height=300");

close()：关闭窗口window.close()浏览器兼容性差
setInterval()：指定周期内调用函数

window.setInterval("js代码",毫秒数);

setTimeout()：在指定的毫秒数之后执行，只执行一次

window.setTimeout("js代码",毫秒数);

clearInterval()：清除setInterval设置的定时器。根据setInterval的返回值

var id = setInterval("alert('a')",3000);
function clear(){
	clearInterval(id);
}

clearTimeout()：清除setTimeout设置的定时器。根据setTimeout的返回值

var id = setTimeout("alert('a')",3000);
function clear(){
	clearTimeout(id);
}

js的dom对象

document object model：文档对象模型
文档：超文本标记文档（html，xml）
使用js里面提供的对象的属性和方法对标记型文档进行操作。

需要把html里边的标签、属性、文本内容都封装成对象，解析标记型文档

解析过程

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
document对象：整个文档
element对象：标签对象
属性对象
文本对象
node节点对象：这个是这些对象的父对象
如果在对象里面找不到想要的方法，这个时候到node对象里面去找。

node接口的特性和方法

特性/方法 类型/返回类型 说明
nodeName String 节点的名字：根据节点的类型而定义
nodeValue String 节点的值：根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNode列表中的第一个节点
lastChild Node 指向在childNode列表中的最后一个节点
childNodes NodeList 所有子节点的列表
parentNodes Node 返回一个给定节点的父节点
praviousSibling Node 指向前一个兄弟节点：如果这个节点是第一个兄弟节点，该值为null
nextSibling Node 指向后一个兄弟节点：如果这个节点就是最后一个兄弟节点，该值为null
hasChildNodes() Boolean 当childNode包含一个或多个节点时，返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象：仅用于Element节点
appendChild(node) Node 将node添加到childNode的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnode

DHTML

DHTML是几个技术的简称。
html：封装数据
css：使用属性和属性值设置样式
dom：操作html文档（标记型文档）
javascript：专门指的是js的语法语句（ECMAScript）

js的document对象

每个载入浏览器的html文档都会成为document对象。

常用方法

getElementById()

通过id得到元素（标签）

<input type="text" id="id" value="a">
<script type="text/javascript">
	var input = document.getElementById("id");
	alert(input.value);
</script >
getElementsByName()

通过标签的name的属性值返回一个数组（集合）

<input type="text" name="name" value="a">
<input type="text" name="name" value="b">
<input type="text" name="name" value="c">
<script type="text/javascript">
	var input = document.getElementsByName("name");
	alert(input.length);//输出3
	for(var i=0;i<input.length;i++){//遍历数组
		var input1 = input[i];
		alert(input1.value);
	}
</script >
getElementsByTagName()

通过标签名称返回一个数组

<input type="text" name="name" value="a">
<input type="text" name="name" value="b">
<input type="text" name="name" value="c">
<script type="text/javascript">
	var input = document.getElementsByTagName("input");
	alert(input.length);//输出3
	for(var i=0;i<input.length;i++){//遍历数组
		var input1 = input[i];
		alert(input1.value);
	}
</script >
write()

向页面输出变量（值），输出html代码

document.write(str);
document.write("<hr/>");
标签
js
js截取字符串
字符串函数
js代码
var
数组
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!