js操作BOM

四种打开窗口方式

        //window.open(url, target);
		//window.close();

		//在当前窗口打开,可后退
		//原理:自动使用当前窗口的name
		HTML:<a href="url" target="_self"></a>
		js:open(url, '_self');

		//在当前窗口打开,禁止后退
		//原理:用新url替换当前history中的url
		js:location.replace(新url);

		//在新窗口打开,可打开多个
		//原理:不指定窗口名,每打开一个窗口,浏览器会自动随机生成内部窗口名
		HTML:<a href="url" target="_blank"></a>
		js:open(url, '_blank');

		//在新窗口打开,只能打开一个
		//原理:自定义窗口名,这个名字在内存中只能出现一次,一个名字对应一个窗口,后来打开的会覆盖先打开的窗口
		HTML:<a href="url" target="自定义窗口名"></a>
		js:open(url, '自定义窗口名');

history三种操作:前进、后退、刷新

		//前进:history.go(1);
		//后退:history.go(-1);history.go(-2);
		//刷新:history.go(0);

location

		//location属性
		//.href:获取或设置完整的url地址
		//.protocol:协议
		//.host:主机名+端口号
		//.hostname:主机名
		//.port:端口号
		//.pathname:相对路径
		//.search:查询字符串参数
		//.hash:锚点地址

		//location方法
		//在当前窗口打开,可后退
			//location = url;
		//在当前窗口打开,禁止后退
			//location.replace(新url);
		//刷新
			//优先从缓存中获取资源,若缓存中没有或过期,才从服务器获取资源
			//F5
			//history.go(0);
			//location.reload();

			//无论缓存中有没有资源,都强制从服务器获取资源
			//location.reload(true);

定时器

			//周期性定时器
				//1.定义任务函数:变化一次的函数
				//function task(){...}
				//2.将任务函数放入定时器中反复执行
				//等待相应的ms数后,开始调用task,依次循环执行
				//let timer = setInterval(task, ms);
				//timer为当前定时器唯一的序号,专门用于停止定时器
				//3.停止定时器
				//clearInterval(timer);timer = null;
					//3.1定时器自动停止
					//在task中设置临界值,达到临界值,停止定时器
					//3.1手动停止定时器
					//通过触发事件,停止定时器

			//一次性定时器
				//let timer = setTimeout(task, ms);
				//clearTimeout(timer);
				//在task执行前,停止等待,不再执行任务

            //1.判断是否启用cookie
				let bool = navigator.cookieEnabled;
				cookie是客户端持久存储用户私密信息的小文件
			//2.判断是否安装插件
				navigator.plugins['插件名'] !== undefined
			//3.判断当前浏览器名称和版本号
				navigator.userAgent

event

			概念:用户手动触发的、或浏览器自动触发的页面状态的改变

			绑定事件处理函数:
			1.在HTML中绑定事件处理函数(几乎废掉,不符合内容与行为分离的原则)
				<ANY ...on 事件名="js语句"...>
			2.在js中,用赋值方式绑定
				ANY.on 事件名=function(){
					this->ANY 当前触发事件的.前的元素
				}
				赋值是替换原函数,每个事件只能绑定一个处理函数
			3.在js中,为元素添加事件监听对象
				ANY.addEventListener('事件名', handler)
				一个事件,可同时添加多个处理函数,可随时添加和移除
				ANY.removeEventListener('事件名', 原handler)
				如果一个处理函数可能被移除,则绑定时,就必须用有名的函数,不能用匿名函数

		事件模型
			当事件发生时,浏览器触发事件的过程
			DOM标准认为,点在内层元素上,也等效于点在外层元素上了
			3个阶段:
				1.由外向内捕获各级父元素绑定的处理函数
					捕获阶段,只记录处理函数,不执行
				2.目标触发
					目标触发,最初实际触发事件的元素
					优先触发目标元素上的处理函数
				3.冒泡
					由内向外,按捕获阶段顺序的反向,依次触发父元素上的处理函数

		事件对象:e
			事件发生时,自动创建的记录事件信息的对象
				创建:自动创建
				获取:事件对象e总是作为处理函数的第一个参数,自动传入
			取消冒泡:
				e.stopPropagation()
            利用冒泡:
				只要多个平级子元素,要绑定相同事件时
				只要在父元素上绑定一次处理函数,所有子元素自动共用
				难点:
					1.获取目标元素
						错误:this->父元素
						正确:e.target->记录了最初触发事件的函数,且不随冒泡而改变
					2.鉴别e.target是否是想要的
			阻值默认事件行为:
				e.preventDefault()
				1.<a href="#xxx"
					默认:跳到锚点,在url结尾增加#xxx
				2.阻止表单自动提交
					自定义表单提交:
						1.<input type="button" js:form.submit()
						2.<input type="submit"
							=>form.onsubmit():e.preventDefault()
				3.HTML5中做拖拽效果时,必须阻止浏览器默认的拖拽行为
posted @ 2019-07-28 22:46  $debug  阅读(566)  评论(0编辑  收藏  举报