使用YUI Compressor给JavaScript和CSS瘦身

减小Javascript和CSS的体积有助于加快页面的加载速度。Javascript或者CSS的压缩器在英文里称为compressor，它主要是移除空格和注释来缩小体积。当然优秀的压缩器象YUI Compressor还具有打乱局部符号和优化代码等功能(特别针对JavaScript)。如果你的Javascript或者CSS本身就没有几行，那么你可能感受不到瘦身的效果；反之，通过压缩后的文件体积通常可以缩小40%-50%。

之前我已经用过一些在线工具来压缩网站的JavaScript和CSS代码，但是觉得用其来不是很方便。每次对Javascript和CSS稍作修改，都要把代码拷贝粘贴到在线工具里，然后在把压缩后的版本拷贝粘帖到本地保存。后来想自己网站上的Javascript和CSS本身体积就不是很大，就索性不压缩了，省得麻烦。最近在优化公司的网站代码的时候，决定对Javascript和CSS瘦身，用到了YUI Compressor。很早以前就听说YUI Compressor了，一直没有机会去使用它。这次使用后觉得很好用，故在这里推荐给大家。

我觉得YUI Compressor主要有3大优点：

1. 同时支持Javascript和CSS的压缩。
2. 用JAVA写的，可跨平台使用。它需要Java版本>=1.4，现在大部分机子应该都安装有Java，我在Window和Linux都试用过，没有出现任何问题。
3. 压缩效果好。我分别用YUI Compressor和Dean Edwards的在线Javascript Compressor对一个文件大小为8.341K的javascript进行压缩，YUI Compressor生成的文件大小为5.535K， 而在线Javascript Compressor生成的文件大小为5.985K。虽然Dean Edwards的JS Compressor还可以选择 Base62 encode(编码)和Shrink variable(收缩变量)，从而得到更小体积的文件(4.835K)。按照我的理解YUI Compressor是一种Minifier(缩小器)，正如文章开头提到的它主要是移除空格和注释来缩小体积，虽然它在一定程度上还缩小变量名和移除不必要的代码，但是比较保守。而Dean Edwards的JS Compressor可以称之为Packer(打包机)，它使用了不同的概念和更加先进的打包算法(例如：Shrink variable)，虽然它达到更小的体积，但是在性能上要打些折扣，因为客户端需要一定的时间去解压和使用它。

使用YUI Compressor，可以说是非常简单。

1. 首先到YUI Library官方下载页面，记住该页面有很多YUI的库，你要下载的是YUI Compressor。
2. 然后解压下载文件，记住直接可以用的是build文件夹下的yuicompressor-2.4.2.jar，另外下载的文件里还包含源代码、文档等等。
3. 把yuicompressor-2.4.2.jar拷贝到某个文件目录下，比如C:/tools(windows) 或者 /usr/adam/tools(Linux)。
4. 最后用下面的命令：

//压缩Javascript
java -jar /path/to/yuicompressor-2.4.2.jar example.js -o example.min.js
#例如：java -jar c:\tools\yuicompressor-2.4.2.jar 61dh.js -o 61dh.min.js
//压缩CSS
java -jar /path/to/yuicompressor-2.4.2.jar example.css -o example.min.css
#例如：java -jar /usr/adam/tools/yuicompressor-2.4.2.jar 61dh.css -o 61dh.min.css

更多的用法，请参考YUI Compressor的官方网页。

...阅读全文

JavaScript在IE6下报错'expected identifier, string or number'

最近一段时间在项目开发里用了许多jQuery的插件，有机会一定在本日志里写一些心得。今天不准备介绍jQuery插件，而是要介绍我在使用jQuery表单插件时碰到的一个问题。jQuery表单插件应该算是家喻户晓的jQury插件，我过去一直没有用它，因为jQuery插件一般体积都挺大的，如果只是需要一些简单的功能，我一般都是自己写。比如jQuery表单的处理，我在日志里介绍过，一般情况下懂的这些基本概念，就可以完成大部分任务了。但是这次的情况比较特别，自己写比较麻烦，而且一定不如jQuery表单插件有效率。

我把下列代码加入我的HTML模板文件：

<script type="text/javascript">
$(document).ready(function() {
    var options = {
        target: '.content',
        //beforeSubmit:  showRequest,  // pre-submit callback 
        //success:       showResponse  // post-submit callback 
    };
    // bind to the form's submit event
    $('#bill_addr_form').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });
});
</script>

我把选项(options)里的beforeSubmit 和success注释掉，代码在Forefox和IE8下工作正常，但是在IE6下报错：

expected identifier, string or number

上网搜了一下，发现这只是一个很低级的错误。如果变量options有多个选项，那么我们可以用逗号分开；但是最后一个选项后不可以有逗号。虽然IE8和Firefox可以忽略这个逗号，但是IE6下会报错(据说IE7下也会报错)

解决方法很简单，把多余的逗号删除就可以了。

var options = {
        target: '.content' //注意不可以加逗号
    };

...阅读全文

Greasemonkey 控制链接的打开方式

如果你对HTML有所认识，你一定知道链接里有个属性叫target，当这个值被设"_blank"，该链接被点击后就会在新窗口(或者新标签)里打开；当这个值被设为"_self"或者不做设置时，该链接被点击后就在同一框架或窗口中打开。中国的网站设计倾向于使用第一种方法，因此当你在一个网站上多点几个链接(例如百度知道), 你的浏览器就会被这个网站'淹没'。相反，国外的网站倾向于使用第二种（好像这被认为是一种标准）。个人比较认同第二种方法，但是这种方法也有一种弊端，比如我在使用美味书签(delicious)， 点击其中的一个书签后进入另外一个网站(在同一个窗口)，当离开这个网站的时候，我会自然而然地关闭窗口，这么一来美味书签也被关闭了。因此我觉得合理的做法应该是站内的链接在同一窗口打开，而站外的链接在新窗口打开。我在创建自己网站的页面时，都会尽量遵从这条规则，虽然我也有遗漏的时候，但是别人的网站我就根本无法控制了。

好在我们还是可以借助一个工具来解决这个问题，它就是Greasemoneky。不知道什么是Greasemonkey？它是Firefox的一个插件，你可以到这里下载。简单的讲Greasemonkey提供一个接口，可以导入用户自行创建脚本来控制页面的显示，就比如说我下面要介绍的：控制页面链接的打开方式。当然借助Greasemonkey你可以做的东西可多了，如果你有兴趣，可以到这里看看。

言归正传，下面是实现"站内的链接在同一窗口打开，而站外的链接在新窗口打开"的步骤：

1. 使用Firefox，据我所知Greasemonkey只支持Firefox。还没有Firefox？请点击下载：

2. 在Firefox里点击这里安装Greasemonkey。

3. 重启Firefox后，你会在Firefox的右下角看到一个可爱的猴头，那就是Greasemonkey。

4. 请确保Greasmonkey处于开启状态(金黄色的猴头代表开启，灰色的猴头代表关闭), 然后点击这里安装用户脚本。

5. 刷新页面，你就可以实现站内的链接在同一窗口打开，而站外的链接在新窗口打开。

有问题？请留言。

...阅读全文

jQuery 制作迷你背词汇工具

jQuery提供的Load的函数可能可以说是实现ajax功能的最轻巧的方法。我在博客里介绍了很多，请参考这些文章。今天我要介绍的是load()函数的一个实际运用，希望你读完以后会觉得它很简单、而且很实用。下面是一个类似金山词霸里背单词的小工具，它和滚动文字(图片)的效果差不多，但是用到的是ajax功能，也就是涉及到服务器端的脚本的执行。

loading ...

首先我创建的一个文本文件包含有我要背诵的英文词汇，然后是下面的PHP代码，用来读取词汇，并且随机返回一个词汇。

<?php
$buffer = array();
$handle = @fopen("toefl_listen.txt", "r");
if ($handle) {
    while (!feof($handle)) {
        array_push ($buffer, fgets($handle, 4096));
    }
    fclose($handle);
}
echo $buffer[array_rand($buffer)];
?>

最后是通过下面的Javascript脚本加上一点Ajax技术，调用服务器端的PHP代码，并把返回结果在特定DIV里显示。因为是循环播放，所以我用到了setInterval()函数。此外还使用clearInterval()函数，实现鼠标滑过 - 暂定播放的功能。

<script>
  $(document).ready(function()
  {
   //没隔3秒调用服务器端的php文件
   var refreshId = setInterval(function()
   {
    $('#timeval').load('reflesh.php');
   }, 3000);
   //鼠标滑过 - 暂停播放
   $("#timeval").mouseover(function()
   {
      clearInterval(refreshId);
   });
   $("#timeval").mouseout(function(){
      refreshId = setInterval(function()
      {
      $('#timeval').load('reflesh.php');
      }, 3000);
   });
  });
</script>

我觉得上面介绍的间隔一定时间调用服务器的代码，其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件，你还可以用它来调用数据库，来实现对某个数据的实时更新。

...阅读全文

cookie

cookie在网站开发里运用的很多，特别是购物网站。cookie可以分为两种，会话cookie(session cookie) 和持久cookie(presistent cookie)。在PHP里，当一个会话开始，服务器会在客户端的浏览器里设置一个cookie用来保存PHP session ID，而cookie的内容被存放在服务器端。会话cookie的有效期通常是持续到会话结束，也就是当你关闭浏览器后，但是你也可以在PHP.INI里改变会话的有效期。通常我们说的cookie是指持久cookie，它是完全保存在客户端的浏览器里，其有效期是在设置的时候定义好。在这篇文章里，我准备介绍持久cookie(以下简称cookie)。

