javaScript

最新推荐文章于 2024-10-01 20:12:28 发布

m0_70158561

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量110

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_70158561/article/details/124828686

版权

js的组成

ECMAScript语法 Bom浏览器与js交互 Dom html内容与js交互

1.Bom window对象

浏览器对象模型
Browser Object Model

document文档
screen 屏幕
location 地址
navigator 浏览器对象
history历史记录
本地存储相关

2.window常用的全局方法

   1. script 中 var 声明变量
没有用var 声明的变量都是window全局变量
   2. 有id命名的html节点也是全局对象
可以通过window.id名访问
   3. 常用全局方法，都是省略了window
alert警告，confirm 确认，prompt弹框
setInterval间隔调用 setTimeout延迟调用
isNaN是否为非数字，doument文档

3.screen屏幕

<script type="text/javascript">
			document.write("<br/>屏幕的宽"+screen.width);
			document.write("<br/>屏幕的高"+screen.height);
			// 移除状态的屏幕宽高
			document.write("<br/>屏幕的宽"+screen.availWidth);
			document.write("<br/>屏幕的高"+screen.availHeight);
			// 浏览器可视区域的宽高
			document.write("<br/>屏幕的高"+screen.innerHeight);
			document.write("<br/>屏幕的高"+screen.innerWidth);
			// document 文档；write写入； screen屏幕；width宽；hight高；
			// avail可用; inner内部;
		</script>

4.history历史记录

相当于浏览器的前进与后退按钮

<script type="text/javascript">
			function go Forward(){
				// history.go(1)
				history.forward();
				// 浏览器记录向前一步
			}
			<script type="text/javascript">
				function go Forward(){
					// history.back(1)
					history.go(-1);
					// 浏览器记录后退一步
				}
		</script>

5.location地址栏信息
reload() 刷新
reload(true)刷新并强制更新缓存
href 地址信息（全）http://127.0.01/javascript/index.html?name=mumu&age=18#good
protocol 协议 http:
hostname 域名 127.0.0.1
port 端口号 :8080
pathname 地址 /javascript/index.html
search 查询?name=mumu&age=18
hash 哈希值（锚点）（?后面的值）#good

<a href="http://www.baidu.com">111</a>
		<button type="button" onclick="reload()">123</button>
		<script type="text/javascript">
			document.write(screen.width)
			document.write("<br/>可用"+screen.height);
			function reload(){
				location.reload();
			}
			document.write("<br/>地址信息"+location.href);
			document.write("<br/>协议"+ location.protocol);
			document.write("<br/>域名"+ location.hostname);
			document.write("<br/>路径"+ location.pathname);
			document.write("<br/>端口号" +location.port);
			document.write("<br/>查询" +location.search);
			document.write("<br/>锚点" +location.hash);

6.navigator
ua = navigator.userAgent;
浏览器的头信息

判断浏览器
if(ua.includes("Mobile")){//手机浏览器}

<script type="text/javascript">
			var ua=navigator.userAgent;
			document.write("<br/>"+ua);
			if(ua.includes("Mobile")){
				document.write("<br/>手机浏览器")
				
			}else{
				document.write("<br/>pc浏览器")
			}
			
		</script>

7.open方法
   win = window.open(url,name,feature)
url 打开文件的地址 https://www.baidu.com
name 名称
feature 特性 “width=400,height=400,top=200,left=200”
   关闭打开的窗口
win.close()

<h1>open方法</h1>
		<button type="button" onclick="openwin()">打开窗口</button>
		<button type="button" onclick="closewin()" >关闭打开窗口</button>
		<script type="text/javascript">
			var win;
			function openwin() {
				// 打开窗口的宽
				// 打开窗口的高
				// 距离屏幕左上角的位置
				// 距离屏幕左上角的水平距离
				// window.open(url,name,feature)
				// url 打开的地址 name 命令(窗口通信与查找) feature 特性
				win=window.open("http://baidu.com", "mingcheng", "width=400,height=400,top=200,left=200")
			}
			function closewin(){
				win.close();
			}
		</script>

8.事件
   onload事件
窗口、图片加载完毕触发
   onscroll
滚动时候触发
滚动距离：document.documentElement.scrollTop
   resize当窗口发生大小变化

<body>
		
		<p>我是第1</p>
		<p>我是第2</p>
		<p>我是第3</p>
		<p>我是第4</p>
		<p>我是第5</p>
		<p>我是第6</p>
		<p>我是第7</p>
		<p>我是第8</p>
		<p>我是第9</p>
<p>我是第9</p>
<p>我是第9</p>
<p>我是第9</p>
<p>我是第9</p>
<p>我是第9</p>
<<p>我是第9</p>
<p>我是第9</p>
<p>我是第9</p>
		<p>我是第100</p>
		<!-- p*>100{我是第$} -->
		<script type="text/javascript">
			window.onscroll=function(){
				console.log("滚动");
				// 当滚动条滚动执行这个function
				// 页面滚动的距离
				var t=document.documentElement.scrollTop;
				// 页面垂直滚动的距离 document文档 documentElement根节点
				// scrollTop 垂直滚动距离 scrollLeft 水平滚动距离
				console.log(t);
			}
		</script>

<script type="text/javascript">
			// 在上面的时候,页面还没有加载完毕,访问不到myh,也访问不到myh.innerText
			// alert(window.myh.innerText);
			// 等待页面加载完毕后再执行,访问节点的操作
			window.onload=function(){
				// 窗口加载完毕,可以访问节点
				alert(window.myh.innerText);
				
			}
		</script>
	</head>
	<body>
		<h1 id="myh">windows 常用事件</h1>
		<p>onload,onscroll,onresize</p>
	</body>

9.编码
常见编码 utf-8 万国码,gb2312 国标,gbk 中文包含繁体字
编译为URL
decode
encode
decodeURI
encodeURI
转/解url编码

decodeURIComponent encodeURIComponent
转/解URI编码（包含标点符号）
预览图片
img.src = window.URL.createObjectURL(myf.files[0])

<h1>字符串编码</h1>
	<p>utf-8,gb2112,</p>
<script type="text/javascript">
	// var str=`中国`;
	// console.log(encodeURI(str))
	// var str=`%E4%B8%AD%E5%9B%BD`;
	// console.log(decodeURI(str))
	var str=`?!`;	
	console.log(encodeURIComponent(str))
</script>

10.图片预览

<h1>图片预览</h1>
		<input type="file" name="" id="myf" onchange="preImg()" value="" />
		<img src=""width="50%" id="mypic" />
		<script type="text/javascript">
			// 用户选择图片时可以预览图片
			function preImg(){
				// 拿到图片文件
				var file=myf.files[0];
				// 把图片文件转换为base64字符串
				// create创建Object对象URL字符串编码
				var src=window.URL.createObjectURL(file)
				// 定义图片的src
				mypic.src=src;
			}