[妙味DOM]第五课:事件深入应用】的更多相关文章

知识点总结 鼠标拖拽原理: 1.鼠标按下后开始移动,鼠标抬起停止移动,即onmousedown中要包括onmousemove和onmouseup 2.获取位置的计算:获取鼠标的当前位置-鼠标在物体中的位置(当值不变),可通过ev.clientX(鼠标到可视区) - obj.offsetLeft(物体到可视区)来计算 注意事项: 1.为了防止鼠标移动的过快,需要onmousemove和onmouseup前面使用document 2.因为浏览器自带有对文字移动,对你的移动产生的冲突,因此: 在标准浏…
知识点总结: 鼠标滚轮事件 存在兼容性问题: IE/chorme : onmousewheel FF : DOMMouseScroll,必需用在addEventListener下,例如: if (obj.addEventListener) { obj.addEventListener('DOMMouseScroll',fn,false); } 注:addEventListener也需要做兼容,该方法在FF和chorme有效,在IE中是attachEvent 滚轮属性: IE/chorme: ev…
知识点总结 事件捕获 obj.addEventListener('click',fn,true) 从外往里 obj.addEventListener('click',fn,false) 从里往外(冒泡) 事件取消 1. obj.onclick = fn; obj.onclick = null; 赋'null'值即可 2. IE: obj.attachEvent('onclick',fn); obj.detachEvent('onclick',fn); //取消 标准: obj.addEventL…
知识点总结 焦点事件 onfocus 获取焦点 onblur 失点焦点 obj.focus() 给指定元素设置焦点 obj.blur() 取消指定元素的焦点 obj.select() 选择指定元素里的文本内容,只能选择用户输入的内容,例如:全选后就可以复制,input textarea event对象 var ev = ev(标准下)||event(非标准下,即IE) clientX,clientY 鼠标到可视区的距离 ev.clientX/clientY 例子:方块跟随鼠标移动,注意clien…
(触发)window.onload;  window.onscroll;   window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部       alert(window.navigator.userAgent);                //检测浏览器版本 window.location='http://www.miaov.com/';     //读写地址栏       浏览器窗口事件:   window.onload=f…
知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange 当值发生改变时触发 text: 当光标移开时触发 radio/checkbox: 标准下点击改变就触发,非标准下改变并光标离开时才触发(推荐使用onclick),判断是否选中checked select: 值发生改变时触发 onsubmit 事件 当提交表单时触发 submit() 方法,比如:页…
知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和children都只包含子节点,不包含孙节点. 区别: childNodes-- 标准下:包含元素和文本节点,也会包含非法嵌套的子节点 非标准下:只包含元素节点,IE7以下不会包含非法嵌套的子节点(IE6) children-- 标准模式下和非标准模式下:只包含元素节点(推荐使用此方法) nodeType 为节点…
浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.onclick = function(){ var oEvent = window.event; } 尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了. 而标准的dom规定event对象必须作为唯一的参数传给事件处理函数.一次在类似…
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情 然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去…
知识点总结 函数封装 回调函数 实例:抖动函数 获取当前的位置 通过数组来实现,一正一负,直到恢复成0为止. 当前位置与数组中各值相加…
知识点总结 getElementsByTagName(动态方法) 与 getElementById(静态方法) 的区别 1.ID前面只能跟document,不能跟其他元素,比如:document.getElementById('list') TagName前面可以跟其他元素也可以跟document,比如:oUl.getElementsByTagName('li') 2.ID只能找到一个元素 TagName找到一堆元素的集合,因此在用的时候必须要加上:[] 3.ID如果不存在,用getElemen…
知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名=新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' => “写” 注意事项: 1.表单元素的类型不要乱改,即oInput.type='checkbox',因为IE6.IE7.IE8不支持 如果还要实现这种效果, 比如:点击后,由button变成checkbox 实现方法:将button隐藏起来,checkbox显示来实现 2.float IE(styleF…
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HTML的知识,也并未多讲,倒是CSS中的内容讲的比较多.记录如下: HTML(Hypertext Markup Language)——超文本标记语言(结构) css(Cascading Style Sheets)——层叠样式表(样式) js(javascript)―― 行为 为了更快地初步了解这三种语…
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 ); //字符串…
单开一篇来讲一个大点的话题——清浮动    来看下例: <!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; }…
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元…
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl…
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数.  我们又把事件处理程序称为事件侦听器.  事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在Ja…
内容简介 1.第一部分第五课:Unity桌面,人生若只如初见 2.第一部分第六课预告:Linux如何安装在虚拟机中 Unity桌面,人生若只如初见 不容易啊,经过了前几课的学习,我们认识了Linux是什么,以及如何安装Linux系统(我们以Ubuntu这个Linux发行版为以后的演示系统),我们也在上一课终于把Ubuntu安装好了. “很不错,掌声给自己”. 安装Ubuntu遇到什么问题,可以在我们的QQ群和微信群提问,也可以私信小编,QQ.微信.邮件都行.联系方式在下面. Linux系统确实对…
Linux云自动化运维第五课 一.进程定义 进程就是cpu未完成的工作 二.ps命令 ps a ###关于当前环境的所有进程 x ###与当前环境无关的所有进程 f ###显示进程从属关系 e ###显示进程调用环境工具的详细信息 l ###长列表显示进程的详细信息 u ###显示进程的用户信息 ps ax -o %cpu,%mem,user,group,comm,nice,pid ###指定显示进程的某些信息 %cpu ###显示进程cpu负载 %mem ###显示进程内存负载 user ##…
我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系统 嵌入式框架Zorb Framework搭建二:环形缓冲区的实现 嵌入式框架Zorb Framework搭建三:列表的实现 嵌入式框架Zorb Framework搭建四:状态机的实现 嵌入式框架Zorb Framework搭建五:事件的实现 嵌入式框架Zorb Framework搭建六:定时器的实…
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分        妙味js视教第二部分    妙味js视教第三部分    妙味js视教第四部分    妙味js视教第五部分    下载地址: 妙味js视教第一部分 :链接: http://pan.baidu.com/s/1kThCZfL 密码: atvd 妙味js视教第二部分 :链接: http://pa…
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 以上内容见javaScript事件(四)event的公共成员(属性和方法) 七.鼠标事件 DOM3级事件中定义了9个鼠标事件. mousedown:鼠标按钮被按下(左键或者右键)时触发.不能通过键盘触发. mouseup:鼠标按钮被释放弹起时触发…
css3 属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css3属性</title> </head> <body> <h1>自定义属性p[kang]</h1> <!--<style> p[kang]{color:red;} /*属性…
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第四十五课:顶点缓存 顶点缓存 你想更快地绘制么?直接操作显卡吧,这可是当前的图形技术,不要犹豫,我带你入门.接下来,你自己向前走吧.   速度是3D程序中最重要的指标,你必须限制绘制的多边形的个数,或者提高显卡绘制多边形的效率.显…
第五课 社会工程学工具集 文/玄魂 教程地址:http://edu.51cto.com/course/course_id-1887.html   目录 第五课社会工程学工具集 SET SET的社会工程学攻击方法 鱼叉式钓鱼攻击(Spear-Phishing Attack ) 网站攻击(Website Attack) Java Applet Attack Method演示 Credential Harvester Attack Method演示 Multi-Attack Web Method 无线…
Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiMacOSLinux 本文由极客范-Boyd Wang翻译自 Adafruit.com .欢迎加入 极客翻译小组 ,同我们一道翻译与分享.转载请参见文章末尾处的要求. 概览 这节课你将学习到如何使用控制电缆控制你的树莓派. 用这种方式连接的一大好处是它可以直接为小派供电并且你也不需要连接键盘鼠标或显示…
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第三十五课:播放AVI 在OpenGL中播放AVI: 在OpenGL中如何播放AVI呢?利用Windows的API把每一帧作为纹理绑定到OpenGL中,虽然很慢,但它的效果不错.你可以试试.   首先我得说我非常喜欢这一章节.Jon…
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第二十五课:变形 变形和从文件中加载3D物体: 在这一课中,你将学会如何从文件加载3D模型,并且平滑的从一个模型变换为另一个模型.   欢迎来到这激动人心的一课,在这一课里,我们将介绍模型的变形.需要注意的是各个模型必须要有相同的顶…
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第十五课:纹理图形字 图形字体的纹理映射: 这一课,我们将在上一课的基础上创建带有纹理的字体,它真的很简单. 在发布了前两篇关于位图字体和轮廓字体的教程以后,我收到很多邮件,很多读者都想知道如何才能给字体赋予纹理贴图.你可以使用自动…