cookie的运用涉及到信息的保存和提取，当然我们可以使用数据库来完成这项工作，但是对于一些小信息，比如email，使用cookie显得更加快捷。cookie是存在客户端的，因此首先想到的是使用Javascript来设置和提取cookie。W3Cschool上提供两个函数，使用它们基本上就可以满足我们的需要。我把它们稍作修改，如下：

// 全局变量
domain    = '.61dh.com'; //如果不设代表当前页面的域名
path    = '/'; //通常使用根目录，当然你可以可特指一个路径
secure    = 0; //对于SSL网站(https），需要设置安全cookie，这时可以把值设为‘1’
//setCookie，设置cookie，需要三个变量，cookie名称，cookie值，和有效时长
function setCookie(c_name,value,expiredays){
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+
  ((domain.length > 0) ? ';domain=' + domain : '') +
  ((path) ? ';path=' + path : '') +
  ((secure) ? ';secure' : '') +
  ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//getCookie，获取相关cookie的值
function getCookie(c_name){
  if (document.cookie.length>0){
    c_start=document.cookie.indexOf(c_name + "=");
    if (c_start!=-1){ 
      c_start=c_start + c_name.length+1; 
      c_end=document.cookie.indexOf(";",c_start);
      if (c_end==-1) c_end=document.cookie.length;
      return unescape(document.cookie.substring(c_start,c_end));
    } 
  }
  return "";
}

有了上面的函数，你就可以根据需要来保存一个数据(setCookie)，然后再根据需要取回数据(getCookie)， 例如：

setCookie('email',adamcai@live.com,365);//保存email,有效期365天
var email = getCookie('email');//获取email

另外一种方法是使用PHP，这要根据实际需要，有时你可能会觉得使用PHP更方便。PHP自带有函数：

setcookie(name,value,expire,path,domain,secure)

• name：必须,cookie名称
• value：必须,cookie值
• expire：任择。指定的cookie时到期。单位是秒，例如： 3600 * 24 * 30将设置Cookie过期30天。如果此参数没有设置时，cookie将在会话结束时（当浏览器关闭）到期，
• path：任择。指定服务器路径的Cookie如果设置为“ / ”时， cookie将可在整个域内有效。如果设置为“ /测试/ ”时， cookie将只在测试目录及所有子目录有效。默认值是当前目录。
• domain：任择。指定域名的cookie 。为了使现有的cookie的所有子网域内有效，你应该将其设定为 ".example.com"。如果不设置，将使用当前页的域名。
• secure：任择。指定是否cookie应用于安全的HTTPS连接。如果设为true，那么cookie将只可以在安全连接存在的情况下设定。默认值为false 。

$_COOKIE['name'] //用来获取cookie的值。

//设置cookie
setcookie("email","adamcai@live.com”, time()+3600*24); //时常为24小时
//获取cookie
if(isset($_COOKIE("email")){
  $email = $_COOKIE("email");
}

...阅读全文

document.ready还是不够快

我曾经在日志里介绍过jQuery的document.ready:

document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

document.ready()可以说是jQuery的一大特色，它不仅比传统的Javascript函数onload()要快，而且加上jQuery强大的选择器可以在不用修改HTML代码情况下(例如：不用在HTML标签加入onClick()函数来调用其它自定义Javascript函数)对Web页面中的各种元素和事件进行控制、实现和Web客户交互的作用。

可是有时document.ready()并非你想像的那么快，我在最近的一个project里就碰到这个问题。例如一个页面含有多个相似的链接，每一个链接的HTML代码大致如下：

<a rel="popin" href="/cart/?popin=yes&act=add&sku=xxx">
  <img src="/images/new/buynow.gif" border="0" />
</a> 

当这些链接被点击后，相对应的物品(sku)就会被加入购物篮，为让客户点击链接后不用离开当前页面，我使用了jQuery的ajax方法，从后台调用添加购物篮函数，然后返回xml响应，最后把xml携带的信息通过HTML层(layer)传递给客户。大致的jQuery+ajax代码如下：

$(document).ready(function(){
  $("a[rel^='popin']").click(function(){
    $.ajax({
      url: $(this).attr('href'),
      type: 'GET',
      dataType: 'xml',
      error: function(){
      alert('Error loading XML document');
    },
    success: function(xml){
      $('#cart_sum1').html($(xml).find('cart').text());
      $('#buynow-result').html($(xml).find('pop').text());
      $('#buynow-inform').show('slow');
      $('#cart_sum2').html($(xml).find('cart').text());        
    }
    });
    return false;
  });
});    

注意到我用了document.ready，试图在DOM ready的时候给这些链接(<a[rel^='popin'>)绑定点击事件控制。这在我的机子(windowxp+firefox3)里测试通过，但是在我老板的机子(redhat+firefox)上，有时会出现点击链接后跳出XML代码，原因很明显: 当她点击链接的时候，链接还没有被绑定事件控制，也就是说document.reday()还是不够快。

怎么解决？我有打算在链接代码里加入传统Javscript的onClick函数，这样当客户点击链接的时候，先调用onClick函数，然后在onClick函数里在调用ajax，应该就可以解决问题。今天想看看别人都是怎么解决这个问题，就用Google搜索了一下。找到这篇论坛问答，觉得说的挺有道理：

• Using window.onload waits until the whole page is loaded.  (onload是在页面加载后起作用)
• Using document.ready waits until the whole DOM is ready (document.ready是在DOM 准备好后起作用)
• Having the script at the end of the body without document.ready, that doesn't wait. (把去掉document.ready的jQuery代码放在</body>前，无需等待)

准备明天到公司试试这种方法。其实把Javascript放在</body>前的说法以前也有看到过，Google的Analytics代码就建议放在</body>前。

Updated:(3/24/08)

经测试，第三种方法也不好用，主要问题是在页面没有完全加载完毕时，链接就已经被点击，这时</body>前的那一段jQuery代码还没有被加载，因此链接还没有被绑定ajax事件控制。

最终的解决办法是，把上面那段jQuery代码写出一个函数，反正header里，然后结合传统Javascript onClick函数，在链接被点击时直接调用header里函数。具体更改如下：

1. jQuery函数 (这段函数被放在header里)

function ajax_add(url_str){//把jquery代码写成一个函数
   $.ajax({
     url: url_str,
     type: 'GET',
     dataType: 'xml',
     //timeout: 5000,
     error: function(){
       alert('Error loading XML document');
     },
     success: function(xml){
       $('#cart_sum1').html($(xml).find('cart').text());
       $('#buynow-result').html($(xml).find('pop').text());
       $('#buynow-inform').show('slow');
       $('#cart_sum2').html($(xml).find('cart').text());
     }
   });
}

2. 链接代码：

<a onClick="add_ajax('/cart/?popin=yes&act=add&sku=xxx')" href="#">
  <img src="/images/new/buynow.gif" border="0" />
</a> 

注意：链接直接加入onClick事件控制，而不在页面加载后绑定事件控制。这样就可以避免链接被点击时，事件还没有绑定的问题。

...阅读全文

使用jQuery+jSon+delicious创建'相关文章'

我的日志引擎使用的是Google的Blooger，然后FTP到61dh.com的所属服务器。所有页面都是HTML，没有使用数据库。因此和Wordpress相比之下，功能要少了很多。但是每次发布新文章，我都会把文章的加到delicious(美味书签)。这么一来，借助delicous提供的扩展接口，我给日志添加了一些功能。我在日志里曾经介绍过，如何使用美味书签创建日志分类。昨天我又给日志添加了'相关文章'的功能，这次使用到的是delicious提供的JSON Feeds。

通过http://feeds.delicious.com/v2/json/61dh，可以得到61dh.com的最新15个日志的Feeds ，Delicious提供的JSON Feed不仅仅是罗列保存的书签链接，而且还可以输出具有相同标签的链接。因此只要根据一篇日志的标签信息，就可以找出具有相同标签的帖子信息了。例如：通过http://feeds.delicious.com/v2/json/61dh/css+html 可以找出标签是css和html的文章链接。 Feeds输出是JSON格式，大致如下：

[
{"u":"http:\/\/www.61dh.com\/blog\/2009\/03\/jquery-ajax-xml.html",
 "d":"jQuery ajax - \u5982\u4f55\u4f7f\u7528XML",
 "t":["jQuery","PHP","ajax"],
 "dt":"2009-03-09T03:14:29Z",
 "n":"",
 "a":"61dh"
},
{...}, //第二篇文章
... //第三、第四...
]

上面，我只列出一个完整文章的JSON对象格式，很显然不同的JSON Feed有着不同的Object Attributes。在Delicious提供的JSON feed里，每个Object包含有6个属性：

• 1. u - 链接URL，在这里代表每一篇日志的永久地址
• 2. d - 链接名称，在这里代表日志的标题
• 3. t - 链接标签，在这里代表日志的标签
• 3. dt - 链接代表加入时间
• 4. n - 链接注释，在这里是空白
• 5. a - 书签的所有者， 这里是61dh

知道了JSON的输出格式后，就可以使用jQuery的getJSON()方法来处理输出结果。这里我们感兴趣的是相关文章的地址和标题，也就是u和d。jQuery代码如下：

$.getJSON("http://feeds.delicious.com/v2/json/61dh/CSS+HTML+Jquery?callback=?",
  function(data){//data这里是JSON对象，它可以是由多个JSON对象组成
    $.each(data, function(i,item){//每一个对象包含有一个日志的信息
      //item.u 就是日志的地址；item.d就是日志的标题
      $('<a href='+item.u+'>'+item.d+'</a><br />').appendTo("#related-post");
        if ( i == 8 ) return false; //默认下，JSON feed 提供15个链接，这里我只取8个
      });
  });

注意：.getJSON的第一个变量是可以提供JSON格式输出的URL，URL的参数要根据实际情况而定，delicious提供的JSON，使用callback作为参数名：callback=?, jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

上面的代码可以把标签为CSS、HTML和jQuery的文章链接找出，但是就这么写还不行，相对一篇文章，我们要自动找出该文章的所属的标签，然后动态的加入到JSON URL上。另外还有考虑找不到结果(标签有误) 和只有一个结果(找到文章本身)的情况。所以完整的代码如下：

 <script type="text/javascript">    
  //改函数用于判断JSON object所包含的子object个数
  function getOnum(object) {
    var num = 0;
    for(var i in object) { num ++; }
    return num;
  }
  $(document).ready(function(){
    var cat ="";
    $(".blogger-labels a[rel='tag']").each(function(){ //找出标签的名称
      cat += $(this).text() + '+'; //标签用+分隔
    });
    cat = cat.slice(0,-1); //去掉最后一个‘+’号
    
  $.getJSON("http://feeds.delicious.com/v2/json/61dh/"+cat+"?callback=?",
  function(data){
    var Onum = getOnum (data); 
    if ((Onum == 0) || (Onum == 1)) //结果为0或者1
      $('<p>找不到相关文章</p>').appendTo("#related-post");
    else{ //结果 > 1
      $('<ul>').appendTo("#related-post");
      $.each(data, function(i,item){
      $('<li><a href='+item.u+'>'+item.d+'</a></li>').appendTo("#related-post");
      if ( i == 8 ) return false;
      });
      $('</ul>').appendTo("#related-post");
    }
  });
});
</script>
<div id="related-post">
  <h4>相关文章: </h4>
</div> 

除了getJSON，上面的代码里还有一些小知识点：

• 1. 如何判断Object是否为空： getOnum()函数
• 2. jQuery selector - 选择所有class name 为blogger-labels区内的rel属性为tag的<a>： $(".blogger-labels a[rel='tag']") -
• 3. 去除字符串的最后一个字符：cat = cat.slice(0,-1);
• 4. 往一个HTML元素里添加加HTML代码：appendTo("#related-post")

...阅读全文

jQuery对表单处理的三个实例

我花了整整一个星期时间，更新了公司网站的购物结帐系统。主要增加的功能是允许用户在多个Billing Address(或者Shipping Address)进行选择和编辑，所有这些功能都是在同一个页面完成。我运用了jQuery代码进行ajax调用和表单处理。在这篇文章里我准备介绍三个jQuery对表单元素处理的实际运用，和我在jQuery基础里提到的 - 处理表单元素相比，这些运用要相对灵活一点。

1. 清空表单元素

使用传统Javascript提供的reset()方法可以把表单所有元素重设为初始值(或者默认值)，但是有时reset()并非你要的，比如说，表单的初始值使用的是预设值(非空)，或者你只是想清空特定表单元素，这时候使用reset()就行不通了。

HTML表单代码

<form>
  First name: <input type="text" name="firstname" value="Adam"> <br />
  Last name: <input type="text" name="lastname" value="Cai"> <br />
  Accoutn ID: <input type="text" name="acc_id" value ="123">
</form>

使用以下jQuery代码，可以清空所有类型为'text'的input表单控件，但是除了name为'acc_id'的input；并且把name=acc_id的输入框设置为0

$("input[type='text']").each(function(){
  if (this.name != 'acc_id') $(this).val("");
  else $(this).val("0");
});

2. 下拉框的选择/清除选择

HTML下拉框代码：

<form action="">
  <select name="cars">
    <option value="0">前选择车的牌子</option>
    <option value="volvo">沃尔沃</option>
    <option value="honda">本田</option>
    <option value="toyota">丰田</option>
    <option value="audi">奥迪</option>
  </select>
</form>

如果每个选项(option)都没有属性'selected'，那么第一选项将被选中。使用下面的jQuery代码，可以先选中本田，接下来，如果要选择丰田，可以先清除选择，然后使用同样的方法进行再选。

$("select[name='cars'] option[value='toyota']").attr("selected","selected"); 
//接下来，如果要选择丰田，可以先清除选择，然后使用同样的方法进行选择
$("select[name='cars'] :selected").removeAttr("selected");
$("select[name='cars'] option[value='honda']").attr("selected","selected"); 

另外我们还可以使用传统的Javascript选择方法：selectedIndex，要注意：下拉框的选项索引(index)是从0开始，因此在上述表单里，selectedIndex=2 - 代表本田车被选中。具体写法如下：

document.form[0].cars.selectedIndex = 2; //选择本田车
//这里用form[0]，代表页面的第一个form，如果FORM有特定的名字，那么可以使用form的名字代替
//例如 form的名为：myCar，
document.myCar.cars.selectedIndex = 0; //恢复默认值

3.选择单选框(radio)和复选框(checkbox）

不论是单选框还是复选框，我们都可以使用checked的属性，设置值为true代表选择；设置值为false代表反选择。

HTML代码：

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>

使用下面的jQuery代码，可以把桔子选中。

$("input[type='checkbox']").each(function(){
  if ($(this).val() == 'orange')
  $(this).attr('checked', true);
});

...阅读全文

jQuery 动画卷页

当一个网页内容很长，为了方便读者返回页首，我们通常会在网页底部加上个链接并且把链接的href属性设为'#'；当用户点击这个链接，页面就会快速返回到顶端，同时当前链接名后会加上一个‘#’。你是否觉得这种卷页方法有些生硬？jQuery提供一种动画卷页方法，简单易用。先看看效果 (拉到页面底部点击'返回页首')，还不错吧？:-) 接下来我将介绍如何实现这一特效。

首先给这些‘返回页首’的链接加上个Class：

<a href="#" class="backtotop" target="_self">返回页首↑</a>
<!--把所有返回页首的链接加上class，例如：backtotop-->

然后加入下面jQuery代码，你可以把这行代码放在</body>前，或者其它位置。当然你还要在<head>里包含jQuery库文件。（如果你对jQuery一无所知，那么建议阅读我写的jQuery基础系列文章)

jQuery(document).ready(function() {
   jQuery('.backtotop').click(function(){
     jQuery('html').animate({scrollTop:0}, 'slow');
}

就这么简单？基本上是！但是使用jQuery('html')在Safari和Chrome(记得在什么地方看到过：chrome使用的是safari的核)下选择不到我们要的对象。好在在这两种浏览器下，我们可以使用jQuery('body')来替代。因此为了让代码的兼容性更强，我们可以加入对浏览器的判断，这里使用到jQuery提供jQuery.browser的方法。注意: 在jQuery1.3里，这种方法已经不建议使用。jQuery1.3新增jQuery.support的方法，用于展示不同浏览器各自特性和bug的属性集合，也就是说jQuery1.3不在建议对浏览器进行判断，而建议直接对某个特性进行判断。但是我不知道这个选择器的问题应该属于哪个特性，因此，我还是使用旧的方法。(jQuery.browser的方法在jQuery1.3里还是支持的)

jQuery(document).ready(function() {
  jQuery('.backtotop').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:0}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:0}, 'slow');
      return false;
    }
  });
});

这上述代码里，我用到jQuery('body').animate({scrollTop:0}, 'slow'); 我们可以根据实际需要更改卷页的速度，你可以用'slow'、'fast'、或者用具体数字，例如1000(代表一秒,注意用具体数字时不用加单引号)。 另外，{scrollTop:0}表示返回页首，如果你只是想让页面卷到你要的特定位置，我们可以使用标签(ID)的方法，例如：要移到某个ID为'myID'的区域(<div id="myID">....</div>)顶部，我们可以使用类似的方法，但是要先计算这个区域距离页首的距离，代码如下：

jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
//jQuery('#myID').offset().top可以计算ID为myID的区域里页首的距离

演示

...阅读全文

jQuery基础 - 如何判断页面元素存在与否

在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：

document.getElementById("someID").innerText("hi");

如果ID为"someID"的元素不存在，我们将得到Javascript运行错误：document.getElementById("someID") is null

正确的写法应该是：

obj = document.getElementById("someID");
if (obj){
  obj.innerText("hi");
}

那么在jQuery，我们如何判断页面元素存在与否呢？如果参照上面的传统Javascript的写法，我们第一个想到的办法一定是：

if ($("#someID")){
  $("#someID").text("hi");
}

可是这么写是不对的！因为jQuery对象永远都有返回值，所以$("someID")总是TRUE，IF语句没有起到任何判断作用。正确的写法应该是：

if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}

