jquery 归档 - 糖醋排骨

2013-02-03

使用 jQuery 1.9 后，如何判断浏览器版本

忽如一夜春风来，我还在用 jQuery 1.8.1 的时候，无意中发现 jQuery 1.9.0 正式版已出。

于是乎惯例性的对 ShadowBlue 和本主题内置的脚本进行了升级。我这一换不要紧，差点成残疾，原来 1.9.0 中把 $.browser 取消了，全面改成了 $.support，也许 jQuery 的开发者认为通过特征来区分浏览器比通过浏览器版本来区分更加地有效，不过很多时候我们依然需要知道浏览器到底是啥版本。以前，通过 $.browser 我可以很容易地知道现在跑在什么浏览器上，并写成了一个方便的方法：

var ieVersion = function(){
    var ver = 100, $ = jQuery;
    if ($.browser.msie) {
        ver = parseInt($.browser.version);
    }
    return ver;
};

var ieVersion = function(){

var ver = 100, $ = jQuery;

if ($.browser.msie) {

ver = parseInt($.browser.version);

}

return ver;

};

于是当我调用这个方法就可以知道目前到底是 IE 几（如果不是 IE 则为 100），现在不行了，于是只有使用非 jQuery 内置方法来判断：

var ieVersion = function(){
    var ver = 100,
    ie = (function(){
        var undef,
            v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i');
        while (
            div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
        return v > 4 ? v : undef;
    }());
    if(ie) ver = ie;
    return ver;
}

var ieVersion = function(){

var ver = 100,

ie = (function(){

var undef,

v = 3,

div = document.createElement('div'),

all = div.getElementsByTagName('i');

while (

div.innerHTML = '',

all[0]

);

return v > 4 ? v : undef;

}());

if(ie) ver = ie;

return ver;

}

点击查看 DEMO | 源码

亲测 IE6-9 都可以正确识别，IE10 识别为非 IE 了，不过这样也无伤大雅。

2011-04-01

图片预读

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题，但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法（用jQuery只是为了方便，你也可以使用原生js或者其他类库），以下代码请放入js文件中或者 <script/>块里（事先请保证已加载jQuery类库）：

function imagePreload(images){
    var arr = ['<div style="display:none;">'];
    $.each(images, function(i, data){
        arr.push('<img src="'+ data +'" />');
    });
    arr.push('</div>');
    $('body').append(arr.join(''));
}

function imagePreload(images){

var arr = ['<div style="display:none;">'];

$.each(images, function(i, data){

arr.push('<img src="'+ data +'" />');

});

arr.push('</div>');

$('body').append(arr.join(''));

}

调用的时候，使用以下代码：

var preloadImages = [], preloadDir = './img/'; //preloadDir为图片文件所在的路径
preloadImages.push(preloadDir + 'a.jpg'); //这里的每一行添加一张图片，请自行修改图片文件名
preloadImages.push(preloadDir + 'b.jpg');
preloadImages.push(preloadDir + 'c.jpg');
imagePreload(preloadImages); //调用之前写的preload方法

var preloadImages = [], preloadDir = './img/'; //preloadDir为图片文件所在的路径

preloadImages.push(preloadDir + 'a.jpg'); //这里的每一行添加一张图片，请自行修改图片文件名

preloadImages.push(preloadDir + 'b.jpg');

preloadImages.push(preloadDir + 'c.jpg');

imagePreload(preloadImages); //调用之前写的preload方法

如果不喜欢使用jQuery，那么可以将这个方法改写为：

function imagePreload(images){
    var arr = [], elm = document.createElement('div');
    for(var i=0; i<images.length; i++){
        arr.push('<img src="'+ images[i] +'" />');
    }
    elm.style.display ='none';
    elm.innerHTML = arr.join('');
    document.body.appendChild(elm);
}

function imagePreload(images){

var arr = [], elm = document.createElement('div');

for(var i=0; i<images.length; i++){

arr.push('<img src="'+ images[i] +'" />');

}

elm.style.display ='none';

elm.innerHTML = arr.join('');

document.body.appendChild(elm);

}

2011-01-24

基于json数据的jQuery无限级下拉菜单插件

自己写的一个小插件，基于jQuery，取得json数据以后可以生成一个下拉菜单，理论上是无限级的。

点击查看Demo

也可以通过SVN下载（由于代码无限修改中，所以暂不提供压缩包下载，还请见谅）：

https://interjc.googlecode.com/svn/trunk/jquery/nav

1	https://interjc.googlecode.com/svn/trunk/jquery/nav

这个小插件目前只提供了最基本的线框样式，以后会逐步完善，相关实现方法及使用说明都会后续报道的。天冷不想打字，今天先到这了..

2010-04-25

一个最简单的基于PHP+jQuery的AJAX例子

说在前面：本文只作为一个笔记留存用以达到语言重用的效果，可能对于很多大虾过于入门级，请直接无视。

基本上一说起ajax，大家都感觉到比较神秘，我以前也是这样，总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码，以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解：html、css、js(jQuery等)是给浏览器看的，PHP是给服务器看的，js可以和php对话，而php可以生成html、css和js，以前我们浏览网页的时候，总是通过操作html，通过php告诉服务器我们需要什么内容，然后服务器会在一个新的页面将你请求的信息展示给你；而ajax，即是我们操作html时告诉js，然后js告诉php，php得到命令以后到服务器去取了你要的信息交给js，js再将此信息展示给你。这么看来ajax貌似更复杂一点，但是他带来几个好处：1. 你不需要进入一个新的页面就可以看到你所请求的信息；2.php只需要提取出产生了变化的有限信息即可，减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为，但是把刷新页面这件事交由js在后台偷偷完成了。
继续阅读“一个最简单的基于PHP+jQuery的AJAX例子”

2010-01-15

jQuery 1.4 Released

这几天还在为Google的走留问题闹心的时候，就听到了这么一个好消息，jQuery总算是1.4了，还是released。
jQuery是我最喜欢的一个js库，用起来简洁明了，感觉很爷们，什么都整合在一起，不像Mootools随便实现个什么效果还得去下这个那个文件一大堆把人都搞昏头了，对于我们这种小网站也没有什么太大的性能需求，jQuery就刚好。
到底更新了什么我还没看，不知道更新了什么东西，不过应该修复了不少bug做了很多改进吧，先给自己的主题换上再说。

2010-01-01

关于本Blog的页面载入效果

Zed童鞋向我询问本站载入效果的做法，由于比较繁琐，遂写到Blog中来，一来是这样比QQ等手段更有条理性，二来可以保留下来提高重用率。

废话不多说，现在开始：

1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。

2.思路
这个半透明遮罩首先被载入，这样他才能在一开始就出现，他上面有一张图片和一段文字告诉浏览者这是在loading，而不是笔记本快没电了或者什么；然后，页面的DOM就Ready了，这个时候为了验证各种库(比如我所使用的jQuery)载入完毕，CSS也下载完了，我们使用jQuery语句来使这个遮罩层隐藏起来，这个时候这个效果就完成了。继续阅读“关于本Blog的页面载入效果”

2009-11-30

使用jquery和cookies控制select表单

问题源于一个群里面的提问，在一个网页上添加一个select表单，当用户选择表单的时候，内容区会显示不同的内容，并在该用户下次打开此网页的时候记住这个设置。
像这样的东东一般都会想到要用Cookies来存储设置，方便起见，对于DOM的操作就想到了jQuery（直接写js执行效率会更高，只是，人都是很懒的嘛，呵呵..）。记录下来也算是个笔记吧(Demo)。

首先写这么一个Select下拉表单，以及用来输出被选中项相应内容的块：

<!--以下就是一段普通的select下拉菜单-->
<select id="choose">
		<option value="0">请选择城市</option> 
		<option value="beijing">北京</option> 
		<option value="shanghai">上海</option> 
		<option value="wuhan">武汉</option> 
		<option value="shenzhen">深圳</option> 
  </select>
<div id="output" class="default"></div>

<option value="0">请选择城市</option>

</select>

然后是用来处理Cookies的函数，其实jQuery有个插件是干这个的，不过貌似有点小Bug，所以我用的是以下函数：
继续阅读“使用jquery和cookies控制select表单”

2009-10-10

Wibiya

Wibiya是一个华丽的blog挂件（~~如我blog底部所示~~），其注册貌似是需要人工审核并由工作人员邀请的。

今天装了一个之后发现其与我所用的jQuery类库有所冲突。找到所有写有jQuery语句的代码，将其中 $ 全部替换为 jQuery ，问题解决。

BTW：这个工具条貌似很好的解决了腿特和脸书翻不过墙的问题。

2009-10-08

一个jQuery+CSS幻灯片播放器

写了一个幻灯片播放器，是用纯jQuery+CSS写的，如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定，幻灯片的数量也可以自由增减（当然也不能过于离谱..），使用jquery+css节省了代码，使载入更迅速..等等..

效果是这样的，请点击这里。
继续阅读“一个jQuery+CSS幻灯片播放器”