(非妙味3)：浏览器window事件：及浏览各种尺寸介绍

(触发)window.onload; window.onscroll; window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部 alert(window.navigator.userAgent); //检测浏览器版本 window.location='http://www.miaov.com/'; //读写地址栏浏览器窗口事件: window.onload＝f…

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程写JS的步骤先实现布局想出实现原理了解JS语法希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素利用margin值 …… 获取元…

跨浏览器的事件对象-------EventUtil 中的方法及用法

什么是EventUti----封装好的事件对象在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序习惯上,这个方法属于一个名为EventUtil的对象编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element…

[妙味 DOM] 第二课：DOM、BOM相关方法及属性

知识点总结获取样式.增加样式.删除样式函数的封装表格 tHead tBodies tFoot rows 行 cells 列表单表单可以通过name来获取元素:表单.name值 onchange 当值发生改变时触发 text: 当光标移开时触发 radio/checkbox: 标准下点击改变就触发,非标准下改变并光标离开时才触发(推荐使用onclick),判断是否选中checked select: 值发生改变时触发 onsubmit 事件当提交表单时触发 submit() 方法,比如:页…

EventUtil——跨浏览器的事件对象

. 首页博客园联系我前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. target对象与getTarget方法. preventDefault方法. stopPropagation方法. “相关元素”与getRelatedTarget方法. getButton方法. getWheelDelta方法. getCharCode方法. 留言评论返回顶部前言:什么是EventU…

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl…

js实现一些跨浏览器的事件方法

用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent…

妙味课堂——HTML+CSS(第四课)(二)

单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; }…

妙味课堂——HTML+CSS(第一课)

一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HTML的知识,也并未多讲,倒是CSS中的内容讲的比较多.记录如下: HTML(Hypertext Markup Language)——超文本标记语言(结构) css(Cascading Style Sheets)——层叠样式表(样式) js(javascript)―― 行为为了更快地初步了解这三种语…

js捕捉浏览器关闭事件-兼容几乎所有浏览器

很多时候我们都在困扰,如何捕获浏览器关闭事件,网上虽然有很多方法,但都不理想,后来终于找到了一个很好地实现方法,大家可以试试哦,支持几乎所有的浏览器 <script type="text/javascript"> var READYTOPROCESS = false; window.onbeforeunload = function closeWindow(e) { if (!READYTOPROCESS) { //message to be returned to the…

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

事件对象在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event…

理解阻止浏览器默认事件和事件冒泡cancelBubble

一.阻止浏览器默认事件 1.先举个例子说什么是浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先天,默认好的了. 2.看个demo,阻止浏览器默认的右键弹出菜单,而且弹出自己自定义的菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type=&…

js浏览器键盘事件控制(转自新浪微博)

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层…

js关闭浏览器窗口事件

js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.open('','_self',''); window.close(); } </script> <a onclick=&quo…

js 监控浏览器关闭事件

代码如下: <!DOCTYPE html> <html> <head> <title>监控浏览器关闭事件</title> </head> <style type="text/css"> </style> <body> <div id="create_order"> </div> </body> </html> &…

妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> var str = '妙味课堂'; // alert( str.length ); //字符串…

微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片

以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM 密码:5yyf 1.移动端微信浏览器返回刷新事件,在返回后的页面上加上以下代码: <script type="text/javascript"> $(function () { var isPageHide = false; window.addEventListener('p…

Javascript跨浏览器的事件对象

一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); }…

兼容firefox，ie，谷歌，阻止浏览器冒泡事件，Firefox不支持event解决方法

兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEv…

JS+Zero Clipboard swf复制到剪贴板兼容浏览器(bind事件绑定函数)

转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var ZeroClipboard = { //这里是属性和方法..... }; ZeroClipboard.Client.prototype = { //扩展方法 }; 2.创建对象,如: var clip = new ZeroClipboard.Client(); //调用扩展方法点击这里下载文件,查看gi…

js关闭浏览器窗口及检查浏览器关闭事件

js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下 js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.…

监听微信端，手机端，ios端的浏览器返回事件，pc端关闭事件

直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实现自己操作 window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); 虽然我们监听到了后退事件,但是页面还是会返回上一个…

妙味css3课程---1-1、css中自定义属性可以用属性选择器么

妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=text]{background-image:url(img/text.gif);}…

window事件

window事件是较为重要的事件,接下来就讲解一下. 1.获取页面滚动栏的距离什么是滚动栏,就是网页内容过多时,通过滚轮控制上下显示或者左右显示: 为窗口添加滚动条事件: window.onscroll=function(){}; 注意在获取滚动条距离的时候谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop…

jQuery 滚动条和浏览器窗口事件

滚动条事件 // 实时监听元素的滚动事件 $(window).scroll(function(){ ... }); $(window).scrollLefft(); // 获取滚动条位置 $(window).scrollTop(); $(window).scrollTop(200); // 设置滚动条的位置浏览器窗口事件 // 实时监听浏览器窗口变化事件 $(window).resize(function(){ ... }); $(window).height(); //浏览器当下窗口可视区域…

jQ获取浏览器window的高宽

Window 对象Window 对象表示浏览器中打开的窗口.JavaScript 层级中的顶层对象,表示浏览器窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象.注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. 使用jQuery可以这样获取window的宽高:宽度: $(window).width() 高度: $(window).height() 实际效果…