代码改变世界

随笔分类 -  JavaScript

通过navigator.userAgent判断浏览器类型

2012-11-02 10:18 by 江苏黑马, 2783 阅读, 收藏,
摘要: 1、navigator.userAgent返回一个浏览器信息字符串。2、用到indexOf()方法,查找字符串中是否有指定的浏览器类型。3、if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("S 阅读全文

属性扩展

2012-09-19 10:35 by 江苏黑马, 228 阅读, 收藏,
摘要: // 属性扩展 // @param isCover 是否覆盖已有属性 默认true this.extend = function(destination, source, isCover) { var isUndefined = this.isUndefined; (isUndefined(isCover)) && ( isCover = true); for (var name in source) { if (isCover || isUndefined(desti... 阅读全文

获取对象样式

2012-09-19 10:07 by 江苏黑马, 277 阅读, 收藏,
摘要: // 获取对象计算的样式 this.getComputerStyle = (function() { var body = document.body; if (body.currentStyle) {// IE浏览器 return function(elem) { return elem.currentStyle; } } else if (document.defaultView.getComputedStyle)... 阅读全文

原生js绑定和解除事件

2012-09-19 09:45 by 江苏黑马, 25425 阅读, 收藏,
摘要: // 事件绑定 this.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) {// elem:节点 type:事件类型 handler:事件处理程序 // 最后一个参数为true:在捕获阶段调用事件处理程序 为false:在冒泡阶段调用事件处理程序 elem.addEventList... 阅读全文

原生js获取id,tagName,class

2012-09-19 09:43 by 江苏黑马, 6712 阅读, 收藏,
摘要: // 通过id获取元素 this.$ = function(id) { return document.getElementById(id); }; // 通过标签名获取元素 this.$$ = function(tagName, parent) { parent = parent || document; return parent.getElementsByTagName(tagName); }; // 通过类名获取元素 thi... 阅读全文

注册命名空间

2012-09-19 09:26 by 江苏黑马, 215 阅读, 收藏,
摘要: // 命名空间 register : function(nameSpace, func) { var nsArr = nameSpace.split("."); // win为window var parent = win; // 对象检测 for (var i = 0, len = nsArr.length; i < len; i++) { // 未定义的 对象赋空 ( typeof parent[ns... 阅读全文

元素页面位置[left,top]获取

2012-09-19 09:23 by 江苏黑马, 244 阅读, 收藏,
摘要: var getCanvasPos = function(canvas) { var left = 0; var top = 0; // 元素在页面的位置left和top while (canvas.offsetParent) { left += canvas.offsetLeft; top += canvas.offsetTop; canvas = canvas.offsetParent; } return [left, top]... 阅读全文

尺寸获取大全

2012-08-01 17:27 by 江苏黑马, 742 阅读, 收藏,
摘要: event(ie:window.event;ff:function(e){};兼容方法:function(e){e=e?e:window.event;})(1)当事件被触发时,鼠标指针相对于窗口文档显示区坐标 event.clientX、event.clientY (2)当事件被触发时,鼠标指针相对于屏幕坐标 event.screenX、event.screenY window(1)窗口文档显示区宽高(包括滚动条) window.innerWidth、window.innerHeight document.documentElement.clientWidth、document.d... 阅读全文

侧边栏和顶部滚动位置固定

2012-07-17 19:06 by 江苏黑马, 3051 阅读, 收藏,
摘要: 侧边栏:图解:原理:当视窗Y滚动值大于侧边栏视窗Y偏移值时,设置侧边栏上偏移为前者与后者的差值。反之,设置侧边栏上偏移为初始值,此处为0。代码:var $sideBar = $("#sideBar"), $window = $(window), oTop = $sideBar.offset().top, barStyle = $sideBar[0].style, sTop; $window.scroll(function() { sTop = $window.scrollTop(); sT... 阅读全文

图片幻灯展示源码

2012-07-13 09:14 by 江苏黑马, 512 阅读, 收藏,
摘要: 1 //图片幻灯展示 2 $(function() { 3 var imgPro = { 4 imgWidth : 626, //图片宽度 5 imgConLength : 0, //图片总长度 6 index : 0, //导航锁定索引 7 count : 0, //图片数量 8 left : 0, //绝对定位left ... 阅读全文

深入闭包

2012-07-09 13:48 by 江苏黑马, 477 阅读, 收藏,
摘要: 什么是闭包?现在有三个函数。a()、b()和c()。如果满足一下条件则构成闭包。(1)函数b嵌套在函数a内部;(2)函数a返回函数b。当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。闭包的作用?闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源。在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。示例代码:<!doctype html><html> 阅读全文

call方法、apply方法、caller属性和callee属性

2012-07-09 09:51 by 江苏黑马, 1240 阅读, 收藏,
摘要: call方法。call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。 说明 call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。举一个具体的例子:function add(a,b){ alert(a+b);}function sub(a,b){... 阅读全文

我对onselect和onchange事件的误解

2012-07-06 14:52 by 江苏黑马, 9019 阅读, 收藏,
摘要: 很少用onselect事件,今天我才发现onselect事件:当选择一段文字的时候触发。以前我一直以为onselect和onchange都是是<select><option></option></select>内option元素切换的时候触发。是我误解了onselect事件。 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>exercise</title> 6 &l 阅读全文

判断浏览器是否是IE

2012-07-06 10:47 by 江苏黑马, 390 阅读, 收藏,
摘要: 一般常用方法是document.allif(document.all){ //IE代码}else{ //其他}其实这么做不够,document.all能区分出FireFox,却无法区分Opera,因为Opera支持document.all。if(document.all && window.external){ //IE代码}else{ //其他}Opera不支持window.external。window.external的作用是用来调用浏览器提供的外部方法,大家有兴趣可以去查阅下。 阅读全文

W3school教程的准确性真的像大家想象的那样吗

2012-07-06 10:12 by 江苏黑马, 1504 阅读, 收藏,
摘要: 看到W3C教程知道IE和FF不支持NamedNodeMap.setNamedItem(),不信,做了实验:代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>DOM节点操作总结</title> 6 <script> 7 window.onload=function(){ 8 var $=function(id){ 9 return document.getElementById(id);10 阅读全文

代码执行顺序

2012-07-05 17:12 by 江苏黑马, 599 阅读, 收藏,
摘要: 按HTML文档流顺序执行JavaScript代码。HTML文档在浏览器中的解析过程是这样的:浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做 HTML文档的组成部分,所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。如果通过脚本标签<script>的src属性导入外部JavaScript文件脚本,那么它也将按照其语句出现的顺序来执行,而且执行过程是文档装载的一部分。不会因为是外部JavaScript文件而延期执行。预编译与执行顺序的关系。当JavaScript引擎解析脚本 阅读全文

location对象对url的操作

2012-07-05 14:18 by 江苏黑马, 332 阅读, 收藏,
摘要: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js的location对象对url的操作</title> 6 <script> 7 8 //url处理 9 var urlHandle=[10 {11 name:"location.href(设置或返回完整的 URL):",12 value:location.href13 },{14 name:"location.hostn 阅读全文

设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置

2012-07-05 11:05 by 江苏黑马, 545 阅读, 收藏,
摘要: 这是一个读写属性。DOM中使用window.pageXOffset和window.pageYOffset来设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置。 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 010 }11 div {12 width: 100px;13 height: 1 阅读全文

窗口文档显示区的高度和宽度的获取

2012-07-05 10:36 by 江苏黑马, 914 阅读, 收藏,
摘要: 这是一个只读属性。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。DOM中使用window.innerheight和window.innerwidth来获取文档显示区的高度和宽度。IE不支持这些属性。它用 document.documentElement 的 clientWidth 和 clientHeight 属性作为替代。针对浏览器兼容,我们可以写出这样的兼容代码:1 window.innerHeight ? window.innerHeight : document.documentElement.clientHeight 2 window.innerWidth ? window 阅读全文

富有表现力的JavaScript

2012-07-04 17:19 by 江苏黑马, 189 阅读, 收藏,
摘要: 面向过程和面向对象实例。面向过程://定义startAction方法var startAction=function(){ }//定义stopAction方法var stopAction=function(){ }面向对象: 1 //定义一个类 2 var action=function(){ 3 4 } 5 //向该类中添加一个startAction方法和一个stopAction方法 6 action.prototype={ 7 startAction:function(){ 8 9 },10 stopAction:fu... 阅读全文