Flex Home » jQuery http://flex.desizen.com 又一个 flex 博客 Thu, 01 Dec 2011 03:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery插件:fancybox http://flex.desizen.com/jquery-plugin-fancybox/ http://flex.desizen.com/jquery-plugin-fancybox/#comments Mon, 10 Aug 2009 02:38:23 +0000 joel http://flex.joelove.cn/?p=252 它是什么?

fancybox 是一个 MAC 风格的用来在 web 页面显示图片, html 内容和多媒体的 “lightbox(灯箱)” 工具,是一个比较轻量的 jQuery 插件,所以使用 jQuery library ,遵守 MIT License.

特点:

  • 增加了一个漂亮的阴影背景
  • 增加了一个相关列表的导航功能,也就是可以展示一组图片或 html 内容
  • 可以显示图片, 内嵌多媒体, AJAX 以及 iframe 内容
  • 通过设置 CSS 样式实现可定制化
  • 支持使用这个 easing plugin 插件

下载

当前版本: v.1.2.1

地址: Google code

在 FireFox, Safari,  Opera,   IE6 & IE7 浏览器上测试成功通过.

效果

点击查看

使用方法

首先,要确保你添加了 DOCTYPE,  这是用来确保CSS样式可以正常显示.

1. 包含需要的 JS 文件

<script src="path-to-file/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="path-to-file/jquery.fancybox.js" type="text/javascript"><!--mce:1--></script>

选择性的添加 easing 插件所需的 js 文件, 如果不使用该插件就不添加.

<script src="path-to-file/jquery.easing.js" type="text/javascript"><!--mce:2--></script>

2. 添加 FancyBox CSS 文件
如果 FancyBox CSS 文件没有和 images 目录在同一目录内, 应该改变图片路径

3. 创建一个链接
加载图片使用:

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>

加载同一页面中的 element:

<a id="inline" href="#data">This shows content of element who has id="data"</a>

Iframe方式:

<a href="http://www.example?iframe">This goes to iframe</a>
 or
<a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax:

<a href="http://www.example/data.php">This takes content using ajax</a>

可选参数:使用title属性可以增加图片说明文字.
注意:你或许想要删除点击图片关闭展示这个功能,此时你必须使用 Iframe 或者 inline 方式去加载.

4. 使用 jQuery 选择器, 让插件炫起来 

$(document).ready(function() { 
    /* This is basic - uses default settings */ 
 
    $("a#single_image").fancybox(); 
 
    /* Using custom settings */ 
 
    $("a#inline").fancybox({ 
        'hideOnContentClick': true 
    }); 
 
    $("a.group").fancybox({ 
        'zoomSpeedIn': 300, 
        'zoomSpeedOut': 300, 
        'overlayShow': false 
    }); 
});
]]> http://flex.desizen.com/jquery-plugin-fancybox/feed/ 5 jQuery选择器 – 表单过滤(Form Filters) http://flex.desizen.com/jquery-selectors-formfilters/ http://flex.desizen.com/jquery-selectors-formfilters/#comments Thu, 09 Jul 2009 01:48:36 +0000 joel http://flex.joelove.cn/?p=196 本文是jQuery选择器系列之表单过滤(Form Filters).

表单过滤(Form Filters)是jQuery文档中分出来的选择器中的最后一组,但这并不表示我们仅仅应用这些选择器就能够驰骋DOM海洋了,我们还需要学习后面的过滤器等等.

其包括以下几个选择器:

:enabled
用法: $(“input:enabled”) ;
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

:disabled
用法: $(“input:enabled”) ;
说明: 匹配所有不可用元素.与上面的那个是相对应的.

:checked
用法: $(“input:checked”) ;
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

:selected
用法: $(“select option:selected”) ;
说明: 匹配所有选中的option元素.

]]> http://flex.desizen.com/jquery-selectors-formfilters/feed/ 1 jQuery选择器 – 表单(Forms) http://flex.desizen.com/jquery-selectors-forms/ http://flex.desizen.com/jquery-selectors-forms/#comments Wed, 08 Jul 2009 03:13:06 +0000 joel http://flex.joelove.cn/?p=189 本文是jQuery选择器系列之表单(Forms).

这组表单(Forms)选择器内容稍稍多了点,有十一个,其实也就是input的那些type啦,但是熟悉html的童鞋快速的掌握这些一点问题都没有!

其包括以下几个选择器:

:input
用法: $(“:input”) ;
说明: 这个自然就是选择所有的input类型了,不管type等于何值(首先得是符合游戏规则的).

:text
用法: $(“:text”) ;
说明: 匹配所有的单行文本框.

:password
用法: $(“:password”) ;
说明: 匹配所有密码框.

:radio
用法: $(“:radio”) ;
说明: 匹配所有单选按钮.

:checkbox
用法: $(“:checkbox”) ;
说明: 匹配所有复选框

:submit
用法: $(“:submit”) ;
说明: 匹配所有提交按钮.

:image
用法: $(“:image”) ;
说明: 匹配所有图像域.

