王新阳

Array 对象属性

属性	描述
constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组中元素的数目。
prototype	使您有能力向对象添加属性和方法。

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

2015-07-20

回应

JQ、js获取iframe中的元素、方法，判断iframe是否加载完成

父窗口操作iframe元素：
window.frames['framename'].document.getElementsByTagName('ul')
window.frames['framename'].$('#aaa').val()
$(window.frames['framename'].document).find('#aaa').val()

父窗口调用iframe方法：
window.frames['framename'].func();
$(window.frames['framename'])[0].func();
$("iframe[name='framename']")[0].contentWindow.func();

iframe获取父窗口元素：
window.parent.$('#abc').val()
$(window.parent.document).find('#abc').val()

-------------------------------------

jquery判断iframe是否加载完成
var iframe=$("#IFrame");
iframe.prop("src","http://www.aijquery.cn");
iframe.load(function(){
alert("加载完毕");
});

用attachEvent来判断
var iframe=$("#IFrame");
iframe.prop("src","http://www.baidu.com");
if (iframe[0].attachEvent){
iframe[0].attachEvent("onload", function(){ // IE
alert("加载完毕");
});
} else {
iframe[0].onload = function(){ // 非IE
alert("加载完毕");
};
}

2015-07-20

回应

通过ajax获取json时要过滤的特殊字符

\ufeff
\u2028
\u2029
\xa0（这个也可以替换为空格）

2015-06-15

回应

JS仿PHP shuffle、range、in_array

Array.prototype.shuffle = function() {
	for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
	return this;
};

function range(startNum, endNum, stepNum){
	for(var arr=[], i=startNum; i<=endNum; arr.push(i), i+=(stepNum ? stepNum : 1));
	return arr;
}

function in_array(obj, arr){
	for(var i in arr){
		if(arr[i]===obj)return true;
	}
	return false;
}

在JavaScript 1.6中in_array有对应的原生函数arr.indexOf(search)
注：IE浏览器暂不支持 JavaScript 1.6

2015-06-13

回应

JS运算符优先级

下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

2015-06-11

回应

jquery background animate

$("div").animate({
backgroundPositionX: "-120px",
backgroundPositionY: "0px"
})

2015-06-03

回应

jquery操作select

判断select的选中情况
$('select').find('option:selected').index()
$('select').find('option:selected').prop('value')
$('select').find('option:first').text()

设置值是abc的option为选中状态
$('select').val('abc');
$("select option[value='abc']").prop('selected', 'selected');

删除元素
$('select > option').remove()
$('select > option:gt(0)').remove()
$('select').empty()

2015-06-03

回应

CSS3切换效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body, #wrapper{height:100%;width:100%;overflow:hidden;margin:0;padding:0;background:#eee}
#wrapper #content{width:100%;height:100%;background:#fff}
#wrapper #content{
-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#wrapper.on #content{
-webkit-transform:scale(.7,.7);
-moz-transform:scale(.7,.7);
transform:scale(.7,.7);backgound:#
}
#open{
position:absolute; top:0; left:0; visibility:hidden;
-webkit-transform:translateY(100%) scale(.5,.5);
-moz-transform:translateY(100%) scale(.5,.5);
-ms-transform:translateY(100%) scale(.5,.5);
transform:translateY(100%) scale(.5,.5);
-moz-transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
background:#fff;width:100%;height:100%;z-index:1100
}
#open.on{ visibility:visible;
-webkit-transform:translateY(0%) scale(.5,.5);
-moz-transform:translateY(0%) scale(.5,.5);
-ms-transform:translateY(0%) scale(.5,.5);
transform:translateY(0%) scale(.5,.5);
-moz-transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
}
#open.s{
-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform:translateY(0%) scale(1,1);
-moz-transform:translateY(0%) scale(1,1);
-ms-transform:translateY(0%) scale(1,1);
transform:translateY(0%) scale(1,1);
}
#open a.close{position:absolute;top:10px;right:10px;border:solid 1px #eee;width:20px;height:20px;text-align:center;line-height:20px}
#mask{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.4); visibility:hidden; opacity:0; }
#mask.on{visibility:visible;opacity:1;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content"><a href="http://www.baidu.com/">新闻标题</a></div>
</div>
<div id="open">新闻内容<a href="#" class="close">X</a></div>
<div id="mask"></div>
<script>
$('#content a').click(function(){
$('#open,#wrapper,#mask').addClass('on');
setTimeout(function(){$('#open').addClass('s');},500);
return false;
})
$('#open a.close').click(function(){
$('#open').removeClass('s');
setTimeout(function(){$('#open,#wrapper,#mask').removeClass('on')},500);
return false;
})
</script>
</body>
</html>

2015-05-31

回应

jquery.pjax.js

原理 html5 api：
history.state
history.pushState
history.replaceState