JavaScript进阶1

最新推荐文章于 2024-09-25 14:00:00 发布

龙神~

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量85

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42161333/article/details/104980389

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

title: js进阶

1.js的内部类
js中提供了一些可以直接使用的类，这种类就叫做内部类主要有：
Object、Array、Math、Boolean、RegExp、Date、Number。
（1）内部类的分类：
a：静态类：如，Math 类名.属性/方法
b：动态类：如，Date var 对象名 = new 动态类（）；对象名.属性/方法；
（2）Math是静态类，提供了常用的数学函数和常数
abs（x）；返回绝对值
ceil（x）；对一个数进行上舍入
floor（x）；对一个数进行下舍入
max/min（x,y）；大小
round（X）；对x进行四舍五入
random（）；随机生成一个大于0小于1的16位小数位的数字

var num = Math.round(Math.random()*100);

(3)动态类，Date类提供了日期和时间的操作
Date（）返回当前的日期和时间
getDate（）从Date对象返回一个月中的某一天
getDay（）从Date对象返回一周中的某一天
getMonth（）从Date对象返回月份
getYear（）从Date对象返回年
getHours() 从Date对象返回小时数
getMinutes（）从Date对象返回分钟
getSeconds（）从Date对象返回秒数
（4）String是动态类，提供了对字符串的各类操作
indexOf() 返回某个字符串值在该字符串中首次出现的位置
split() 把字符串分割为字符串数组
substr() 提取取从start下标开始的指定数目的字符
substring() 提取字符串中介于两个指定下标之间的子串
charAt() 返回指定位置的字符
length 属性，可以得到字符串的长度
toString() js中所有内部对象的成员方法，作用是
将对象中的数据转变成某个格式的字符串。
（5）Array类，提供了对数组的操作。动态类
concat() 连接两个或更多的数组，并返回结果
join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多的元素，并返回新的长度
reverse() 颠倒数组中元素的顺序
shift() 删除并返回数组的第一个元素
slice() 从某个已用的数组返回选定的元素
sort() 对数组进行排序
splice() 删除元素，并向数组添加新元素
toSource 代表对象的源代码
toString() 把数组转换成字符串，并返回结果
toLocaleString() 把数组转换成本地数组，并返回结果
unshift()向数组的开头添加一个或更多的元素，并返回新的长度
valueOf() 返回数组对象的原始值
2.js事件驱动机制
（1）事件的分类：
a：鼠标事件：当用户在页面上使用鼠标点击页面元素时，对应的dom节点会触发鼠标事件。主要有：click、dbclick、、mousedown、mouseover、mouseup、mousemove
b：键盘事件：当用户用键盘输入信息时，会触发键盘事件。
主要有：keydown、keypress、keyup。
c：Html事件：在html节点加载变更等相关的事件，比如
window的onload、unload、abort、error。
文本框的select、change等。
d：其他事件：
页面中一些特殊对象运行过程中产生的事件，比如
xmlhttprequest对象的相关事件。

<script type="text/javascript" language="javascript">
function tex(e){
	alert("OK");
}
</script>
<input type="button" value="button" onclick="tex(event)" />

<!-- 如何通过修改style来改变style -->
<body>
<script type="text/javascript" language="javascript">

function tex(e){
	if(e.value=="黑色"){
		var div1 = document.getElementById('div1');
		div1.style.backgroundColor="black";
	}else if(e.value=="红色"){
		var div1 = document.getElementById('div1');
		div1.style.backgroundColor="red";
	}
}
</script>
<div id="div1" style="width: 500px;height: 300px;background-color: gray;"></div>
<input type="button" value="黑色" onclick="tex(this)" />
<input type="button" value="红色" onclick="tex(this)" />
</body>

3.访问外部定义的CSS样式（类定义的CSS样式）
方法：先取得定义类的样式表的引用，用document.styleSheets实现
，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合包含定义在样式表中的所有的所用CSS规则（IE中为rules）

<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="E:\JAVA代码\html5\WebContent\css\index.css" />

</head>
<!-- 如何通过修改css来改变style -->
<body>
<script type="text/javascript" language="javascript">
function tex(e){
	var ocssRules = document.styleSheets[0].rules;//获取第一个css中的所有的选择器
	var style1 = ocssRules[0];//该css文件的第一个选择器
	if(e.value=="黑色"){
		style1.style.backgroundColor="black";
	}else if(e.value=="红色"){
		style1.style.backgroundColor="red";
	}
}

</script>
<div id="div1" class="style1" ></div>
<input type="button" value="黑色" onclick="tex(this)" />
<input type="button" value="红色" onclick="tex(this)" />
</body>

</html>