javascript内置对象/js事件/DOM/BOM简介

javascript内置对象

简介

JavaScript 对象是拥有属性和方法的数据。
可以说 "JavaScript 对象是变量的容器"。
但是,我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。

String/正则表达式(RegExp)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var str = "nihao"
	// g 表示全局匹配,如果不区分大小写匹配,那就要加上i
	// 使用规则中的方法,来匹配字符串中是否有符合规则的字符串。有就是true,否则就是false
	var gz = RegExp(/NI/ig);
	var f = gz.test(str);
	document.write(f);
	document.write("<br>")

	var gz1 = RegExp(/ll/ig);
	// 根据规则来查找字符串中的指定字符,如果有就返回这个字符,没有就返回null
	var s = gz1.exec(str);
	document.write(s);
	// 分割线标签
	document.write("<hr>")



	// 字符串中的方法来匹配规则
	var str2 = "wo ai java ai sheng huo ai jia ting"
	var gz3 = RegExp(/java/ig);
	// 检索字符串中指定规则的字符串出现的索引位置,并返回其索引.
	var f2 = str2.search(gz3);
	document.write(f2)
	document.write("<br>")
	var gz4 = RegExp(/ai/ig);
	//     字符串中是否包含指定规则的一个或者多个字符串,包含就返回此串,不包含就返回null
	var f3 = str2.match(gz4);
	document.write(f3)
	document.write("<br>")


	// 字符串的属性
	// 字符串的长度获取
	var lth = str.length;
	// alert(lth)    弹出值
	document.write(lth)
	document.write("<hr>")
	document.write(str.charAt(1));
	document.write("<hr>")

	// concat() 方法用于连接两个或多个字符串
	var str3 = str.concat(str2);
	document.write(str3);

	// 去掉字符串的空格  去掉左边空格trimleft(),去掉右边空格trimright(),去掉两边空格trim()
	var str4 = "    nihao";
	var s1 = str4.trimLeft();
	document.write(s1);
	document.write("<hr>")
</script>

Math对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	// math内置对象
	// 常见用法
	/* 
	 ceil(x)	对数进行上舍入。
	 exp(x)	    返回 Ex 的指数。
	 floor(x)	对 x 进行下舍入。
	 random()	返回 0 ~ 1 之间的随机数。
	 sqrt(x)	返回数的平方根。
	 max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
	 min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
	 round(x)	四舍五入。
	  
	 */
	/* for(var i=0;i<100;i++){
		var n=Math.random()*100;
		var num=Math.ceil(n);
		document.write(num);
		document.write("<br>")
	}	 */
	var max=Math.max(12,45,12,34,7,8,90,120);
	document.write(max);
	
	
</script>

Number对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	// Number对象是原始数据的包装对象
	
	/* 创建 Number 对象的语法:
	var myNum=new Number(value);
	var myNum=Number(value); */
	
/* 
	方法	描述
	isFinite	检测指定参数是否为无穷大。
	toExponential(x)	把对象的值转换为指数计数法。
	toFixed(x)	把数字转换为字符串,结果的小数点后有指定位数的数字。
	toPrecision(x)	把数字格式化为指定的长度。
	toString()	把数字转换为字符串,使用指定的基数。
	valueOf()	返回一个 Number 对象的基本数字值。 */
	
	var num=Number(100);
	document.write(num);
	document.write("<br>");
	var num2=Number(13.123456789);
	var s=num2.toFixed(4);
	document.write(s);
	document.write("<br>");
	
</script>

Array对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	// 注意它的定义和Java是有却别的,Java使用的是大括号{},而javascript使用的是中括号[].
	var arr=[12,13,14,15];
	var len=arr.length;
	// alert(len);
	document.write(len);
	document.write("<br>");
	
	
	/* 常用方法:
	concat()	连接两个或更多的数组,并返回结果。
	forEach()	数组每个元素都执行一次回调函数。
	every()	检测数值元素的每个元素是否都符合条件。
	filter()	检测数值元素,并返回符合条件所有元素的数组。
	join()	把数组的所有元素放入一个字符串。
	map()	通过指定函数处理数组的每个元素,并返回处理后的数组。
	   map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
	   map() 方法按照原始数组元素顺序依次处理元素。
	   注意: map() 不会对空数组进行检测。
	   注意: map() 不会改变原始数组。
	 */
	arr.forEach(myFunction);
	function myFunction(item,index){
		document.write("index"+"["+index+"]"+":"+item+"<br>")
	}
	document.write("<hr>")
	
	
	
	 var m=arr.every(myevery);
	function myevery(num){
		return num>10;
	}
	document.write(m);
	document.write("<hr>")
	var f=arr.filter(myfilter);
	function myfilter(num){
		return num>13;
	}
	document.write(f);
	document.write("<hr>")
	
	
	
