2009年10月22日星期四
今天做了一个简单的jQuery测试工具，把它命名为jTester。Google了一下好像这个名字已经有好多人在用，应该没有什么命名侵权的问题吧。:-)
做这个测试工具的原因是，我经常要测试一些jQuery代码，每次都要建立一个新文件，然后还要在header里引用jQuery库，觉得挺麻烦的。现在有了这个工具，我只要在文本框里直接写入HTML正文部分(包括HTML代码和jQuery代码)，然后点击按钮就可以查看结果了。
我写的jQuery基础系列文章里有很多jQuery代码片段，初学jQuery的朋友可以把代码直接粘贴到jQuery Tester里，然后进行修改和测试。
这个测试工具是根据著名W3SCHOOLS在线测试工具修改而来，目前功能很简单，准备在今后加入一些新功能，例如：
有兴趣的朋友可以试试看，如果你觉得好用，请推荐给你的朋友；如果你有任何意见或者建议，请留言。谢谢！
2009年10月5日星期一
最近一段时间在项目开发里用了许多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' //注意不可以加逗号};
标签： Javascript, Jquery
2009年7月26日星期日
今天在给我的cpzhan.com写一个很小的API，主要是在服务器端提供一组数据，如果按照往常我会使用XML，但是最近在学习json，所以就json来试试。按照我上篇日志的介绍，代码如下：
<?phprequire("../lib/config.inc.php");require("../lib/Database.class.php");$db = new Database($config['server'], $config['user'], $config['pass'], $config['database'], $config['tablePrefix']);// connect to the server$db->connect();$sql = "SELECT * FROM results ORDER BY UID DESC LIMIT 1";$row = $db->query_first($sql);$current_year = date('Y');$year = $row['Year'];$row['Next_Term'] = ($current_year == $year) ? ($row['Term'] + 1) : 1;$row['Next_Year'] = $current_year;$row['Next_DRAW_DATE'] = date('Y-m-d');//上面的代码产生一组数组，然后用json_encode($row)产生json格式的字符串echo json_encode($row);?>
接下来，我在本地又写了一段代码，准备用来掉用上面写好的api，然后用json_decode, 把数组还原。
<?php$url = 'http://www.cpzhan.com/api/getTerm.php';$jsonfeed = file_get_contents($url);echo $jsonfeed;//这里我收到到了json格式的字符串$result = json_decode($jsonfeed, true);print_r ($result);//!!!但是这里无法还原编码前的数组?>
不知道什么原因，json_decode无法还原编码前的数组。很明显，我上面写的api输出的字符串无法被json_decode识别，但是API的输出看上去的确是合法的json格式。我还试着给api的输出加上header如下， （終于找到原因了, 見netbean-ide一文的介绍)
<?phpini_set('display_errors', 0);header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );header("Cache-Control: no-cache, must-revalidate" );header("Pragma: no-cache" );header("Content-type: application/json; charset=utf-8");.....
但是还是没有起任何作用。最后我放弃了这种方法，改用我曾经介绍过的jQuery获取JSON数据的方法：
<script>$.getJSON("http://www.cpzhan.com/api/getTerm.php?callback=?",function(data){//data这里是JSON对象，它可以是由多个JSON对象组成$("#year").val(data.Next_Year);$("#term").val(data.Next_Term);$("#date").val(data.Next_DRAW_DATE);});</script>
一开始，我收到错误信息：invalid label，上网搜索了一下终于找到了原因，原来jQuery在调用getJSON的时候会在callback后自动加上值，因此我的产生JSON数据的时候要加上callback， 并且要用大括号把encode后的JSON数据包裹。如下：
<?phpini_set('display_errors', 0);header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );header("Cache-Control: no-cache, must-revalidate" );header("Pragma: no-cache" );header("Content-type: application/json; charset=utf-8");//$row是要传递的数组$jsonp = $_GET['callback']; //callback的是jquery自动加入的$myJSON = json_encode($row);echo $jsonp. '(' . $myJSON . ')'; //注意：json_encode的结果被大括号包裹
至于为什么要这么做我还没有搞懂(可能是出于安全的考虑)，但是我想这很可能是我上面用PHP获取JSON数据失败的原因，我们必须对API的输出做特殊处理后，json_decode才可以识别。如果有朋友对JSON精通，请留言告知。谢谢！
2009年6月10日星期三
有网友问：
（博客）左下角那个点击可以上下滑动是怎么制作的。
我在日志里曾经介绍过jQuery 动画卷页。这个特效就是采用类似的jQuery代码，不同的是多了一些CSS代码。下面我将简单介绍如何制作这个特效。
1.html代码：
<div id="footerud"><div id="up"></div><div id="down"></div></div>
注意：你可以把这段代码放在<body>和</body>之间的适当位置，例如：</body>前。
2. css代码：
#footerud{bottom:10px;display:block;position:fixed;left:15px;}#up{background:url(../images/arrowtop.png) no-repeat;cursor:pointer;height:14px;margin-bottom:15px;position:relative;width:25px;}#down{background:url(../images/arrowbottom.png) no-repeat;cursor:pointer;height:60px;margin-top:15px;position:relative;width:25px;}
#up和#down里定义了背景图(也就是上下箭头)，你可以用你喜爱的图片代替，我这两个也是网上找到。注意：../images/指定了图片相对CSS文件的路径，你可能要根据你的实际情况更改。
3. jQuery代码：
jQuery(document).ready(function() {jQuery('#up').click(function(){if(jQuery.browser.safari) {//这里判断浏览器是否为safarijQuery('body').animate({scrollTop:0}, 'slow');return false;//返回false可以避免在原链接后加上#}else{jQuery('html').animate({scrollTop:0}, 'slow');return false;}});jQuery('#down').click(function(){if(jQuery.browser.safari) {//这里判断浏览器是否为safarijQuery('body').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');return false;//返回false可以避免在原链接后加上#}else{jQuery('html').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');return false;}});});
这个在jQuery 动画卷页一文里有介绍，如有不明白的地方请留言。注意：向上翻页比较简单，用scrollTop:0就可以了，但是向下翻页，必须指明你的页面最底部HTML元素，例如：我用到 scrollTop:jQuery('#footerPan').offset().top. 这里#footerPan就是我博客页面底部HTML元素的ID。
2009年4月6日星期一
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>
标签： Javascript, Jquery, PHP
2009年3月22日星期日
我曾经在日志里介绍过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搜索了一下。找到这篇论坛问答，觉得说的挺有道理：
准备明天到公司试试这种方法。其实把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事件控制，而不在页面加载后绑定事件控制。这样就可以避免链接被点击时，事件还没有绑定的问题。 标签： Javascript, Jquery
2009年3月16日星期一
我的日志引擎使用的是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个属性：
知道了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，上面的代码里还有一些小知识点：
标签： Ajax, Javascript, Jquery
2009年3月15日星期日
我花了整整一个星期时间，更新了公司网站的购物结帐系统。主要增加的功能是允许用户在多个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);});
标签： Javascript, Jquery
2009年3月9日星期一
我在日志里介绍了很多使用jQuey load的方法来实现ajax。load()应该是jQuery里ajax的最简单的运用了，你不用了解ajax是怎么一回事，就可以把某个脚本的输出(通常是text/html类型)动态的赋给页面的某个元素(例如div和p)。但是在实际的运用中，你可能会发现load()常常不能满足要求，例如：你想对一个表单的多个控件使用ajax进行更新，可是load()一次只可以对其中一个控件起作用；如果使用多个load()，那么会增加服务器的负荷，因此肯定不是一个好办法。本文要介绍jQuery的ajax()方法，它是类似传统的ajax方法。jQuery的ajax()方法涉及的知识点很多，具体可以参考jQuery中文参考文档。这里要介绍的是如何使用XML数据类型以及如何对XML进行读取。
1.使用PHP输出XML，如果你只是使用echo，那么要注意要先输出正确的header: Content-Type是text/xml。如果你要给XML的某个节点用HTML代码赋值，你必须把HTML放在<![CDATA[" 和"]]>之间。例子如下: genXML.php
<?phpecho "header("Content-Type: text/xml; charset=UTF-8");";echo <<< XML<?xml version="1.0" encoding="UTF-8"?><rsp><name>Adam</name><site>http://www.61dh.com</site><note><![CDATA[HTML代码可以放在这里]]></note></rsp>XML;?>
2. HTML样本：
<div id="name"></div><div id="note"></div>
3.接下来我们要使用jQuery的ajax()方法，读取genXML.php的输出(xml)，然后把相关节点的内容赋给HTML元素：#name和#node。代码如下：
$.ajax({url: "genXML.php", //本例中，url为genXML.phptype: 'GET', //根据实际情况，可以是'POST'或者'GET'//data: "name=adam&location=61dh",本例中没有用到datadataType: 'xml', //指定数据类型timeout: 1000, //设置超时1000 = 1秒error: function(){alert('Error loading XML document'); }, //错误提示success: function(xml){ //ajax请求成功后 do something with xml//把XML的相关节点值赋给HTML里相关ID$('#name').html($(xml).find('name').text());$('#note').html($(xml).find('note').text());}});
我在上面的代码里已经做了比较详细地注释，值得再提的是使用jQuery提供find()的方法可以很简单的读取XML某个节点的值，例如：$(xml).find('name').text(); //读取节点name；然后使用html()的方法赋值给HTML里的某个元素。
注: 我在日志里写了很多有关jQuery的文章而且还挺受欢迎:-)，所以我把它专门作为一个菜单放在上方导航条里。希望这些文章对jQuery初学者有所帮助。如果你有任何的问题和建议，请给我留言或者发Email。谢谢！
2009年3月1日星期日
信息框在网站开发中比较常用，它可以用来引起网站访问者的注意；并且用来转递某种信息。例如Google的个性化主页iGoogle，有时会有一个信息框停靠在页面上方的中部，用来提示用户他们新增了一些功能。信息根据其传递内容的不同大致可以分为3种:
哈哈，是不是和交通灯很相似啊。这里要介绍的两套CSS/HTML信息框，或许它们可以用在你的Project里。
一. 横条型 演示
HTML 代码：
<div class="message notice"><div class="msg_head_img"><a class="close" href="#"><img src="/images/close.gif" border="0"/></a></div>通知提示信息<!--请用实际信息替代--></div><br /><div class="message success"><div class="msg_head_img"><a class="close" href="#"><img src="/images/close.gif" border="0"/></a></div>成功提示信息</div><br /><div class="message error"><div class="msg_head_img"><a class="close" href="#"><img src="/images/close.gif" border="0"/></a></div>错误提示信息</div>
上面的三段HTML代码分别用于显示通知、成功、错误信息。主要的CSS样式有：message、notice、sucess、error。message是共用的，其它三种分别代表不同的信息类型。具体样式表如下：
.message {padding: 5px;border: 2px solid #ddd;background-color: #eee;color: #222;font-size:12px;}.notice {background: #FFF6BF;color: #817134;border-color: #FFD324;}.success {background: #E6EFC2;color: #529214;border-color: #C6D880;}.error {background: #FBE3E4;color: #D12F19;border-color: #FBC2C4;}
二. 框框型 演示
HTML 代码：
<div class="msg_h yellow1"><div class="msg_head_img"><a class="close" href="#"><img src="/images/close.gif" border="0"/></a></div><div class="msg_head_txt yellow2" >信息标题</div><div class="msg_body">通知提示信息</div></div><br /><div class="msg_h green1"><div class="msg_head_img"><a class="close " href="#"><img src="/images/close.gif" border="0"/></a></div><div class="msg_head_txt green2" >信息标题</div><div class="msg_body">成功提示信息</div></div><br /><div class="msg_h red1"><div class="msg_head_img"><a class="close " href="#"><img src="/images/close.gif" border="0"/></a></div><div class="msg_head_txt red2" >信息标题</div><div class="msg_body">错误提示信息</div></div>
和第一套CSS信息框不同的是，这一套包含有标题栏。CSS样式同样包含有共用的class和各自的class，具体如下：
.msg_h{border:2px solid; height:auto; width:300px;}.msg_head_img{float:right; display:inline; padding-top:3px;}.msg_head_txt{padding:5px; font-size:12px; font-weight:normal;}.msg_body{padding:10px;}.yellow1{border-color: #FFD324;}.yellow2{background:#FFD324; color:#817134;}.green1{border-color: #C6D880;}.green2{background:#C6D880; color:#529214;}.red1{border-color: #FBC2C4;}.red2{background:#FBC2C4; color:#D12F19;}
你可能注意到在这两套CSS信息框里都用到了以下HTML代码：
<div class="msg_head_img"><a class="close" href="#"><img src="/images/close.gif" border="0"/></a></div>
这段HTML代码提供了一个可点击的图标，目的是让用户可以自由地关闭信息框。其实这可以根据实际情况改变，如果你想让信息框一直显示，那么你可以把<a>元素去掉，另外还可以换上其它小图标用于装饰。如果你想提供关闭信息框的功能，那么只要使用下面的jQuery语句就可以轻松实现：
演示和代码<script type="text/javascript">$(document).ready(function(){$(".close").click(function(){$(this).parent().parent().fadeOut('slow');});});</script>
2009年2月16日星期一
前两天在百度知道看到一个有关表单验证的问题，提问的网友想知道：
...录入完张三的信息后，再录入张三的名字时会提示已经录入过该人的信息了，弹出信息框的形式提示...
这里的验证需要通过数据库的查询来验证，因此需要另一个PHP文件来执行。并且执行的结果要以弹出信息框的方式出现，因此要用到Javscript。通常的解法应该是使用ajax，具体思路如下：(我采用jQuery提供的ajax方法，这样代码会比较简单)
1. 需要验证的文本框 - HTML代码：
<input name="xm" type="text" id="xm" size="30" />
2. 使用jQuery的ajax方法调用check.php文件并且把结果:
$("#xm").onChange(function(){var name = $(this).val();$.ajax({type: "GET",url: "check.php",data: "name="+name,success: function(repeat){if(repeat)alert( "重复!" );}});});
3. check.php - 检测输入的名字是否已经存在于数据库，如果是返回1，如果不是返回0
<?php$xm=$_REQUEST['xm'];$sql="select count(*) from jinengchaxun where xm='$xm'";mysql_connect(..自己一定写正确哦..);$res=mysql_query($sql);list($cnt)=mysql_fetch_row($res);mysql_free_result($res);mysql_close();return ($cnt>0) ? 1 : 0;?>
注意：我没有测试过这种方法，有兴趣的可以试一下。
另外一种方法用到iframe，是另外一个网友提供的：
/**一、编写一个checkxinxi.php来检测指定的名字是否存在，内容如下：*/<?php$xm=$_REQUEST['xm'];$sql="select count(*) from jinengchaxun where xm='$xm'";mysql_connect(..自己一定写正确哦..);$res=mysql_query($sql);list($cnt)=mysql_fetch_row($res);mysql_free_result($res);mysql_close();echo <<<END<script type=text/javascript>if ($cnt>0) {alert('重复提示：已经录入过 $xm 了！');parent.document.getElementById('chk_rst').innerHTML='重复';}else parent.document.getElementById('chk_rst').innerHTML='新人';</script>END;?>/**二、addxinxi.php进行如下修改既可：*/<input name="xm" type="text" id="xm" size="30" />//修改为：<input name="xm" type="text" id="xm" size="30"onchange="chk_frm.location.href='chkxinxi.php?xm='+this.value;" /><span id=chk_rst></span><iframe name=chk_frm style='display:none'></iframe>
我把原答案里的parent.chk_rst.innerHTML 改成 parent.document.getElementById('chk_rst').innerHTML，因为Firefox不识别parent.chk_rst。
个人感觉，使用iFrame比较简单, 但是iFrame其实是把一个页面隐藏在另外一个页面里，所以执行的时候它需要刷新整个页面。而ajax可以异步更新，所以相对要平滑许多，而且使用jQuery后ajax的书写也变得简单了，所以还是建议使用ajax。
方法二的演示
2009年2月15日星期日
当一个网页内容很长，为了方便读者返回页首，我们通常会在网页底部加上个链接并且把链接的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) {//这里判断浏览器是否为safarijQuery('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的区域里页首的距离
标签： Javascript, Jquery
2009年1月25日星期日
在传统的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语句没有起到任何判断作用。正确的写法应该是：
注意：判断某个页面元素存在与否在jQuery实际上是没有必要的，jQuery本身会忽略对一个不存在的元素进行操作，并且不会报错。if ( $("#someID").length > 0 ) {$("#someID").text("hi");}
标签： Javascript, Jquery, jQuery基础
2009年1月24日星期六
我在前面的文章里介绍了 - 如何添加/移除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类一文提到的方法来改变鼠标划过的链接样式。
标签： Javascript, Jquery, jQuery基础
2009年1月20日星期二
在网页设计中，我们常常要使用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类。
标签： Javascript, Jquery, jQuery基础
2009年1月15日星期四
在前面的文章里，我介绍了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
标签： Javascript, Jquery, jQuery基础
2009年1月11日星期日
我在以前的文章里已经介绍过如何运用jQuery来获取和设置表单元素，因为表单在HTML里非常重要，所以在“jQuery基础”这个系列，我觉得很有必要把jQuery对表单元素的处理做更加详细的介绍。
HTML表单(Form)常用控件有：参考
在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();//注意：如果是复选，那么得到的结果是用逗号分格的字符串，例如："选择一，选择二”。
注意：
$("form").submit(function(){$("input").val();});
标签： Javascript, Jquery, jQuery基础
2009年1月7日星期三
当我们对页面进行操作的时候，常常需要对HTML标签属性(tag attribute)进行处理，这包括获取某个标签属性的值，或者对某个标签属性的值进行设置。在jQuery里我们可以通过.attr()的方法来实现。
1. 获取标签属性的值 (演示)
$('选定目标').attr('属性名') <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});
标签： Javascript, Jquery, jQuery基础
2009年1月5日星期一
改变页面内容应该算是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);});
标签： Javascript, Jquery, jQuery基础
2009年1月4日星期日
在上篇文章里，我介绍了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方法。
标签： Javascript, Jquery, jQuery基础
2009年1月2日星期五
传统的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，更多更深入的探讨将在以后的文章里详述。 $('selector')是jQuery('selector')的缩写，如果你的Javascript代码包含有对$的其他定义，你必须使用jQuery来代替$ 标签： Javascript, Jquery, jQuery基础
2009年1月1日星期四
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文档）：
我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。)
<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>
$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 标签： Javascript, Jquery, jQuery基础
2008年12月30日星期二
到目前为止，访问我的博客的朋友大多数是通过搜索来的。而这些搜索使用的关键词里，“jQuery”占得比例最高。既然有这么多人都想学习jQuery，我准备在本博客里对它进行系统详细地介绍，首先要介绍的是jQuery基础。
使用jQuery需要3个基本步骤：
1. 下载jQuery.js并保存在网页可以存取的位置。下载链接：dowload
2. 在HTML的head里引用jQuery.js
3. 运用jQuery的方法
提示：在步骤一提供的下载页面里，你会发现每一种jQuery发行版本都有三个下载链接：Minified、Packed、和Uncompressed。到底应该下载哪一个要根据你的需要来定：
简单的例子(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代码，在接下来的文章里我将详细介绍一些具有代表性的使用方法。
标签： Javascript, Jquery, jQuery基础
2008年12月17日星期三
我在上篇文章里介绍了如何运用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代码
标签： Ajax, HTML, Javascript, Jquery
2008年12月12日星期五
如果你的网站是有关编程教程的，那么你一定常常要在页面显示源代码，特别是在那些演示页面。虽然用户可以通过右键点击查看页面源代码（大部分浏览器都有这个功能），但是这不如直接在页面上点击一个链接，然后在同一个页面上显示代码来的简单方便。下面就要介绍如何使用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,'&');code=code.replace(/</mg,'<');code=code.replace(/>/mg,'>');code=code.replace(/\"/mg,'"');code=code.replace(/\t/g,' ');code=code.replace(/\r?\n/g,'<br>');code=code.replace(/<br><br>/g,'<br>');code=code.replace(/ /g,' ');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代码运行结果
标签： Ajax, HTML, Javascript, Jquery
2008年12月2日星期二
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来实现：
你可以把上述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>
标签： Javascript, Jquery
2008年12月1日星期一
使用传统的Javascript获取和设置表单里的元素比较麻烦，jQuery提供了val()方法，使用它我们可以快速地获取和设置表单的文本框、单选按钮、以及单选按钮的值。
例子：
//获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val());//设置值$("input#mytextbox").val("61dh");$("select#mylist").val("第一列");$("input#myradio").val(2);
标签： Jquery
2008年11月30日星期日
我在上两篇文章：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('原始捆绑');});});
演示：
标签： Javascript, Jquery
2008年11月28日星期五
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);});
});
演示：
标签： Javascript, Jquery
2008年11月27日星期四
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) {//注意：这里加入了参数：eventvar $newLi = $('<li class="special"><button>新按钮</button></li>');var $tgt = $(event.target); //注意：这里用到target函数if ($tgt.is('button')) {$tgt.parent().after($newLi);}//这里用到，is()函数来判断当前点击元素的属性，如果是按钮就触发事件。});});
演示：
标签： Javascript, Jquery
2008年11月22日星期六
默认情况下，在表单(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;}elsereturn true;});});</script>
用法：jQuery的一个优点是不用对HTML代码做改动或者做很小的改动，因此，只需把以上代码加入到HTML文档，就可以正确地处理回车键的响应。
演示：jQuery控制回车键
标签： Javascript, Jquery
2008年11月20日星期四
我在日志里介绍过，jQuery Load的简单运用和如何防止Load使用缓存。这篇文章将对jQuery Load做更加详细的介绍。
调用load方法的完整格式是：load( url, [data], [callback] ),其中
url：是指要导入文件的地址。 data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。 callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。 一：如何使用data
1.加载一个php文件，该php文件不含传递参数
$("#myID").load("test.php");//在id为#myID的元素里导入test.php运行后的结果
2. 加载一个php文件，该php文件含有一个传递参数
$("#myID").load("test.php",{"name" : "Adam"});//导入的php文件含有一个传递参数，类似于：test.php?name=Adam
3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});//导入的php文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com
4. 加载一个php文件，该php文件以数组作为传递参数
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});//导入的php文件含有一个数组传递参数。
注意：使用load，这些参数是以POST的方式传递的，因此在test.php里，不能用GET来获取参数。
二：如何使用callback
比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：
演示和下载：jQuery-Load$("#go").click(function(){$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){$("#myID").fadeIn('slow');});});
2008年11月16日星期日
缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。我在上篇文章里简单介绍了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函数：
<?phpheader("Cache-Control: no-cache, must-revalidate");?>
11/20更新 -- 想要对load有更多了解，请读这篇文章 jQuery load的详解
标签： Ajax, Javascript, Jquery
2008年11月15日星期六
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> (11)</li><li><a href="/blog/categories/html.html">HTML</a> (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有更多了解，请读另外两篇文章：
标签： Ajax, Javascript, Jquery
2008年11月9日星期日
我在日志里介绍过 和空格的区别。为了避免段落的最后一个单词被孤零零的放在第二行，我们可以用" "来代替最后一个空格。例如：
替代后：<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 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>
如果我们不想手动去修改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(' ')顾名思义就是指最后一个空格的索引位置。有了这两个函数，我们就可以把字符串分成两个部分，第二个部分含有最后一个单词，接着，把第二部分加入" "，然后再把两个部分合并。
3.替代法$(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);});});
这个方法用到正则表达式，和前两种方法相比，显得要简洁许多。
$(document).ready(function() {var h2Text = '';$('h2 a').each(function() {h2Text = $(this).text().replace(/ (\S+)$/,' $1');//\S代表非空格字符$(this).html(h2Text);});});
标签： Javascript, Jquery
2008年10月31日星期五
每个网站多多少少都会有一些外链接。（题外：我的博客开通时间不长，还没开始和别人交换链接。如果有兴趣，请和我联系！）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)
我在右侧栏加入了友情链接 - 注意“灰色外链接图标”
标签： Javascript, Jquery
2008年10月12日星期日
下拉选择菜单在网页制作里很常用，我们做网页的或多或少都要用到它。在这篇文章里我将介绍运用纯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>
演示：站内下拉菜单链接
标签： Javascript, Jquery
2008年10月1日星期三
jQuery让JavaScript代码变得简单，这里将介绍如何用它来实现滚动的标语，新闻，或者图片，等等。
1. JavaScript:
HTML：/*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里最后一个Pb=0;}else if(off==($('#motto>p').length-1)){//当最后一个准备关闭，a, b 重新赋值a=0;b=1;}else{a++;b++;}t = setInterval ("roll(a, b);", 3000);}</script>
<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, Jquery
2008年9月27日星期六
jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助。
比如我们有这样一个表格：
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
| 第一列 | 第二列 | 第三列 | 第四列 |
对行进行操作比较简单：
$('tr:eq(0)') $('tr:eq(n-1)') $('tr:odd') $('tr:even') 对列的操作相对麻烦一点，但是如果我们知道了其中原理也不难。表格里没有列的元素，第一列实际上是每一行的第一个区域(td)的组合。所以我们可以用循环来实现对行的选择。
$(document).ready(function(){$('table').find('td').each(function(i){//搜寻表格里的每一个区间if(i%4 == 0){ //‘4’代表表格总共有4列，如果区间编号被4整除，那么它就属于第一列$(this).addClass('col_1');}//给区间加上特定样式});});
i%4==0,进行相应的改变。记住：4代表表格的列数，如果你有10列就用10代替；选择第一列，余数等于0，选择第二列，余数应该等于1，如此类推。 演示：
更新(2009/10/20)：感謝JOE的補充！我的方法要人為的更改表的列數，而JOE的方法不但代碼簡單而且不受列數的限制。
演示：$(document).ready(function(){$('#button1').click(function(){$('#demo1 tr').each(function() {$(this).find("td:first").css({color:"red", fontWeight:"bold"});});});});
另外還可以改變選擇器從而改變偶數列或者奇數列。注意：第一列從0開始，所以td:odd代表偶數列。
演示：<script type="text/javascript">$(document).ready(function(){$('#10200902').click(function(){$('#demo1 tr').each(function() {//alert("me");$(this).find("td:odd").css({color:"green", fontWeight:"bold"});});});});</script>//注意：第一列從0開始，所以td:odd代表偶數列<button id="10200902">点击改变以上表格的偶數列</button>
标签： Jquery
2008年8月30日星期六
Jquery里改变元素样式的方法主要有两种：
$('#leftPan li a').css({'font-weight':'normal',
'color':'#5F7A77',
'background' :'url(images/bullet2-normal.gif) 0 10px no-repeat'
});//'#leftPan li a' 指明了那个元素需要改变样式//如果有多个CSS属性需要改变，用逗号分隔
$('#leftPan li a').addClass('selected')//seleted 是预先定义好的Class$(this).addClass('selected');//如果是针对当前元素，可以用this$('span:contains(tab)').addClass('selected');//给含有'tab'的span元素就Class$(this).children().addClass('selected');/*如果当前元素无法直接添加新的Class,我们可以通过更改span的属性来改变。如果当前元素已经定义了span，那么我们可以用(this).children()来找到当前元素的span。*/
标签： Jquery
61DH.COM® 2008, All right reserved.
闽ICP备08101444号