注意：判断某个页面元素存在与否在jQuery实际上是没有必要的，jQuery本身会忽略对一个不存在的元素进行操作，并且不会报错。

...阅读全文

jQuery基础 - 改变CSS样式

我在前面的文章里介绍了 - 如何添加/移除CSS类，那种方法需要先定义好CSS类，然后针对"类"来改变某个元素的样式。本文要介绍的是另外一种改变CSS样式的方法 - 直接添加样式法。使用CSS样式一般有两种方法：一种是在Head里引用外部定义了CSS样式的文件；另一种是直接在HTML元素里嵌入样式。如何添加/移除CSS类一文里介绍的方法通常需要把CSS类定义在外部CSS样式文件里；而本文介绍的方法就类似于嵌入式CSS。

jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：

$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：

var divcss = {
  background: '#EEE',
      width: '478px',
      margin: '10px 0 0',
      padding: '5px 10px',
      border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：

$("#61dh a").css("color")
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：

$("#61dh a").css('color','#123456');
  $("#61dh a").hover(function(){
  $(this).css('color','#999');
  },
  function(){
  $(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用如何添加/移除CSS类一文提到的方法来改变鼠标划过的链接样式。

演示+代码

...阅读全文

jQuery基础 - 如何添加/移除CSS类

在网页设计中，我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！”

1. addClass() - 添加CSS类

$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。

$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式，它将被移除；
//反之，CSS类”newClass“将被赋给该ID。

在实际运用中，我们常常先定义好这些CSS类，然后通过Javascript事件触发（比如点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法 hasClass("className")，用来判断某个元素是否已经被赋予某个CSS类。

演示+代码

...阅读全文

jQuery基础 - 树形结构的选择器

在前面的文章里，我介绍了jQuery选择器。在那篇文章里介绍的选择器的方法，不管是通过"id"还是通过"class”，它们都是针对某个元素本身，这和常规的Javascript方法(getElementById以及getElementByName)的思想相似。在这篇文章里我要介绍jQuery提供的另外一种类型的选择器，我称之为树形结构的选择器。树形结构里的节点，如果它不是根部，也不是末枝，那么它一定有父母和孩子。DOM结构其实也是一种树形结构，jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括：children(), parent(), parents(), next(), prev(), siblings().

• 选择某个元素的"孩子" - children()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#parent").children().length //得到所有的”孩子“(li)的个数，“3”
$("#parent").children("#son1").text(); //得到第一个”孩子“(li)的值 - “第一列” 

• 选择某个元素的“父母” - parent()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son1").parent().attr("id");//得到ul的ID - "parent"

• 选择某个元素的“祖先”-parents() (注意：一级一级向上选择直到<html>)

<div id="grand">
  <ul id="parent">
    <li id="son1">第一列</li>
    <li id="son2">第二列</li>
    <li id="son3">第三列</li>
  </ul>
</div>
$("#son2").parents().each(function(i){
  if(i<3) //只显示3代祖先
  alert($(this).html());
});

• 选择某个元素的“弟弟” - next()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").next().text(); //选择#son3

• 选择某个元素的“哥哥” - prev()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").prev().text(); //选择#son1

• 选择某个元素的“兄弟” - siblings()

<ul id="parent">
  <li id="son1">第一列</li>
  <li id="son2">第二列</li>
  <li id="son3">第三列</li>
</ul>
$("#son2").siblings().text(); //选择#son1和#son3

演示以及代码

...阅读全文

jQuery基础 - 处理表单元素

我在以前的文章里已经介绍过如何运用jQuery来获取和设置表单元素，因为表单在HTML里非常重要，所以在“jQuery基础”这个系列，我觉得很有必要把jQuery对表单元素的处理做更加详细的介绍。

HTML表单(Form)常用控件有：参考

• input type="text" 单行文本输入框
• input type="password" 密码输入框(输入的文字用*表示) 
• input type="radio" 单选框
• input type="checkbox" 复选框
• input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
• textArea 多行文本输入框
• select 下拉框 (单选和多选)

在jQuery里，我们大致可以通过三种方法来获取这些控件的值：

1.获取input类的值： $("input").val();

2.获取textarea类的值: $("textarea").val();

3.获取select类的值：$("select").val();

当表单上含有多个input类（或者textarea类和select类），使用上述方法得到的将是一个数组。当然，你可以给这些控件加上ID，从而对某个特定的控件取值，例如：$("input#myID").val()。

下面将对每一种控件的取值方法做一一介绍：

1. input type="text" 单行文本输入框和input type="password" 密码输入框

$("input").val();

2. input type="radio" 单选框

$("input:checked").val(); //使用checked，取被选中的单选框的值

3. input type="checkbox" 复选框 (值得注意)

$("input:checked").each(function(index){
  $("#result").append($(this).val() + " ");
});
//因为复选框的选择结果通常大于1，所以得到的结果是数组。
//使用.each()方法，可以把选择的值一一取出。
//这里结果将被加入(append)到ID为"result"的段落里

4. input type="submit" (表单提交按钮)

取值方法和单行文本输入框的取法相同，但没有什么实际意义。

5. textArea 多行文本输入框

$("textarea").val();

6. select 下拉框 (单选和多选)

$("select").val(); 
//注意：如果是复选，那么得到的结果是用逗号分格的字符串，例如："选择一，选择二”。

注意：

• 对表单元素取值，通常是发生在表单别递交后，在jQuery我们可以用下面的语句进行判断：

$("form").submit(function(){
  $("input").val();
});

• 对表单元素设值，只要把要设置的值作为传递参数即可，例如：$("input").val("61dh.com");

演示及代码

...阅读全文

jQuery基础 - 如何处理HTML标签属性

当我们对页面进行操作的时候，常常需要对HTML标签属性(tag attribute)进行处理，这包括获取某个标签属性的值，或者对某个标签属性的值进行设置。在jQuery里我们可以通过.attr()的方法来实现。

1. 获取标签属性的值 (演示)

• 语法：$('选定目标').attr('属性名')
• 例子如下：(如果你对如何选定目标不了解，请查看前面的文章：jQuery基础 - 选择器)

<p id="b6_a">点击获取本段落的ID</p>
<button>查看ID</button>
<p id="b6_a">点击查看链接的URL</p>
<ul>
  <li><a href="http://www.61dh.com/blog">网站开发日志</a></li>
  <li><a href="http://www.61dh.com/blog/categories/">日志分类</a></li>
</ul>
//使用下面的jQuery代码，来获取ID和HREF
$(document).ready(function() {
  $('button:eq(0)').click(function(){
    alert("ID:" +$('p:eq(0)').attr("id"));
  });
  
  $("ul>li>a").click(function(){
    alert("URL:"+$(this).attr('href'));
    return false;
  });
});

2. 设置标签属性的值 (演示)

• 语法：$('选定目标').attr('属性名', '值')
• 例子如下：

<p id="b6_c">点击设置本段落的ID，</p>
<button>设置ID</button>
//通过下面的jQuery代码，点击按钮后，p的'id'将被设置为"b6_cc"
$("button").click(function(){
  $('#b6_c').attr("id", "b6_cc");
});

3. 使用jQuery设置标签属性值的功能，我们可以对表单的提交的目的地进行修改，这在实际运用中还是挺有用。例如：用户可以通过点击某个链接，让表单提交给不同的php文件做不同的处理。

$('a').click(function(){
  $("#myform").attr("action", "custom1.php");
});

4. 上面介绍的设置标签属性值的方法都只有对一个属性进行修改，其实jQuery的.attr()方法也可以对某个标签的多个属性进行修改，例子如下：

$("#myimg").attr({
  src : "newimage.gif",
  title : "New Image",
  alt : "New Image",
  border : 1
});

...阅读全文

jQuery基础 - 如何处理网页内容

改变页面内容应该算是Javascript最常用的功能，这包括更改已经存在的页面元素或者添加新的HTML元素。jQuery提供两种实现这种功能的方法 – text()和html()。text()是对纯文本的处理；html()和text()相似，不同的是它还支持HTML代码。

//设置ID为"b5_a"段落的内容为"这是新加入的文本信息";
$('#b5_a").text("这是新加入的文本信息");
//在ID为"b5_b"的div里加入一段html代码；
$("#b5_b").html("<p>新加入一个html段落</p>");

演示

有时我们要读取页面的内容，这也可以用text()和html()来实现。同样，使用text()得到的是纯文本；使用html()得到的是html代码。

//点击第二个按钮查看相关元素的文本内容
$("button:eq(1)").click(function(){
  alert($('#b5_a').text());
});
//点击第四个按钮查看相关元素的HTML内容
$("button:eq(3)").click(function(){
  alert($('#b5_a').html());
});

演示

注意：text()和html()返回值得类型都是字符串型（string）。如果我们要对返回值进行算术运算，我们可以使用原始的JavaScript 函数：parseInt 或者 parseFloat 先把字符串转换成整形或者浮点型。

<ul id="u2">
  <li>12.3</li>
  <li>1.5</li>
</ul>
//通过下面的jQuery代码，可以对上述列表求和
$("button:eq(4)").click(function(){
  var sum = 0;
  $('li').each(function(index){
  sum += parseFloat($(this).text());
  });
  alert(sum);
});

演示

...阅读全文

jQuery基础 - 处理多个选择结果

在上篇文章里，我介绍了jQuery的选择器。其中一种选择方法是直接对页面标签元素选择，比如说选择段落 $("p”)，这样就会把页面的所有段落都选中。jQuery提供.each()方法来对选中的结果进行循环处理，而且在每次执行函数时，都会给函数传递匹配元素在选中结果里所处位置的数字值作为参数（从零开始的整形变量）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

例子一：演示

<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
<button>选中所有列</button>
//使用下面的jQuery代码，点击按钮后，所有列将被选择，并且在每列后加上index
$('button').click(function(){
   $('li').each(function(index){
      var str = "<b>"+index+"</b>";
      $("li:eq("+index+")").append(str);
   });
});
//注意：index是从零开始的整形变量。

例子二：演示

<ul>
<li>第一列</li>
<li>第二列</li>
<li class="mark">第三列</li>
<li class="mark">第四列</li>
</ul>
<button>选择列</button>
//使用下面的jQuery代码,点击按钮后，class为“mark”的列将被选择
$('button').click(function(){
   $('li').each(function(index){
      if ($(this).is(".mark")){
         this.style.color = 'blue';
      }
   });
});
//如果我们只想选第一个class为"mark"的列，可以使用return false，停止循环
$('button').click(function(){
   $('li').each(function(index){
      if ($(this).is(".mark")){
         this.style.color = 'blue'; 
         return false; //注意这个return
      }
   });
});

注意：在上述例子里，我用到了$(this)和this, 前者是jQuery对象，后者是DOM对象。jQuery对象具有is方法，但不具有style方法，同理，DOM对象具有style方法，但不具有is方法。

...阅读全文

jQuery基础 - 选择器

传统的Javascript是通过document.getElementById()函数来选择页面元素，这需要被选择的元素具有定义好的ID。相比之下，jQuery对页面元素的选择就要灵活多，它不但支持通过ID选择，而且还支持Class Name、元素及其位置顺序、以及这些方法的组合。

如果你对CSS熟悉，你一定知道什么是ID和Class。ID和Class都是对页面元素的标识，不同的是ID是对某个元素的标识（不同的元素不可以具有相同的ID），而Class是对一类元素的标识（不同元素可以具有相同的Class）。 jQuery用到的ID和Class就是来自CSS。

1. 通过“ID”来选择：

<p id="myID">这一段落的ID是“myID"</p>
//用以下jQuery来选择这一段落，然后加上特效（向右移动10px）
$("#myID").animate({ marginLeft: 10}, 'fast');

2. 通过“Class”来选择：

<p class="myClass">这一段落的Class是”myClass“</p>
//用以下的jQuery来选择这一段落，然后附加上一个词
$(".myClass").append("<b>Hello</b>"

3. 通过“元素及其位置顺序”来选择：

<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
//使用下列jQuery对第三列进行选择，然后加上特效
$('li:eq(2)').animate({ marginLeft: 10}, 'fast');

4. 使用“上述方法的组合”来多项选择：

<p id="myID">paragraph with id</p>
<p class="myClass">paragraph with class</p>
<ul>
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
//使用以下jQuery可以把上面的HTML元素都选中
$('#myID, .myClass, li:eq(2)').$('li').append("-被选中");

注意：

• 选择页面元素的格式是：$('selector') , 这里selector是你要选择的元素，它可以是以上4种情况。
• 元素选择后，通常要执行一些操作，以上例子里使用了animate和append，更多更深入的探讨将在以后的文章里详述。
• jQuery的选择器(selector)功能强大，所包含的内容比较多，这里只是对最基本的功能进行介绍。我会在以后的文章里对它进行更加详细的介绍。
• Update:2/15/2009: $('selector')是jQuery('selector')的缩写，如果你的Javascript代码包含有对$的其他定义，你必须使用jQuery来代替$

...阅读全文

jQuery基础 - document.ready

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，这个问题在“javascript执行顺序里”一文里有详细介绍。jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

比如在"jQuery基础 - 如何开始"一文里，我用到如下jQuery代码：

<script type="text/javascript">
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>

这段代码的意思是：当Dom Tree加载完成后，显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点（来自jQuery文档）：

1. 确保在 <body> 元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。(

   我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。)

   <html>
   <head>
   <title>My second jQuery</title>
   <script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript">
   //下面是load的函数含有jquery注册函数$
   function load(){
      $("p").append("<b>Hello</b>");
   }
   //下面是jQuery的代码
   $(document).ready(function () {
   $("p").append("我的第一个jQuery代码!");
   $("p").append("<b>Hello</b>"); 
   });
   </script>
   </head>
   <body onload="load()">
   <h2>jQuery 简单例子2</h2>
   <p>I would like to say: </p> 
   </body>
   </html>

2. 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

...阅读全文

jQuery基础 - 从何开始？

到目前为止，访问我的博客的朋友大多数是通过搜索来的。而这些搜索使用的关键词里，“jQuery”占得比例最高。既然有这么多人都想学习jQuery，我准备在本博客里对它进行系统详细地介绍，首先要介绍的是jQuery基础。

使用jQuery需要3个基本步骤：

1. 下载jQuery.js并保存在网页可以存取的位置。下载链接：dowload

2. 在HTML的head里引用jQuery.js

3. 运用jQuery的方法

提示：在步骤一提供的下载页面里，你会发现每一种jQuery发行版本都有三个下载链接：Minified、Packed、和Uncompressed。到底应该下载哪一个要根据你的需要来定：

• 如果你想知道jQuery内部到底是如何工作的，你可以选择未压缩版本，也就是uncompressed。
• 如果你只是想使用它，你可以选择Packed或者Minified
• Packed和Minfied版本都去掉了多余的空格和注释，不同的是Packed版本还对源代码进行编码，因此体积要比Minified版本还要更小。但是万事总是有利有弊，使用Packed版本，客户端需要花费一定的时间来解压代码。

简单的例子(HTML)如下：

<html>
<head>
<title>My first jQuery</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
//下面是jQuery的代码
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>
</head>
<body>
<h2>jQuery 简单例子</h2>
</body>
</html>

注：你可以根据需要修改上面的jQuery代码，在接下来的文章里我将详细介绍一些具有代表性的使用方法。

...阅读全文

jQuery 显示PHP源代码

我在上篇文章里介绍了如何运用jQuery来显示页面源代码，该方法简洁易用，但是有个缺点：不能显示动态源代码。例如，你用它来显示PHP代码，得到的实际上是PHP被执行后产生的HTML代码。本文将介绍如何显示PHP代码本身。其实要显示PHP代码并不难，PHP库就自带有下面两种方法，它们不但可以显示PHP代码，而且还具有语法加亮的功能。

• highlight_file (string $filename [, bool $return]) //输入为文件
• highlight_string (string $str [, bool $return]) //输入为字符串

默认情况下，以上两种方法直接打印输出，也就是说你不用加echo。如果你想要让它们输出结果做为返回值，你可以加入第二个参数，例如：$result = highlight_file ($file, true);

本文要介绍的方法用到highlight_string，步骤如下：

1.创建一个PHP文件，这里命名为hlight.php

<?php
$file = isset($_POST['file'])? $_POST['file'] : "";
$content = file_get_contents($file);
highlight_string($content);
?>

2. 对上篇文章里的Javascript稍作修改，如下：

<script type="text/javascript">
  $( document ) . ready ( 
   function() {
    $('a.sourcecode').each (
      function( i ) {
        $( this ).after( '<pre class="sourcecode"></pre>' );
      }
    )
    $( 'pre.sourcecode' ).hide();
    $('a.sourcecode').toggle ( 
      function() {
      if( !this.old ){
      this.old = $(this).html();
      }
      $(this).html('隐藏代码');
        showCode(this);
      },
      function() {
        $(this).html(this.old);
        $(this.nextSibling).hide();
      }
    )
    function showCode(o){
      if(!o.nextSibling.hascode){
       var rel = o.href.split("/");
       $(o.nextSibling).load("hlight.php",{"file":rel[rel.length-1]});  
          o.nextSibling.hascode=true;
      }
      $(o.nextSibling).show();
    }
  }
)
</script>

3. 链接代码:

<a href="simple-test-system.php" class="sourcecode">
显示源代码(直接显示php代码)</a>
<!--href里php文件必须是和页面在同一个路径下-->

实际上，这种方法也适用于显示HTML，Javascript，CSS等代码。当然如果你不想显示PHP代码，则必须使用上篇文章中介绍的方法。

演示：显示php代码

...阅读全文

jQuery 显示页面源代码

如果你的网站是有关编程教程的，那么你一定常常要在页面显示源代码，特别是在那些演示页面。虽然用户可以通过右键点击查看页面源代码（大部分浏览器都有这个功能），但是这不如直接在页面上点击一个链接，然后在同一个页面上显示代码来的简单方便。下面就要介绍如何使用jQuery来实现这个功能。

首先我们要个显示代码的链接，并且给这个链接加上一个class，这样就可以让显示代码功能只有在这一类的链接上有效。

1. 链接代码：

<a href="showSource.js" class="seeCode">查看代码</a>
<!--注意:
这里的href是指你要查看的源代码的文件名。
如果是当前页，你可以用href=“#” 更正（2009/1/20)：用‘#’的方法在IE下行不通。
-->

2. Javascript代码：

<script type="text/javascript">
  $( document ) . ready ( 
  function() {
    $('a.seeCode').each (
      function( i ) {
        $( this ).after( '<pre class="seeCode"></pre></div>' );
      }
    )
    $( 'pre.seeCode' ).hide();
    $('a.seeCode').toggle ( 
      function() {
    if( !this.old ){
      this.old = $(this).html();
    }
        $(this).html('隐藏代码');
        parseCode(this);
      },
      function() {
        $(this).html(this.old);
        $(this.nextSibling).hide();
      }
    )
    function parseCode(o){
      if(!o.nextSibling.hascode){
          $.get (o.href, //注意：这里用到ajax - .get()
            function(code){
              code=code.replace(/&/mg,'&#38;');
              code=code.replace(/</mg,'&#60;');
              code=code.replace(/>/mg,'&#62;');
              code=code.replace(/\"/mg,'&#34;');
              code=code.replace(/\t/g,'  ');
              code=code.replace(/\r?\n/g,'<br>');
              code=code.replace(/<br><br>/g,'<br>');
              code=code.replace(/ /g,'&nbsp;');
              o.nextSibling.innerHTML=code;
              o.nextSibling.hascode=true;
            }
          );
      }
      $(o.nextSibling).show();
    }
  }
)
</script>

注意：上述代码用到ajax 的.get()方法,通过给定的代码href，得到代码运行的结果。这种方法可以直接显示css、javascript、html等静态的代码。但是不能显示的动态代码，例如：php文件，用这种方法得到的实际上是php运行的结果。我会在以后的文章里介绍如何显示php文件。

另外，从上述代码里我们还可以看到，代码会被显示在“seeCode”class的链接下，并且被放在<pre>标签里，所以我们有必要给<pre>加上css样式，这样显示的代码就比较容易和页面的其他内容区分开来。

3. CSS代码：

pre {
  padding: 5px;
  color: #000;
  background-color: #DDD;
  border: 1px solid #CCC;
  line-height: 1.1em;
  overflow: auto;
}

演示：1. 显示HTML  2.显示php代码运行结果

...阅读全文

HTTP_REFERER在IE7下不工作

一般情况下在PHP里，我们可以通过HTTP_REFERER环境变量获得用户是从那个网页进入当前页面的（也有人称之为“来路”），使用方法为：

<?php
echo getenv("HTTP_REFERER");
//OR
echo $ENV{'HTTP_REFERER'};
?>

但是，HTTP_REFERER并不是万无一失的，因为有些浏览器在进入新页面时并不会送出这个变量。这几天公司的网站在增加在线咨询功能，为了更好回答用户碰到的问题，我们想知道用户是从那个页面进入在线咨询上的。当用户点击页面上的在线咨询按钮后会打开一个用户信息表单，这一步我用到HTTP_REFERFER把用户来路网址写入在表单，做为一个隐含值；当用户填好相关信息提交表单后这个隐含值被送给聊天引擎，这样客服人员就可以知道用户是从哪里进入在线咨询了。这种方法在Firefox下工作的很好，但是这IE7下却不工作。没办法，只好改用Javascript在用户点击按钮时，把来路网址作为一个参数传递给PHP文件。具体代码如下，

HTML/Javascript代码：

<a href="#" onClick="window.open(\'/chat/chat.php?di=24395&ref='+location.href+'\',\'custclient\',\'width=500,height=470,scrollbars=0\');return false;">
  <img src="images/livechattile_on_rtnav.gif" border="0">
</a>

注意：在调用chat.php时，当前网址location.href被当成一个参数。另外值得一提的是单引号内javascript变量的写法，必须使用 '+location.href+' ，而不是直接插入location.href。

PHP代码：

//$ref = getenv("HTTP_REFERER");
//getenv在IE7下行不通，所以改用$_GET
$ref = ($_GET['ref'])? $_GET['ref'] : "";

...阅读全文

Javascript 执行顺序

Javascript是执行顺序是至上而下的，除非你特别说明, Javascript代码不会等到页面加载完毕后才执行。比如一个网页里含有以下HTML代码：

<div id="ele">welcome to 61dh.com</div>

如果你在这行HTML代码前，加入如下Javascript代码：

<script type="text/javascript">
  document.getElementById('ele').innerHTML= 'welcome to my blog';
</script>

运行该页面，你会得到这样的错误信息：“document.getElementById(‘ele’) is null。”原因是，当上面的javascript运行时，页面上还没有ID为‘ele’的DOM元素。

解决办法有两种：

1. 把javascript代码放在HTML代码之后：

<div id="ele">welcome to 61dh.com</div>
<script type="text/javascript">
  document.getElementById('ele').innerHTML='welcome to my blog';
</script>

2. 等到在网页加载完毕后，运行该javascript代码。你可以使用传统的解决办法（load）：首先加HTML的body加入“<body load="load()”>,”然后在load()函数里调用上述javascript代码。这里要着重介绍的是用jQuery来实现：

<script>
$(document).ready(function(){
   document.getElementById('ele').innerHTML= 'welcome to my blog';
});
</script>
//当然,既然用到了jQuery,更简单的写法是：
<script>
$(document).ready(function(){
   $('#ele').html('welcome to my blog'); //这里也可用.text()方法
});
</script>

你可以把上述jQuery代码放在页面的任何位置，它总是等到页面加载完毕后才执行。

...阅读全文

jQuery bind and unbind (绑定和解除)

我在上两篇文章：jQuery对事件的处理和jQuery节点克隆里介绍了实现事件的委派和传递的两种不同方法。在这边文章里，我将介绍另外一种方法：递归绑定法(recursive binding)。jQuery里的.bind()方法，其实是一种对事件处理的通用写法。例如点击事件：.click(), 可以写成 .bind(‘click’)。而.unbind()，顾名思义就是解除事件处理。

我们依旧使用同样的例子:

 <div>
   <ul id="list1">
     <li>非按钮 </li>
     <li><button>点击我</button> </li>
   </ul>
 </div>

当点击按钮，新的按钮被加入列表，并且事件被传递，也就是说点击新的按钮，也可以产生按钮。下面是递归捆绑法：

function addItem() {
  $('#list1 li button')
  .unbind('click')//解除click事件
  .bind('click', function(){
  var $newLi = $('<li><button>新按钮</button></li>');
  $(this).parent().after($newLi);
  addItem();//使用递归函数重新赋值
  });
}
$(document).ready(function() {
  addItem();
  // 以下是原始事件绑定
  $('#list1 li button').click(function() {
  $(this).after('原始绑定');
  });
});

注意：在递归函数里，我们必须先解除事件然后再绑定事件，这么做是为了防止按钮的事件被多次捆绑。

演示：

• 非按钮

通过上面的演示，你可能发现一个问题：点击最初的按钮，你没有看到“原始绑定”这几个字别加在按钮后面。虽然在代码里，我定义了原始事件捆绑，但是在递归函数addItem()里，这原始事件被解除(unbind)了。如何让unbind函数只解除新的事件而保留原始事件呢。其中一种办法是，使用“命名空间”（namespacing）

代码：

function addItemNS() {
  $('#list2 li button')
  .unbind('click.addit')//这里加上了addit，建立命名空间
  .bind('click.addit', function() {
    var $newLi = $('<li  > <button>新按钮</button></li>');
    $(this).parent().after($newLi);
    addItemNS();
  });
}
$(document).ready(function() {
  addItemNS();
  //原始事件捆绑
  $('#list2 li button').click(function() {
  $(this).after('原始捆绑');
  });
});

演示：

• 非按钮

...阅读全文

jQuery Cloning Nodes(节点克隆)

jQuery的clone(boolean)方法可以复制DOM的元素，然后移动到别的地方。特别是jQuery1.2不仅可以复制元素的内容，而且还可以复制元素对事件的处理方法（event handling）。我在上篇文章里介绍了jQuery对事件的委派和传递，本文将介绍如何用jQuery的Clone方法来实现相同的目的。

下面是上篇文章(例子三)里用到的的HTML无序列表(unsorted list):

 <div>
   <ul id="list2">
     <li>非按钮 </li>
     <li><button>点击我</button> </li>
   </ul>
 </div>

如果使用默认的克隆方法如下，我们只能复制节点元素，元素的事件处理并没有被传递。

代码：

$(document).ready(function() {
  $('#list2 li button').click(function() {
  var $parent = $(this).parent();
//这里this是button，所以$(this).parent()是li
  $parent.clone().insertAfter($parent);
//li被克隆后，插入到li的后面
  });
});

演示：

• 非按钮

为了让元素的事件处理也被传递，我们必须使用参数true。

代码：

$(document).ready(function() {
  $('#list3 li button').click(function() {
  var $parent = $(this).parent();
  $parent.clone(true).append('我是克隆的').insertAfter($parent);
  });
});

演示：

• 非按钮

...阅读全文

jQuery Event Handling (事件处理)

CSS是用来定义页面元素的样式，通常在页面加载时，这些样式会被运用。CSS本身并不管何时运用这些样式，而Javscript可以根据不同的事件做出不同的反应（例如，运用不同的CSS样式），它在一定程度下活用了CSS。这就是CSS和Javascript之间最大的，也是最重要的区别。本文将介绍jQuery是如何识别和处理事件（event handling）。

1. 例子一：特定selector的点击

对class为“alert”的按钮点击将触发报警。

代码：

$(document).ready(function() {
  $('button.alert').click(function() {
   alert('欢迎光临61dh.com!');
  });
});
<button class="alert">特定点击</button>

演示：

2.例子二：点击事件只发生1次

ID为“create-button”的链接被点击后，将在该链接后创建一个按钮，但是如果该按钮已经存在，将不再创建。

代码：

$('#create-button').click(function() {
  if ( $('button.new').length <1) { //根据需要这里可以设‘length’为不同的值
  $('<button class="new">刚创建的按钮</button>').insertAfter(this);
}
});
<button id="create-button">创建一个按钮</button>

演示：

3.例子三：事件的委派、传递

当列表里的一列被点击，新的列被加入列表。如果想让新加入的列也具有相同的事件控制，我们可以使用事件委派，把事件处理方法传递给新的列。

代码：

$(document).ready(function() {
  $('#list2').click(function(event) {//注意：这里加入了参数：event
  var $newLi = $('<li class="special"><button>新按钮</button></li>'); 
  var $tgt = $(event.target); //注意：这里用到target函数
  if ($tgt.is('button')) { 
    $tgt.parent().after($newLi); 
  }//这里用到，is()函数来判断当前点击元素的属性，如果是按钮就触发事件。 
  }); 
});

演示：

• 非按钮

...阅读全文

jQuery 控制表单里键入回车键

默认情况下，在表单(form)的输入框(input)里按回车将会提交(submit)表单。这会造成一个问题：当用户在填写表单时不小心按了回车键(特别是输入框含有历史记录时，这种情况经常发生)，这时不完整的表单会被提交。我们可以通过Javascript来屏蔽回车键，这样当用户键入回车键，表单就不会被提交，而且我们还可以根据需要执行别的任务，例如把光标移到下一个输入框。这样不但屏蔽了回车键误提交表单，而且还方便了用户，一举两得！

jQuery代码如下:

<script type="text/javascript">
$(document).ready(function(){  
  $("input").keypress(function (e) {
     var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
     if (keyCode == 13){    
      var i;
      for (i = 0; i < this.form.elements.length; i++)
        if (this == this.form.elements[i])
          break;
      i = (i + 1) % this.form.elements.length;
      this.form.elements[i].focus();
      return false;
     } 
     else
     return true;
   });  
});
</script>

用法：jQuery的一个优点是不用对HTML代码做改动或者做很小的改动，因此，只需把以上代码加入到HTML文档，就可以正确地处理回车键的响应。

演示：jQuery控制回车键

...阅读全文

防止jQuery Load使用缓存的方法

缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中，我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。

jQuery Load样本代码：

$(document).ready(function(){
  $("#labels").load("/blog/categories/labels.html"); 
  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。
});

当我更新了labels.html以后，在IE7里load方法仍旧在使用旧的labels.html，就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法，把下面的语句加在head的javascript文件里，就可以解决问题。

$.ajaxSetup ({
    cache: false //关闭AJAX相应的缓存
});

此外我再介绍几种方法解决缓存的方法。注意：我没有在jQuery load的问题上测试过，这些方法仅供参考！

1.更改文件名，比如把labels.html改成lables_new.html，但是这是没有办法的办法，一般没有人这么做。

2.在labels.html后加上特定时间，比如lables.html?20081116。在实际工作中，在我更新css/javascript文件后，我都是用这种办法来防止文件被缓存。

3.在labels.html文件的顶部加入以下声明：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

4.load函数不仅可以调用HTML，也可以调用script，比如labels.php，可以在php文件里使用header函数：

<?php
header("Cache-Control: no-cache, must-revalidate");
?>

11/20更新 -- 想要对load有更多了解，请读这篇文章 jQuery load的详解

...阅读全文

jQuery Load的简介

jQuery提供的ajax接口，其中的一种方法load，可以非常方便的调用服务器端的HTML，然后插入某个DOM元素里。我的博客使用Blogger日志引擎，每次更新页面一个元素的内容，就要修改模板，然后重新发布修改每一个相关的帖子，非常的没有效率。例如本博客边侧栏的“日志分类”和“收藏我的日志”栏目，其中的内容经常要更新。我就是用jQuery提供的load的方法，把这些栏目的内容存放在独自的HTML文件里，然后在页面装载的时候自动导入。具体方法如下：

1.日志分类HTML，labels.html（样本）

<h2 class="sidebar-title">日志分类</h2>
<ul>
  <li><a href="/blog/categories/css.html" >CSS</a>&nbsp;(11)</li>
  <li><a href="/blog/categories/html.html">HTML</a>&nbsp;(6)</li>
</ul>

2.模板边侧栏HTML（样本）

<div id="sidebar"> <!--日志边侧栏-->
  <div id="labels"></div> <!--日志分类栏目-->
</div>

3.jQuery代码

$(document).ready(function(){
  $("#labels").load("/blog/categories/labels.html"); 
  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。
});

这样一来，当我要对日志分类栏目的内容更新时，就不用去更改日志模板、重新发布更改每一个相关帖子了。我只要更新labels.html代码就可以了。

11/20更新 -- 想要对load有更多了解，请读另外两篇文章：

1. 防止jQuery Load使用缓存的方法
2. jQuery load的详解

...阅读全文

jQuery对页面元素的批量处理

我在日志里介绍过&nbsp;和空格的区别。为了避免段落的最后一个单词被孤零零的放在第二行，我们可以用" "来代替最后一个空格。例如：

替代前：

<h2>Well done is better that well said</h2>
<h2>A jouney of a thousands miles stats with a single step</h2>
<h2>Do first things first, and second thing not at all</h2>

替代后：

<h2>Well done is better than well&nbsp;said</h2>
<h2>A jouney of a thousands miles stats with a single&nbsp;step</h2>
<h2>Do first things first, and second thing not at&nbsp;all</h2>

如果我们不想手动去修改HTML代码，那么我们可以用jQuery来实现。下面分别介绍三种方法：数组法、字符串法、替代法。

1.数组法

先把标题分成一个个单词存入数组，然后再把它们还原的时候，在最后一个单词前加入" "。

$(document).ready(function() {
  var h2Text = '';
  $('h2').each(function() { //在jQuery里我们用'each'来获取所有'h2'页面元素
  var h2Array = $(this).text().split(' '),
  h2Last = h2Array.pop();//注意使用pop后，h2Array将不含最后一个成员
  h2Text = h2Array.join(' ') + ' ' + h2Last;
  $(this).html(h2Text);
  });
});

2.字符串法

这种方法将用到字符串的slice函数和lastIndexOf函数。slice函数可以把一个字符串的特定区间取出，例如:

$str = "abcd efg hi"
$part1 = $str.slice(0,3); //把$str的开始4个字符取出，得到：abcd
$part2 = $str.slice(10);  //把$str从第10个字符开始截取到最后，得到：hi

lastIndexOf(' ')顾名思义就是指最后一个空格的索引位置。有了这两个函数，我们就可以把字符串分成两个部分，第二个部分含有最后一个单词，接着，把第二部分加入"&nbsp"，然后再把两个部分合并。

$(document).ready(function() {
  var h2all, h2a, h2b;
  $('h2').each(function() {
  h2all = $(this).text();
  h2a = h2all.slice(0, h2all.lastIndexOf(' '));
  h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
  $(this).html(h2a + h2b);
  });
});

3.替代法

这个方法用到正则表达式，和前两种方法相比，显得要简洁许多。

$(document).ready(function() {
  var h2Text = '';
  $('h2 a').each(function() {
  h2Text  = $(this).text().replace(/ (\S+)$/,' $1');//\S代表非空格字符
  $(this).html(h2Text);
  });
});

 

...阅读全文

Javascript 控制文本框的默认值

HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。Blabla网对表单有详细的介绍，这里不再重复。下面要介绍的是，如何用简单的Javascript语句对表单里文本框的默认值进行操作。

为了让用户知道文本框里应该填写什么，我们通常会给文本框一个默认值。为了方便用户，当用户的鼠标点击文本框，我们希望文本框里的默认值被清空；当用户的鼠标离开文本框，如果文本框是空的，我们希望把文本框的值设回默认值。要实现这些，我们要用到Javascript的事件触发。这里用到是：onFocus（聚焦，也就是鼠标点入文本框）和onBlur（模糊，也就是鼠标离开文本框）。

Javascript函数：

function clearDefault(el) {//清空
  if (el.defaultValue==el.value) el.value = "";
}
function resetDefault(el){// 重设
  if (el.value == '') el.value=el.defaultValue;
}

有了以上函数，我们就可以在表单的任意一个文本框里（text或者textarea）调用这两个函数：onFocus时调用clearDefault(this)；onBlur时调用resetDefault(this)。例如：

<form>
Lastname: <input type="text" style="color:#666" name="lastname" value="你的姓" 
     onfocus="clearDefault(this)"; onblur="resetDefault(this);" />
<br /><br />
Firstname: <input type="text" style="color:#666" name="firstname" value="你的名" 
    onfocus="clearDefault(this);" onblur="resetDefault(this);"  />  
<br /><br />
个人简介：
<br /><br /> 
<textarea cols="60" rows="5" name="msg" onfocus="clearDefault(this);">
  最多100个字，不含空格
</textarea>         
</form>

实例演示

...阅读全文

jQuery自动识别外链接

每个网站多多少少都会有一些外链接。（题外：我的博客开通时间不长，还没开始和别人交换链接。如果有兴趣，请和我联系！）Web2.0时代，网站的外链接一般都会加上一个外链接的图标。本文将介绍如何借助jQuery来自动识别页面上的外链接，并且给外链接加上图标。你或许会有疑问：如果一个页面有许多的外链接（比如www.61dh.com这样一个少儿网址站），这么做会造成整个页面都是外链接图标。不用担心，本文介绍的方法，可以识别特定区域的外链接。

首先，让我们看看如何用Javascript来判断域名。比如你访问的页面网址为：http://www.61dh.com/blog/， 使用下面Javascript语句，将得到：www.61dh.com；但是如果你访问的页面网址是http://61dh.com/blog/，使用下面的Javascript语句，将得到：61dh.com。

var hname = location.hostname;
//把该语句插入HTML文档的<head>,你将得到该页面的域名

知道了当前页的域名后，我们可以通过比较页面内链接的域名和当前页的域名来判断该链接是否为外链接，同时我们还要判断当前连接是否含有域名，这样就可以排除mailto类型的链接。

接下来，要用到jQuery的过滤（filter）函数， 比如：你要识别外链的区域ID为“sidebar”，你可以通过过滤函数以及上面的识别外联的方法把外联滤出，然后用jQuery的‘after’函数把外链图标加上。具体代码如下：

$(document).ready(function() {
  $('#sidebar a').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link">');
});

注意：使用以上代码，#sidebar区域内的链接包括图片链接，都会被加上外链图标。如果你不想在图片链接上再加入外链图标，你可以对代码稍作修改，如下：

$(document).ready(function() {
  $('#sidebar a:not(has(img))').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link">');
});
//#sidebar a:not(has(img))指的#sidebar区域内非图片链接

最后还有一个非常重要的提示，假设一个页面的站内链接用的是绝对路径，例如：<a href="http://www.61dh.com/blog/2008/10/10.html">10大最吃香的网站开发技术</a>。 当你访问该页面用的是http://61dh.com时, 你会发现，location.hostname（61dh.com） !== this.hostname（www.61dh.com）， 从而造成误判断。解决办法是通过字符串匹配，来确保hostname总是包含www。具体代码如下：

$(document).ready(function() {
  var phost = location.hostname; //页面主机名
  if (!phost.match("^www")){
  	phost = "www\."+phost;
  }
  $('#sidebar a:not(:has(img))').filter(function() {
    var lhost = this.hostname; //链接主机名
    if (lhost && !lhost.match("^www")){
  	lhost = "www\."+lhost;
    } 
    return lhost && lhost !== phost;
  }).after(' <img src="/images/external.png" alt="external link">');
});

演示：www.61dh.com/blog 见右侧栏里的蓝色外链标签 (updated: 图标被改成灰色）

补充：(1/8/2009)

我在右侧栏加入了友情链接 - 注意“灰色外链接图标”

...阅读全文

jQuery 下拉选择菜单

下拉选择菜单在网页制作里很常用，我们做网页的或多或少都要用到它。在这篇文章里我将介绍运用纯JavaScript和jQuery两种方法来实现对下拉菜单的选择。通过比较两种不同的方法，你或许会发现运用jQuery library 简化了Javacript的编码。

1. 运用纯Javascript编码实现单选下拉菜单。

<html>  
<head>  
    <title>www.61dh.com站内链接例子</title>  
    <script>  
    function onSelectChange(){  
        var dropdown = document.getElementById("link");  
        var index = dropdown.selectedIndex;  
        var ddVal = dropdown.options[index].value;  
        var ddText = dropdown.options[index].text;            
        if(ddVal != 0) {
          window.location=ddVal
        }             
    }  
    </script>  
</head>  
<body>        
    <h3>61dh站内链接</h3>  
    <select id="link">
       <option value="http://www.61dh.com/playground/game.html">游戏</option>  
       <option value="http://www.61dh.com">主页</option>  
       <option value="http://www.61dh.com/caipiao">彩票</option>  
       <option value="http://www.61dh.com/blog">博客</option>                              
    </select>
    <button onClick="onSelectChange();">选择</button>
</body>  
</html> 

2. 运用jQuery Library

<script type="text/javascript" src="/js/jquery.js"></script>  
<script>  
   $(document).ready(function(){
      $('#select').click(function(){
         window.location= $("#link option:selected").val()});          
      });  
</script>  

用上面的代码代替方法一里的Javascript。因为这里对onClick事件触发函数的调用被写在Javascript里："$('#select').click(function()"，所以我们可以移除HTML里的对onClick函数调用，然后加上id="select",jQuery用这个id来识别onClick事件发生的对象。

<button onClick="onSelectChange();">选择</button> <button id="select">选择</button>

演示：站内下拉菜单链接

...阅读全文

jQuery 编写滚动标语或者图片的代码

jQuery让JavaScript代码变得简单，这里将介绍如何用它来实现滚动的标语，新闻，或者图片，等等。

1. JavaScript:

/*jquery.js可以在jQuery.com下载，当然你也可以用我的这个*/
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
/* 滚动文字 应用Jquery 
** By Adam Cai
** http://www.61dh.com
*/
var a=0;
var b=1;
var t;
$(document).ready(function(){
	t= setInterval("roll(a,b);", 3000); //时间间隔为3秒
});
function roll (off,on){
	clearInterval(t);
	var $firstNode = $('#motto>p'); //#motto 是DIV的ID,'p'是该区间的段落          
	$firstNode.eq(off).fadeOut('slow',function(){  
		$firstNode.eq(on).fadeIn('slow');
	});
	if(on==($('#motto>p').length-1)){
		a=on; //on 指DIV里最后一个P
		b=0;
	}
	else if(off==($('#motto>p').length-1)){
                //当最后一个准备关闭，a, b 重新赋值
		a=0;   
		b=1;
	}
	else{
		a++;
		b++;
	}
	t = setInterval ("roll(a, b);", 3000);
}
	
</script>

HTML：

<div id="motto">
   <p style="display:block"> 
      <img src="http://www.61dh.com/images/61dh.png" border="0"/>
   </p>
   <p style="display:none">
      <img src="http://img.baidu.com/img/logo-zhidao.gif" border="0"/>
   </p>
   <p style="display:none">
      学的有趣，玩的开心
    </p> 	
</div>

运用：只要把要滚动的文字，新闻，或者图片，放在<p></p>之间就可以了。 第一个p的display设为‘block’，其它的设为‘none’。当页面装载完毕，上面的JavaScript脚本就会自动更改display的属性，实现滚动效果。

演示：jQuery滚动效果

...阅读全文

JavaScript 随机弹出网页

我在日志里介绍过JavaScript 随机数生产器，今天在百度知道看到有网友提问关于如何用JavaScript做随机弹出网页。这个其实不难，只要在JavaScript 随机数生产器的基础上加个JavaScript 弹出窗口的代码就可以了。

代码如下：

<html>
<head>
  <script language="javascript">
  function p(url,wid,hei) {
     window.open(url,'newwin','status=no,resizable=yes,
        scrollbars=yes,width='+wid+',height='+hei+',left=20,top=20');
  }
  function rdm(){
  /*根据需要，修改下面的弹出窗口的地址*/
    pages = new Array(4);
    pages[0] = "http://www.61dh.com";  
    pages[1] = "http://www.61dh.com/blog";
    pages[2] = "http://www.61dh.com/caipiao";
    pages[3] = "http://www.61dh.com/guestbook";
    index = Math.floor(Math.random() * pages.length);
    /*调用弹出窗口的函数，根据需要设置宽和高*/
    p(pages[index], 600, 600); 
  }
  </script>
</head>
/*如果需要访问页面的时候弹出, 用<body onLoad="radm();">*/
<body onLoad="rdm();">
  <button onClick="rdm();">弹出窗口</button>
</body>
</html>

演示1：

演示2：访问该页：随机弹出页面

...阅读全文

快速选择区域内的内容（Select All）

通常我们都是通过鼠标拖拉来选择一个区域内的内容，当区域内的内容很多，我们会发现用鼠标拖拉很不方便，一不小心就会选到不想选的区域。为了方便用户，我们可以通过建一个快捷按钮，当用户点击这个按钮，相应的区域内的内容就被选中。

1. 如果特定区域是文本框<textarea>或者文本输入框<input>，那么实现这个快捷全选就很简单：

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>
文本区:<br>
<textarea rows="3" id="txtarea" 
onClick="SelectAll('txtarea');" style="width:200px" >
点击该区域,或者点击下面按钮,就可以选中本段文字！ 
</textarea><br>
<button onClick="SelectAll('txtarea');">全选1</button>
<br>
文本输入框:<br>
<input type="text" id="txtfld" 
onClick="SelectAll('txtfld');" style="width:200px" 
value = "点击全选这段文字！" />

文本区:
点击该区域,或者点击下面按钮,就可以选中本段文字！

文本输入框:

2. 如果特定区域是<div>,那么用.foucs() 和。select()就不灵了。幸运的是我们可以使用别的Javascripts方法来实现：

<script language="javascript">
function highlightText(myDiv){
if (document.selection) {
 var r1 = document.body.createTextRange();
 r1.moveToElementText(document.getElementById(myDiv));
 r1.select();
} else {
 s = window.getSelection();
 var r1 = document.createRange();
 r1.setStartBefore(document.getElementById(myDiv));
 r1.setEndAfter(document.getElementById(myDiv));
 s.addRange(r1);
}
}
</script>
/*myDiv 为你要选择的区域的ID*/

特定区域(div):

点击下面按钮，这段文字将被选择！

...阅读全文

JavaScript 随机数生产器

随机数在一些常用的JS应用程序中挺有用的。比如说，建立投掷骰子模拟，随机图片，随机链接等等。用JavaScript产生随机数很简单，用下面的一行代码就可以实现:

var randomnumber=Math.floor(Math.random()*N)

这里N表示要产生的随机数的最大值减去1。比如当N=11，那么所产生的随机数就落在0-10之间。如果我们想要增大随机数的取值范围，只需增大N就可以了。

下面是在百度知道了一个网友的提问：

我用这个调用网页，我想实现每次刷新就调用不同的网页，各个网页我可以预设
这样的该怎么写呢？

其实这位网友已经找到了一段代码如下，我认为用这段代码就可以实现所需的功能了。

<p id="random-test">changeme</p> 
<script Language="javascript">
tips = new Array(4);
tips[0] = "1.htm";
tips[1] = "2.htm";
tips[2] = "3.htm";
tips[3] = "4.htm";
index = Math.floor(Math.random() * tips.length);
document.getElementById("random-test").innerHTML=tips[index];
/*加入这行用来调测。每次页面刷新，随机产生的'tips'就被显示在Id为'random-test'
的P元素里*/
//document.write("<iframe frameborder=0 src=" + tips[index] + " 
//width=468 height=60 scrolling=no></iframe>");
</script> 

通过刷新页面来改变以下随机变化值，注意：因为随机数的范围比较小，所以很可能刷新后看不到变化，多刷新几次就可以了。

3.htm

...阅读全文

JS正则表达式验证邮箱

请输入一个有效的邮箱:

你输入的邮箱是有效的。谢谢！

 

HTML代码：

<div>
请输入一个有效的邮箱:<br />
<input type="text" size=18 id="email" onFocus="clearForm();" /> 
<input type="button" onClick="validate();" value="验证" />
</div>
<div id="e-result" style="display:none">
你输入的邮箱是有效的。谢谢！
</div>

JavaScript:

<script language="JavaScript1.2">
function vEmail(){
	var str=document.getElementById('email').value;
	if (str.length == 0){
		alert("邮箱不能为空");
		return false;
	}
	var rule=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	if (rule.test(str))
		return true;
	else{
		alert("请输入有效邮箱!");
		return false;
	}
}
function validate(){
   if (document.layers||document.getElementById||document.all){
      if(vEmail()){
         document.getElementById('e-result').style.display="block";
      }
   }
}
function clearForm(){
    document.getElementById('e-result').style.display="none";
    document.getElementById('email').value="";
}
</script>

...阅读全文