:reset
用法: $(“:reset”) ;
说明: 匹配所有重置按钮.

:button
用法: $(“:button”) ;
说明: 匹配所有按钮.这个包括直接写的元素button.

:file
用法: $(“:file”) ;
说明: 匹配所有文件域.

:hidden
用法: $(“input:hidden”) ;
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,看个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
 
    // in some browsers :hidden includes head, title, script, etc... so limit to body
    $("span:first").text("Found " + $(":hidden", document.body).length + 
                         " hidden elements total.");
    $("div:hidden").show(3000);
    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
 
  });
  </script>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
    <input type="hidden" />
    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>
  </span>
</body>
</html>

在这里,大家需要仔细数一数那个个数.这个改变是从1.3.2开始的.

]]> http://flex.desizen.com/jquery-selectors-forms/feed/ 0 jQuery选择器 – 后代过滤(Child Filters) http://flex.desizen.com/jquery-selectors-childfilters/ http://flex.desizen.com/jquery-selectors-childfilters/#comments Sat, 04 Jul 2009 16:13:51 +0000 joel http://flex.joelove.cn/?p=176 本文是jQuery选择器系列之后代过滤(Child Filters).

后代过滤(Child Filters)的意思就是利用其他jQuery选择器选择到了一组dom,而其都具有相同的属性与特征,无法再细化选择的时候,Child Filters 此时就派上了用场了.它就是用来选择此组元素中的第几个.

其包括以下几个选择器:

:nth-child(index/even/odd/equation)
用法: $(“ul li:nth-child(2)”) ;
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

:first-child
用法: $(“ul li:first-child”) ;
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

:last-child
用法: $(“ul li:last-child”) ;
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

: only-child
用法: $(“ul li:only-child”) ;
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

]]> http://flex.desizen.com/jquery-selectors-childfilters/feed/ 0 jQuery选择器 – 属性过滤(Attribute Filters) http://flex.desizen.com/jquery-selectors-attributefilters/ http://flex.desizen.com/jquery-selectors-attributefilters/#comments Tue, 30 Jun 2009 05:55:15 +0000 joel http://flex.joelove.cn/?p=160 本文是jQuery选择器系列之属性过滤(Attribute Filters).

属性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记不住,在以后用到的时候也可以很快的查找api并应用上.

其包括以下几个选择器:

[attribute]
用法: $(“div[id]“) ;
说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.

[attribute=value]
用法: $(“input[name='newsletter']“).attr(“checked”, true);
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

[attribute!=value]
用法: $(“input[name!='newsletter']“).attr(“checked”, true);
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.

[attribute^=value]
用法: $(“input[name^='news']“) ;
说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

[attribute$=value]
用法: $(“input[name$='letter']“) ;
说明: 匹配给定的属性是以某些值结尾的元素.

[attribute*=value]
用法: $(“input[name*='man']“) ;
说明: 匹配给定的属性是以包含某些值的元素.

[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导致什么宇宙飞船爆炸还是什么的事了.有点耸人听闻,但是等我们使用的非常非常多了以后,自然就很容易分开区别了.

]]> http://flex.desizen.com/jquery-selectors-attributefilters/feed/ 7 jQuery选择器 – 可见度过滤(Visibility Filters) http://flex.desizen.com/jquery-selectors-visibilityfilters/ http://flex.desizen.com/jquery-selectors-visibilityfilters/#comments Mon, 29 Jun 2009 06:15:13 +0000 joel http://flex.joelove.cn/?p=151 本文是jQuery选择器系列之可见度过滤(Visibility Filters).

可见度过滤(Visibility Filters),无非就是能看见和不能看见.所以Visibility Filters只包括了两部分:

:hidden
用法: $(“tr:hidden”)
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

:visible
用法: $(“tr:visible”)
说明: 匹配所有的可见元素.

]]> http://flex.desizen.com/jquery-selectors-visibilityfilters/feed/ 0 jQuery选择器 – 内容过滤(Content Filters) http://flex.desizen.com/jquery-selectors-contentfilters/ http://flex.desizen.com/jquery-selectors-contentfilters/#comments Mon, 29 Jun 2009 04:46:03 +0000 joel http://flex.joelove.cn/?p=145 本文是jQuery选择器系列之内容过滤(Content Filters).

对于jQuery的学习,最好的办法就是实际使用它,并多多的使用!不然很快就会忘记的.

:contains(text)
用法: $(“div:contains(‘John’)”) ;
说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

:empty
用法: $(“td:empty”) ;
说明: 匹配所有不包含子元素或者文本的空元素.嗯,这个看名字就大概知道是什么意思了,就是元素里面没有任何东西(子元素/内容)的时候就匹配.

:has(selector)
用法: $(“div:has(p)”).addClass(“test”) ;
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