</script>

Date对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/* 常用方法: 
	getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
	getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
	getFullYear()	从 Date 对象以四位数字返回年份。
	getHours()	返回 Date 对象的小时 (0 ~ 23)。
	getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
	parse()	返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
	
	setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
	setFullYear()	设置 Date 对象中的年份(四位数字)。
	setHours()	设置 Date 对象中的小时 (0 ~ 23)。
	setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
	setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
	setMonth()	设置 Date 对象中月份 (0 ~ 11)。
	setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
	setTime()	setTime() 方法以毫秒设置 Date 对象。
	
	
	toLocaleDateString()	根据本地时间格式,把 Date 对象的日期部分转换为字符串。
	toLocaleTimeString()	根据本地时间格式,把 Date 对象的时间部分转换为字符串。
	toLocaleString()	根据本地时间格式,把 Date 对象转换为字符串。
	
	*/
	
	
	
	var date=new Date;
	document.write(date);
		document.write("<br>")
	document.write(date.getDate())
	document.write("<br>")
	document.write(date.getDay())
	document.write("<br>")
	document.write(date.getFullYear())
	document.write("<br>")
	
	var s=date.toLocaleString();
	document.write(s);
	document.write("<br>")
	
	
	// javascript和Java的日期有点区别,Java中有日期的格式化类,而javascript中没有,
	// 如果想要变成指定的格式。
	// 就要调用第三方对象,moment.js官网对于时间的格式化对象。
</script>

BOM(Browser Object Model)

概念

BOM是浏览器对象模型,是浏览器将各个组成部分封装成对象。
把浏览器页面分为以下几个对象:window(窗口对象) history(本页的历史记录对象),location(地址栏对象),Navigator(浏览器对象),screen(显示器对象)
特点:BOM对象不能自己创建,在HTML文档加载的时候,浏览器会创建对象。

window对象

它表示的是浏览器打开的窗口
常用的方法:
   alert() 显示带有一段消息和一个确认按钮的警告框 
   close() 关闭浏览器窗口。 
   confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 
   open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 
   setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
   代码练习
   <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="clock" id="d1" />
		<!-- 清除setInterval的值,首先必须将setInterval的返回值作为参数传递给clearInterval() -->
		<button onclick="time=window.clearInterval(time)">结束按钮</button>
		<script type="text/javascript">
			// 每隔一秒调用一次函数,函数中有具体的处理逻辑。
			var time=self.setInterval("clock()",1000);
			function clock(){
				var name=document.getElementById("d1");
				name.value=new Date();
			}
		</script>
	</body>
</html>


Location对象

地址栏对象,通过window.Location获取到对象。
常用的对象属性:herf,可以设置或者获取对象的URL.
     <html>
     <body>
     <script type="text/javascript">
     document.write(location.href);
     </script>
     </body>
     </html>
常用方法:
     reload() 重新加载当前文档。 
     replace() 用新的文档替换当前文档。window.location.replace("http://www.w3school.com.cn")

history对象

当前窗口的历史记录对象
常用的方法就是前进后退:
     go() 加载 history 列表中的某个具体页面。 go()中的参数 1是前进,-1是后退。

DOM(Document Object Model)

概念:文档对象模型,是将HTML文档的各个部分封装成对象。
文档对象:也被称为DOM树模型,
包含以下对象:
    文档对象:Document
    元素对象;Element
    属性对象:Attribute
    文本对象:Text
    注释对象:Comment
    节点对象:Node 

Document对象

每个载入浏览器的HTML文档都会成为Documen的对象,此对象可以对文档的所有元素进行操作。document对象是Window对象的属性,可以通过window.document获取。
常用方法:
    getElementById() 返回对拥有指定 id 的第一个对象的引用。
    getElementsByName() 返回带有指定名称的对象集合。 
    getElementsByTagName() 返回带有指定标签名的对象集合。 
    write() 向文档写 HTML 表达式 或 JavaScript 代码。 
    createElement(),创建元素节点
    createTextNode(),创建文本节点
        常见操作:
            var ct = document.getElementById("ct");//获取元素对象
			var op = document.createElement("option");//创建节点元素
			var cityName = document.createTextNode(c[i])//创建节点文本对象
			op.appendChild(cityName); //在创建的节点元素中添加文本
    

事件

