html-7

目录

一、 内置函数

 二、 对象

 三、 序列和this

1.序列化和反序列化

2.this

四、 事件

1.onload事件:但文档(html页面)加载完毕后执行

2.onclick事件:点击事件(单击事件)

此外还有鼠标事件和键盘事件


一、 内置函数

string
            charAt(idx)            返回指定位置处的字符
            indexOf(Chr)        返回指定字符串的位置,从左到右,找不到返回-1
            substr(m,n)            返回给定字符串中从m位置开始,取n个字符,省略n则取到末尾
            substring(m,n)        返回给定字符串中从m到n的字符串,省略n则到末尾
            toLowerCase()        将字符串中的字符全部转化成小写
            toUpperCase()        将字符串中的字符全部转化成大写
            length                 属性,不是方法,返回字符串长度
            
math
            Math.random()        随机数
            Math.ceil()            向上取整
            Math.follr()        向下取整

Date
            getFullYear()        年
            getMonth()            月
            getDate()            日
            getHours()            时
            getMinutes()        分
            getSeconds ()        秒
            设置日期
            setYear()
            setMonth()
            setDate()
            setHours ()
            setMinutes()
            setSeconds()
            toloacaleString() 转换成本地时间字符串
 

 下面是一些实例

<script type="text/javascript">	
			var str = "hello world";
			console.log(str);
			console.log(str.substring(3));  //3--最后
			console.log(str.substring(3,5));//3--5
			
			console.log(str.toLowerCase());
			console.log(str.toUpperCase());
			//Math.random()		随机数
			console.log(Math.ceil(Math.random()*1000%100));
			//Math.ceil()			向上取整
			console.log(Math.ceil(1.2));
			//Math.follr()		向下取整
			console.log(Math.floor(1.5));
			//获取日期
			var date = new Date();
			console.log(date);
			//getFullYear()		年
			console.log(date.getFullYear());
			//getMonth()			月
			console.log(date.getMonth()+1);
			//getDate()			日
			console.log(date.getDate());
			//getHours()			时
			console.log(date.getHours());
			//getMinutes()		分
			console.log(date.getMinutes());
			//getSeconds ()		秒
			console.log(date.getSeconds());
			var dateStr = date.getFullYear() + '-' + (date.getMonth()+1) + 
			'-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
			console.log(dateStr);
			console.log(date.toLocaleString());
		</script>

运行结果如图

 二、 对象

巧了,我没对象

所以我就先创造一个对象

 一.对象的创建
                    1.字面量形式创建对象
                        var 对象名 = {};//空对象
                        var 对象名 = {
                            键:值,
                            键:值,
                            ...
                        };
                    2.通过new Object创建
                        var 对象名 = new Object();//空对象
                    3.通过Object对象的create方法创建
                        var 对象名 = Object.create(null);//空对象
                        var 对象名 = Object.create(对象);

 然后,我要去操作对象

二.对象的操作
       获取对象的属性
             对象名.属性名;
       设置对象的属性    (如果属性)
              对象名.属性名 = 值;

 那么就来实操一下把

<script type="text/javascript">
		 	//对象的创建
			//字面量形式创建对象
			var obj1 = {}
			console.log(obj1);
			var obj2 = {
				name:"zhangsan",
				age:23
			};
			console.log(obj2);
			//通过new Object创建
			var obj3 = new Object();//空对象
			console.log(obj3);
			//通过Object对象的create方法创建
			var obj4 = Object.create(null);//空对象
			console.log(obj4);
			var obj5 = Object.create(obj2);
			console.log(obj5);
			
			/*对象的操作*/
			//获取对象的属性
			//获取不存在的属性
			console.log(obj1.name); //undefind
			//获取存在的属性
			console.log(obj2.name); //zhangsan
			console.log(obj3.name); //undefind
			console.log(obj4.name); //undefind
			console.log(obj5.name); //zhangsan
			
			//设置对象的属性
			//存在的属性,修改属性值
			obj2.age = 20;
			console.log(obj2);
			//不存在的属性,添加属性值
			obj2.upwd = "123456";
			console.log(obj2);
			
			console.log("---------------------")

下面是运行结果

 三、 序列和this

1.序列化和反序列化

对象(反序列化)和字符串(序列化)的转化

2.this

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

随着函数使用场合不同,this的值会发生变化,但是有一个总的原则,那就是this指得是,调用函数的那个对象。

四、 事件

1.onload事件:但文档(html页面)加载完毕后执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<body onload="loadWindow()">
		
		
	</body>
	<script type="text/javascript">
	
		function loadWindow(){
			console.log("文档加载完毕...");
		}
	
	
	</script>
</html

2.onclick事件:点击事件(单击事件)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<body onload="loadWindow()">
		<button onclick="test()">我是按钮</button>
		
	</body>
	<script type="text/javascript">
	
		function loadWindow(){
			console.log("文档加载完毕...");
		}
		
		function test(){
			console.log("按钮被点击了....");
		}
	
	
	</script>
</html>

   

 

 点击”我是按钮“后,控制台会显示”按钮被点击了“,前面还会有数字

此外还有鼠标事件和键盘事件

这里直接放图,有兴趣的小伙伴可以自己去试试哦

 

 详情请看菜鸟教程

    HTML DOM 事件对象 | 菜鸟教程 (runoob.com)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值