WEB字符串包装以及BOM编程

2024-01-26 01:50:03
开发
28

字符串包装类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="msg"></div>
		<script>
			//第一种通过类创建
			// let str = new String("123123")
			// console.log(str)
			//第二种方式
			// let str = String("123123")
			// console.log(str)
			//第三种
			let str = "abcdefg abcdefg abcdefg"
			console.log(str)
			// console.log(str.length)
			//charAt是通过下标访问字符串
			console.log(str.charAt(0))
			//indexof是返回子字符串的在字符串中的起始序号
			console.log(str.indexOf('d'))
			console.log(str.lastIndexOf('d'))
			//返回下标字符的asc码值
			console.log(str.charCodeAt(0))
			//concat拼接字符串
			let str1 = "ABCD"
			console.log(str.concat(str1,"123","789"))
			//match使用正则表示来匹配符合规则的字符串
			//replace会替换掉替换符合条件的第一个目标
			console.log(str.replace("abcdefg","1"))
			//replaceAll替换所有符合条件的目标
			// console.log(str.replaceAll("abcdefg","1"))
			//split用指定符号将字符串分割成数组
			console.log(str.split(" "))
			//slice提取字符串的某一部分
			console.log(str.slice(5,1))
			//substr从序号位置开始剪切几个字符
			console.log(str.substr(5,5))
			//大小写切换 tolowercase 将大写字符转为小写 toUpperCase将小写转为大写
			console.log(str.toUpperCase())
			
			
			console.log(Number.MIN_VALUE)
		</script>
	</body>
</html>

BOM编程

with关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="msg"></div>
		<script>
			let lyh = {
     
				name : "lyh",
				age : 18,
				tall : 183
			};
			//with关键子可以让开发者在使用对象属性的时候更方便快捷，window对象就出在类似的方法中。
			with(lyh){
     
				console.log(name)
				console.log(age)
				console.log(tall)
			}
		</script>
	</body>
</html>

history

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="./文字超连接2.html">跳到文字超链接2</a>
		<button onclick="nextPage()">下一页</button>
		<button onclick="lastPage()">上一页</button>
		<script>
			function nextPage(){
     
				//向前进一页
				history.forward()
			}
			function lastPage(){
     
				//向后退一页
				// history.back()
				//go表示跳转到那一页，整数想后跳，负数向前跳
				history.go(2)
			}
			
		</script>
	</body>
</html>

Screen

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="./文字超连接2.html">跳到文字超链接2</a>
		<button onclick="nextPage()">下一页</button>
		<button onclick="lastPage()">上一页</button>
		<script>
			//innerWidth、innerHeight页面的实际宽高
			// console.log(window.innerHeight)
			// console.log(window.innerWidth)
			//outerWidth、outerHeight整个浏览器窗口的宽高
			// console.log(window.outerWidth)
			// console.log(window.outerHeight)
			//availWidth、availHeight表示屏幕中可用的宽高
			console.log(screen.availWidth)
			console.log(screen.availHeight)
			//width、height表示屏幕的宽高
			console.log(screen.width)
			console.log(screen.height)
		</script>
	</body>
</html>

Location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="./文字超连接2.html">跳到文字超链接2</a>
		<button onclick="nextPage()">下一页</button>
		<button onclick="lastPage()">上一页</button>
		<script>
			//hostname:提供网页服务的设备ip
			console.log(location.hostname)
			//port:端口号
			console.log(location.port)
			//以上两者的结合
			console.log(location.host)
			//返回的是当前页面的通信协议一般俩只http\https
			console.log(location.protocol)
			// ?问号后面的值
			console.log(location.search)
			// # 号后面的值
			console.info(location.hash)
			//获取url
			console.log(location.href)
			// location.reload()
			// function myReload(){
     
			// 	location.reload()
			// }
			// setInterval(myReload(),10000)
		</script>
	</body>
</html>

Navigator

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

DOM编程

如何获取标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#first_div{
     
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="first_div" class="firs_div" name="div_first">11</div>
		<div class="firs_div">11</div>
		<div class="firs_div" name="div_first">11</div>
		<ul>
			<li>子项1</li>
			<li>子项2</li>
			<li>子项3</li>
			<li>子项4</li>
			<li>子项5</li>
			<li>子项6</li>
			<li>子项7</li>
			<li>子项8</li>
		</ul>
		<script>
			//dom编程简单来说就是浏览器页面中编程，浏览器页面中存在的内容无非是html和css
			//所以dom编程主要针对的就是html和css
			//dom编程第一步获取标签 七种方法
			//0.通过id来获取(不推荐使用)
			// console.log(first_div)
			//1.通过id来获取
			// let div = document.getElementById("first_div")
			//2.通过class来获取标签
			// div = document.getElementsByClassName("firs_div")
			// console.log(div[0])
			//3.通过name来获取标签
			// div = document.getElementsByName("div_first")
			// console.log(div[0])
			//4.通过标签名称来获取
			// div = document.getElementsByTagName("div")
			// console.log(div[0])
			//5.通过选择器来获取标签,返回符合条件的集合中的第一个
			// div = document.querySelector("#first_div")
			// console.log(div)
			//6.通过选择来获取标签，返回符合条件的集合。
			// div = document.querySelectorAll("#first_div")
			// console.log(div)
		</script>
	</body>
</html>

原文地址:https://blog.csdn.net/2301_76602495/article/details/135850579 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1750576779615145984.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部