代码改变世界

随笔档案-2012年07月

自定义css reset

2012-07-25 11:05 by 江苏黑马, 1464 阅读, 收藏,
摘要: 不要盲目相信主流说法,*{margin:0;padding:0}或reset.css使用的margin和padding重置方法。大多数reset.css中的代码都是不需要的,让我们来试验下。body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}body) ff:ie:gg: 可见body的margin:0;是需要的,而padding:0;是不需要的。div) ff:ie:gg: 可见di... 阅读全文

Border-color使用

2012-07-23 14:26 by 江苏黑马, 311 阅读, 收藏,
摘要: 相关属性:border-top-color, border-right-color, border-bottom-color , border-left-color。目前 border-color属性支持的浏览器很少,仅有Firefox支持,所以想实现多边框的效果我们只需使用-moz前缀就可以了。如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。效果图:代码: 1 <!DOCTYPE HTML> 2 <htm 阅读全文

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

2012-07-17 19:06 by 江苏黑马, 3042 阅读, 收藏,
摘要: 侧边栏:图解:原理:当视窗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-17 09:58 by 江苏黑马, 179 阅读, 收藏,
摘要: 例子:cd /home/Projects/dyndns/src/main/python/python manage.py runserver 0.0.0.0:8000 阅读全文

容器的垂直居中

2012-07-16 09:29 by 江苏黑马, 210 阅读, 收藏,
摘要: 效果:原理:利用“绝对定位50%”和“负边距”代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 6 <title>index</title> 7 <style> 8 div#big { 9 position: relative;10 height: 300px;11 width: 300px;12 background-color: #ccc13 }14 div#small {1... 阅读全文

图片幻灯展示源码

2012-07-13 09:14 by 江苏黑马, 507 阅读, 收藏,
摘要: 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 江苏黑马, 472 阅读, 收藏,
摘要: 什么是闭包?现在有三个函数。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 江苏黑马, 1232 阅读, 收藏,
摘要: 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 江苏黑马, 9007 阅读, 收藏,
摘要: 很少用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 江苏黑马, 384 阅读, 收藏,
摘要: 一般常用方法是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 江苏黑马, 1491 阅读, 收藏,
摘要: 看到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 江苏黑马, 589 阅读, 收藏,
摘要: 按HTML文档流顺序执行JavaScript代码。HTML文档在浏览器中的解析过程是这样的:浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做 HTML文档的组成部分,所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。如果通过脚本标签<script>的src属性导入外部JavaScript文件脚本,那么它也将按照其语句出现的顺序来执行,而且执行过程是文档装载的一部分。不会因为是外部JavaScript文件而延期执行。预编译与执行顺序的关系。当JavaScript引擎解析脚本 阅读全文

location对象对url的操作

2012-07-05 14:18 by 江苏黑马, 321 阅读, 收藏,
摘要: 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 江苏黑马, 538 阅读, 收藏,
摘要: 这是一个读写属性。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 江苏黑马, 907 阅读, 收藏,
摘要: 这是一个只读属性。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。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 江苏黑马, 180 阅读, 收藏,
摘要: 面向过程和面向对象实例。面向过程://定义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... 阅读全文

querySelector()、 querySelectorAll()详解

2012-07-04 15:08 by 江苏黑马, 750 阅读, 收藏,
摘要: 在 传统的JavaScript开发中,查找DOM往往是开发人员遇到的第一个头疼的问题,原生的JavaScript所提供的DOM选择方 法并不多,仅仅局限于通过tag,name,id等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。你可能会说为什么不适用库,那是很方便的,我的回答是,很多情况下,我们只需要使用一个简单的选择功能,完全没有必要引用整个库,那无非延长了页面加载时间。当前除了IE6和IE7,几乎所有主流浏览器都支持querySelector和querySelectorAll方法。使用它们,你可以像使用CSS选择器一样快速地 阅读全文