概念:时间就是我们常见的操作,比如将鼠标移到那个上面,移除那块区域,单击,双击等等。
常见的事件:
    onchange	HTML 元素改变
    onclick	    用户点击 HTML 元素
    onmouseover	用户在一个HTML元素上移动鼠标
    onmouseout	用户从一个HTML元素上移开鼠标
    onkeydown	用户按下键盘按键
    onload	    浏览器已完成页面的加载
事件的功能:浏览器页面打开时触发事件,关闭时触发事件,用户点击时触发事件,或者验证用户输入的合法性
js监听事件的方式:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- js事件和jquery库的时间使用方式不同 -->
		<!-- js事件:现在标签上调用执行的逻辑函数,然后在script中定义函数的执行逻辑 -->
		<!-- jquery库中的事件是,先获取元素的对象,元素对象调用具体的事件方法,然后事件方法中写入具体的逻辑 -->
		<button onclick="clickeven()">按钮</button>
		<script type="text/javascript">
			function clickeven(){
				alert("成功")
			}
		</script>
	</body>
</html>


示例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="">
			输入用户名:<input type="text" name="username" id="un" placeholder="6-12位数字/字母组成" value="" /><br>
			请输入密码:<input type="password" name="mypassword" id="pd" placeholder="密码长度6-12位" value=""/><br>
		</form>
		<script src="./js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$('#un').blur(function(){
				var v=$(this).val();
				var len=v.length;
				var rg=/^[0-9a-zA-Z]{6-12}$/;
				if(len==0){
					alert("用户名不能为空")
				}else if(!(len>=6&&len<=12)){
					alert("用户名长度不符合规则")
				}/* else if(!rg.test(v)){
					alert("请按规则输入用户名")
				} */else{
					console.log(v)
					// 书去焦点
					$('#pd').blur(function(){
						var v1=$(this).val();
						
						var len2=v1.length;
						if(len2==0){
							alert("用户密码不能为空")
						}else if(!(len2>=6&&len2<=12)){
							alert("用户密码长度不符合规则")
						}else{
						console.log(v1)	
						}
					})
				}});
		</script>
	</body>
</html>

事件对象

我们在使用事件时,可能需要精确的对于每个键盘或者鼠标按键监控,需要知道精确的按下哪个键或者鼠标。
这样我们在标签上创建点击事件时,就需要在点击事件调用的函数中传入事件对象(event),事件对象不需要自己创建,
键盘事件:接下来在事件调用的函数中使用时间对象可以调用keyCode,通过键的ASCII值,确定具体键
鼠标事件:接下来在事件调用的函数中使用时间对象可以调用which,鼠标左键是1,中键2,右键3,确定具体鼠标按键
      示例:
      键盘事件:<input type="text" id="" value="" onkeypress="demo3(event)"/>
        function demo3(e){
			//e.keyCode 获取按键的键码
			if(e.keyCode==97){
				console.log("想左跑")
			}
			console.log("按键按下并松开了"+e.keyCode)
		}

事件冒泡

概念:事件冒泡就是标签嵌套,每层标签添加点击事件,当内层时间被触发时,内层时间也会一次被触发。
案例:<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#wai{
			width: 200px;
			height: 200px;
			background-color: aqua;
		}
		#mid{
			width: 100px;
			height: 100px;
			background-color: #808080;
		}
		#nei{
			width: 50px;
			height: 50px;
			background-color: yellow;
		}
	</style>
	<body>
		<!-- 事件冒泡 -->
		<div id="wai"onclick="clickwai()">
			<div id="mid" onclick="clickmid()">
				<div id="nei" onclick="clicknei()">
					
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function clickwai(){
		alert('外部触发了')
	}
	function clickmid(){
		alert('中间触发了')
	}
	function clicknei(){
		alert('内部触发了')
	}
	
</script>

避免事件冒泡的发生
//再点击事件的函数中传递事件对象,函数中事件对象调用stopPropgation()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#wai {
			width: 200px;
			height: 200px;
			background-color: aqua;
		}

		#mid {
			width: 100px;
			height: 100px;
			background-color: #808080;
		}

		#nei {
			width: 50px;
			height: 50px;
			background-color: yellow;
		}
	</style>
	<body>
		<!-- 冒泡事件 -->
		<div id="wai" onclick="clickwai(event)">
			<div id="mid" onclick="clickmid(event)">
				<div id="nei" onclick="clicknei(event)">

				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function clickwai(e) {
		alert('外部触发了')
		// e.stopPropagation();
	}

	function clickmid(e) {
		alert('中间触发了')
		// e.stopPropagation();
	}

	function clicknei(e) {
		alert('内部触发了')
		// 组织本层事件的传播,,触发内层事件时,中间和外层时间不会触发
		e.stopPropagation();
	}
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值