🌓

解决div层被flash遮盖的问题

2015-08-04

页面构建中的Flash层会遮挡Div的问题，一般通过设置wmode=”transparent” 或wmode=”window”就可以解决。不过对于Flash视频这个貌似不太凑效。

对于Flash遮挡的问题，首先来了解一些wmode的一些属性值。

wmode的5种取值

Window模式

默认情况下的显示模式，在这种模式下 flash player 有自己的窗口句柄，这就意味着 flash 影片是存在于 Windows 中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以 flash 只是貌似显示在浏览器中，但这也是 flash 最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有 HTML 层。

阅读全文

如何提高jQuery的使用性能之Jq性能优化

2015-08-03

1、缓存变量

DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

1
2
3
4
5
6
7
// 糟糕
h = $('#element').height();
$('#element').css('height',h-20);
// 建议
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

阅读全文

数组去重方法小结

2015-08-03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Array.prototype.unique1 = function() {
        var arr = [];
        for(var i=0;i<this.length;i++) {
                //判断有没有数组在里面，没有就放进去
                if(arr.indexOf(this[i]) == -1 ){
                        arr.push(this[i])
                }
        }
        return arr;
}

Array.prototype.unique2 = function() {
        var arr = [],
                json = {};

        for(var i = 0;i<this.length;i++) {
                //使用哈希表，利用关键字的判断去重
                //如果哈希表中没有当前项
                if(!json[this[i]]) {
                        json[this[i]] = true;
                        arr.push(this[i]);
                }
        }
        return arr;
}

Array.prototype.unique3 = function() {
        this.sort(req); //先进行数组的排序
        var arr = [];
        for(var i=0;i<this.length;i++) {
                //如果当前项与上一项不相同时，则存入结果数组
                if(this[i] != this[i-1]) {
                        arr.push(this[i]);
                }
        }
        return arr;
}

阅读全文

对移动前端开发的知识总结

2015-08-03

meta基础知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

阅读全文

Javascript高级程序设计（创建对象）

2015-08-03

一：工厂模式

1
2
3
4
5
6
7
8
9
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function(){
console.log(this.name);
}
return o;
}

阅读全文

Js中的this的用法详解

2015-08-03

由于其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。下面我们将按照调用方式的不同，分别讨论 this 的含义。

阅读全文

控制锚点定位方法总结

2015-08-02

一、HTML方法

1、最好是name和id都是st。避免有些特殊情况

1
2
<a href="#firstAnchor" target="_blank">跳转到st</a>
<a name="firstAnchor"></a>

阅读全文

js实现继承方式的总结详解

2015-08-01

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式

1、使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

阅读全文

移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

2015-07-31

pc端让一个弹窗水平和垂直方向居中，在知道弹窗宽高的情况下很好计算，只需要用如下css即可：

1
2
3
4
5
6
7
8
9
#date{   
    width: 300px;  
    height: 300px;
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -150px;   
    margin-top: -150px;
}

阅读全文

Javascript日期格式化

2015-07-31

为Javascript的Date类型增加原型方法，以便日期格式化；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}

阅读全文

为什么遍历数组元素最好使用for而不是for in

2015-07-31

在JavaScript中，严格来说所有的数据类型鼻祖都是Object，所以我们来看看以下这个例子：

1
2
3
4
5
6
7
8
9
10
var arr = ["a", "b", "c"];
undefined
>>> for(var i=0; i<arr.length; i++){ console.log(i); } 
0
1
2 
>>> for(var i in arr){ console.log(i); }
0
1
2

阅读全文

jQuery对象与（js）dom对象相互转换

2015-07-31

核心提示：jquery选择器得到的jquery对象和标准的

javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，一般情况下，如S(’#id’)得到的是jquery对象，它不能使用js中的dom方法。所以，如果jquery对象要使用标准的dom方法，就需要进行对象转换。

阅读全文

JS快速获取图片宽高的方法

2015-07-31

快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onload方法要节省很多时间，甚至一分钟以上都有可能，并且这种方法适用主流浏览器包括IE低版本浏览器。

一、简陋的获取图片方式

1
2
3
4
5
6
7
8
// 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘http://www.qttc.net/static/upload/2013/13643608813441.jpg?’+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 打印
alert(‘width:’+img.width+‘,height:’+img.height);

阅读全文

js异步加载技术 JavaScript技术提高

2015-07-31

默认情况下，js是默认同步加载的也就是是JS的加载时是阻塞的，后面的元素要等待js加载完成之后加载，那么对于一些无意义的javascript，如果放在头部会导致加载速度很慢，那么会影响用户体验，那么如何解决这种情况呢？

（1）defer,但只支持IE，代码如下：

1
2
3
<script type=”text/javascript” defer=”defer”>
alert(document.getElementById(“p1″).children[0]);
</script>

阅读全文

IE6常见bug

2015-07-31

1、IE6怪异解析之padding与border算入宽高

原因：未加文档声明造成非盒模型解析

解决方法：加入文档声明<!doctype html>

2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）

阅读全文

JS判断鼠标从什么方向进入一个容器

2015-07-31

基于jquery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>判断鼠标进入方向</title>
</head>
<body>
<style>
html,body{margin:0;padding:0;}
#wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}
</style>
<div id=”wrap”>
方向反馈
</div>
<script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js”></script>
<script>
$(“# wrap”).bind(“mouseenter mouseleave”,
	function(e) {
		var w = $(this).width();
		var h = $(this).height();
		var x = (e.pageX– this.offsetLeft–(w / 2)) * (w > h ? (h / w) : 1);
		var y = (e.pageY– this.offsetTop–(h / 2)) * (h > w ? (w / h) : 1);
		var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
		var eventType = e.type;
		var dirName = new Array(‘上方’, ’右侧’, ’下方’, ’左侧’);
		if (e.type == ‘mouseenter’) {
			$(this).html(dirName[direction] + ’进入’);
		} else {
			$(this).html(dirName[direction] + ’离开’);
		}
	});
</script>
</body>
</html>

阅读全文

为网站提速 探秘HTML 5链接预取功能

2015-07-31

HTML 5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容(不需要任何AJAX代码)。

它是这样工作的，在页面上添加一个像这样的链接：
<link rel="next" href="page2.html">
这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了page2.html的链接时，浏览器会从缓存里把这个页面取出来，所以这个页面的加载速度会出乎意料的快。

阅读全文

详解console的高级应用

2015-07-29

对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。

然而对于作为一个全局对象的console对象来说，大多数人了解得还并不全面，当然我也是，经过我的一番学习，现在对于这个能玩转控制台的 JS 对象有了一定的认识，想与大家分享一下。

阅读全文

语义化你的JavaScript代码

2015-07-28

语义化这个词在 HTML中用的比较多，即根据内容的结构化选择合适的标签。其作用不容小觑：

  • 赋予标签含义，让代码结构更加清晰，虽然我们可以在标签上添加 class 来标识，但这种通过属性来表示本体的形式会显得不够直接，而且在一定程度上也有冗余。
  • 优化搜索引擎（SEO），结构良好的网页对搜索引擎的亲和力是很高的，百度和 google 也给出了很多网页结构化的建议（规范），方便他们抓取网页。

阅读全文

jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

2015-07-27

在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值，可是我们发现程序执行完后并没有获取到我们想要的值，这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如：

1
2
3
4
5
6
7
8
9
10
11
12
13
function ManageCommentText(text) {
var result = text;
$.ajax({
data: "get",
url: "GetComments.aspx",
data: "type=getText&amp;commentText=" + text,
cache: false,
async: false,
success: function (data) {
result = data;
}
})
return result;

阅读全文