:parent
用法: $(“td:parent”) ;
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

]]> http://flex.desizen.com/jquery-selectors-contentfilters/feed/ 0 jQuery选择器 – 基础过滤(Basic Filters) http://flex.desizen.com/jquery-selectors-basicfilters/ http://flex.desizen.com/jquery-selectors-basicfilters/#comments Fri, 26 Jun 2009 06:08:47 +0000 joel http://flex.joelove.cn/?p=135 本文是jQuery选择器系列之基础过滤(Basic Filters).

基础过滤(Basic Filters)是相对于以后要学习的其他的过滤方法而言的,基础过滤(我小学没毕业,不知道是不是这样翻译)所过滤的内容都是利用jQuery获得到的DOM元素,我的理解就是像一个大筛子,把利用那些基本选择器获得到的集合进行按规则剔除.
Basic Filters包括了十部分,稍稍有点多:

:first
用法: $(“tr:first”) ;
说明: 匹配找到的第一个元素.我以前就遇到了取第一个和最后一个的情况.

:last
用法: $(“tr:last”) ;
说明: 匹配找到的最后一个元素.与 :first 相对应.

:not(selector)
用法: $(“input:not(:checked)”) ;
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

:even
用法: $(“tr:even”) ;
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

: odd
用法: $(“tr:odd”) ;
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

:eq(index)
用法: $(“tr:eq(0)”) ;
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

:gt(index)
用法: $(“tr:gt(0)”) ;
说明: 匹配所有大于给定索引值的元素.

:lt(index)
用法: $(“tr:lt(2)”) ;
说明: 匹配所有小于给定索引值的元素.

:header
用法: $(“:header”).css(“background”, “#EEE”) ;
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

:animated
例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
 
    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
 
  });
  </script>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
  </style>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>
</body>
</html>

说明: 匹配所有正在执行动画效果的元素.这个需要好好理解下,因为看起来比之前的理解上都难一点.其中,toggleClass是添加/移除class;slideToggle是收缩/伸展块级元素.也就是说slideToggle让其中的一个div在不断的执行动画(收缩/伸展),当点击button时,就用div:animated匹配到了这个元素上,所以改变了颜色.

]]> http://flex.desizen.com/jquery-selectors-basicfilters/feed/ 1 jQuery选择器 – 层次(Hierarchy) http://flex.desizen.com/jquery-selectors-hierarchy/ http://flex.desizen.com/jquery-selectors-hierarchy/#comments Thu, 25 Jun 2009 06:54:23 +0000 joel http://flex.joelove.cn/?p=112 child prev + next prev ~ siblings ancestor descendant 用法: $(“form input”) ; 说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开. parent > child 用法: $(“form > input”) ; 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用XPath选择符的. prev + next 用法: $(“label + input”) ; 说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的. prev ~ siblings 用法: $(“form ~ input”) [...]]]> 本文是jQuery选择器系列之层次(Hierarchy).

我对层次(Hierarchy)的理解:使用构造的选择符来层层过滤DOM元素.
Hierarchy包括了四部分:

ancestor descendant
用法: $(“form input”) ;
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

parent > child
用法: $(“form > input”) ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用XPath选择符的.

prev + next
用法: $(“label + input”) ;
说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.

prev ~ siblings
用法: $(“form ~ input”) ;
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

]]> http://flex.desizen.com/jquery-selectors-hierarchy/feed/ 0 jQuery选择器 – 基本(Basics) http://flex.desizen.com/jquery-selectors-basics/ http://flex.desizen.com/jquery-selectors-basics/#comments Wed, 24 Jun 2009 04:27:59 +0000 joel http://flex.joelove.cn/?p=100 本文是jQuery选择器系列之基本(Basics).
在继续学习之前,我们必须具备一些jQuery的基本知识,至少要知道jQuery是使用”$”作为替代符,而且要了解HTML与CSS知识等.

这个Basics在jQuery选择器中是最好掌握,也是使用最多的部分了.因为我们在制作简单的页面效果时是不需要采取多么的复杂的dom选择的.
API文档中把它分为了六部分:

#id

用法: $(“#myDiv”);
说明: 这个就是直接选择html中的id=”myDiv”,值得注意的是:如果选择器中包含特殊字符，可以用两个斜杠(\\)转义,至少,”.”, “[", "]” 是特殊字符.选择符内可以把双引号改为单引号,不过在复杂点的获取DOM的时候,单引号总是会引发歧义或错误,还是使用双引号吧.

element

用法: $(“div”);
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.

.class

用法: $(“.myClass”);
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

.class.class

用法: $(“.myClass.myOtherClass”);
说明: 这个用法貌似是新的,意思就是仅匹配html中class=”myClass myOtherClass”的元素,而class=”myClass”和class=”myOtherClass”这样的class是不匹配的.

*

用法: $(“*”);
说明: 匹配所有元素,多用于结合上下文来搜索.目前我还没用上它,不过看说明说是用来结合搜索用的,那么肯定会在大规模应用中用到吧.

selector1, selector2, selectorN

用法: $(“div,span,p.myClass”)
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素p class=”myClass”

]]> http://flex.desizen.com/jquery-selectors-basics/feed/ 5