从B3LOG(JAVA)换成了WordPress(PHP)。
B3LOG的速度很快,但是作者很少会再添加新功能了,仅修改BUG。而且界面的设计风格也比较旧。
WordPress是老牌的开源博客了,功能强大。而且已经形成了庞大的社区,开发以及维护人员遍布世界各地。新版本的界面设计的也很简约,我非常喜欢。虽然PHP的速度要比JAVA慢,但是JAVA并没有像WordPress这样强大的开源博客。
所以还是选择了PHP的WordPress。
原来的文章,选择精华重新录到了WordPress上。
在前端编码过程中,我们经常会遇到取得用户浏览器和操作系统的情况。
下面让我们来看看如何使用js代码来取得用户所使用的浏览器:
// 取得浏览器
getBrowse = function () {
// 不可打乱顺序
if (navigator.userAgent.indexOf("MSIE" ) > 0) {return "MSIE";}
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {return "Firefox" ;}
if(navigator.userAgent.indexOf("safari" ) > 0 && navigator.userAgent.indexOf("Chrome" ) < 0){
return "Safari";
}
if(navigator.userAgent.indexOf("Chrome" ) > 0){return "Chrome";}
if (isCamino = navigator.userAgent.indexOf("Camino") > 0) { return "Camino";}
if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) { return "Gecko";}
};
取得操作系统:
// 取得操作系统
detectOS = function() {
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
|| (navigator.platform == "Macintosh" ) || (navigator.platform == "MacIntel" );
if (isMac) return "Mac" ;
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) return "Unix" ;
var isLinux = (String(navigator.platform).indexOf( "Linux") > -1);
if (isLinux) return "Linux" ;
if (isWin) {
var isWin2K = sUserAgent.indexOf("Windows NT 5.0" ) > -1 || sUserAgent.indexOf("Windows 2000" ) > -1;
if (isWin2K) return "Win2000";
var isWinXP = sUserAgent.indexOf("Windows NT 5.1" ) > -1 || sUserAgent.indexOf("Windows XP" ) > -1;
if (isWinXP) return "WinXP";
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2" ) > -1 || sUserAgent.indexOf("Windows 2003" ) > -1;
if (isWin2003) return "Win2003";
var isWinVista= sUserAgent.indexOf("Windows NT 6.0" ) > -1 || sUserAgent.indexOf("Windows Vista" ) > -1;
if (isWinVista) return "WinVista";
var isWin7 = sUserAgent.indexOf("Windows NT 6.1" ) > -1 || sUserAgent.indexOf("Windows 7" ) > -1;
if (isWin7) return "Win7";
}
return "other";
};
当有新的浏览器和操作系统后,基于以上代码进行扩展即可。
首先看一下HTML代码,我们定义一个textarea标签并绑定onkeydown事件:
<textarea id="NOTE" maxlength="500" onkeydown="checklength(this);"></textarea>
然后看一下javascript代码,每次触发该方法时取得文本域字符长度,如果超出则减去最后一个字符并返回:
// maxlength兼容IE处理
var checklength = function() {
var obj = $("#NOTE");
var max = obj.attr("maxlength");
if (max == null || max == "" || max == undefined) {
return;
}
if (obj.val().length > max) {
obj.val(obj.val().substring(0, (max - 1)));
return;
}
};
在每个textarea的onkeydown事件绑定该方法即可。
首先我们来看HTML代码:
<ul>
<li>百度</li>
<li>新浪</li>
<li>雅虎</li>
<li>腾讯</li>
</ul>
这是一段非常简单的html代码,其中包含了一个ul标签和多个li标签。
再来看一下javascript代码:
$("document").ready(function(){
alert($("li:eq(0)"));
alert($("li").get(0));
})
返回结果分别为:[object Object]和[object HTMLLIElement]
由此可知,eq返回的是一个jquery对象,get返回的是一个html 对象数组。
使用eq来获得第一个li标签的color值,继续看代码:
$("li").eq(0).css("color")
//因为eq(num)返回的是个jq对象,所以可以用jq的方法css
使用get来获得第一个li标签的color值:
$("li").get(0).style.color
//因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。
当然,你也可以get(num)后把对象转为jq的对象再进行操作:
$($("li").get(0)).css("color")
由此我们知道,由eq返回的jquery对象,我们可以直接使用jquery的方,如.css(),.html()等,而由get返回的是html数组对象要使用传统的HTML对象方法或者转换成jquery对象后再操作。
可以用eq的地方建议使用eq来取得jquery对象,可以有效减少代码量。
在web开发中,我们经常会遇到重置所有输入框的情况。
比如在查询时,会给用户提供一个“重置”按钮来清空所有输入框内的输入的文本。
这时使用jquery就可以统一清空(复位)。
// 复位查询条件输入域
function restInputArea(object){
// 清空文本框
$("#"+object).find('input[type="text"]').each(function(){
$(this).val("");
});
// 复位下拉菜单
$("#"+object).find('select').each(function(){
$(this).find('option:first-child').attr('selected',"selected");
});
};
上述代码使用了jquery选择器取得了整个输入框的父级元素,
并使用find找到该元素下的所有input与select输入框。
还可以继续扩展,比如textarea标签等等。