YUI Node and jQuery

The Node Utility provides an expressive way to collect, create, and manipulate DOM nodes. Each Node instance represents an underlying DOM node, and each NodeList represents a collection of DOM nodes. With Node, you can manage classNames (myNode.addClass(‘foo’)) and styles (myNode.setStyle(‘opacity’, 0.5)), create elements (Y.Node.create(‘< div id="foo" class="foo">< p>foo’)), and much more.[..sorry ,if i don't change the created html code,it will be showd HTML,not source]

Note: The method Y.get has been deprecated in favor of Y.one. The methods Node::query and Node::queryAll have been deprecated in favor of Node::one and Node::all. They still function as expected in this release, but support will be removed in a subsequent release.

The easiest way to include the source files for Node and its dependencies is to add the YUI seed file to your page, using the following script tag, and allow the YUI instance to download any additional files which may be required:


// Create new YUI instance, and populate it with the required modules
YUI().use('node', function(Y) {

    // Node available, and ready for use.

});
jQuery(function($){

});
(function($){

})(jQuery);

you can see the detail page on “http://developer.yahoo.com/yui/3/node/”
PS:
on the end ,i find a bug on jquery,please look these codes:


when i open this page on browser,it showed blank page.so i changed it


it’ok…

Getting Started From YUI – YUI Global Object

YUI Global Object是YUI的基类,他是YUI的核心,也为YUI其他所有的方法、功能提供了接口 。如果你想使用YUI类库,必须要在全用YUI其他类库前就要加载它。YUI GlobalOject 就象一个种子,你所有的的模块都是基于它而制作的。所以我们必须要先加载他才成。

YUI Global Object从名字也能看出,他建了一个全局对象。它可以被实例化,而且他也为基于YUI的模块提供了约束条件。

YUI的使用也和jQuery差不多,只是部分的使用方式有点不一样。
这个是官方的简单例子,看得出使用方法确实和jQuery很相似

YUI().use('dd-drop', 'anim', function(Y) {
    // Y.DD is available
    // Y.Anim is available
});
$.each(function(){
    //xxx。 循环
});

YUI的一些模块名都比较简单,而且似乎名词还相当简单,还是一个缩写,如anim代表了Animation,dd代表了Drag-Drop,event代表了DOM Element Utilites。
YUI()也可以象jQuery一样,用简单的方式来进行调用。

var Y = YUI();
var j = jQuery.noConflict();

也可以通过add方法来添加自定义模块。

YUI().add('functionname',function(Y){
    Y.namespace('mynamespace');
    Y.mynamespace.Modes = function(){
         //expose API
    }
},{
    requires:['base']
});
jQuery.functionname = function($){
    //....在function的参数用$后,就可以在这个函数空间里采用了$
}

YUI在使用一些方法之前还可以使用一定的参数。或者说是临时改变运行的环境变量?官方的例子是这样的

YUI({
       lang: 'ko-KR,en-GB,zh-Hant-TW', // languages in order of preference
       base: '../../build/', // the base path to the YUI install.  Usually not needed because the default is the same base path as the yui.js include file
       charset: 'utf-8', // specify a charset for inserted nodes, default is utf-8
       loadOptional: true, // automatically load optional dependencies, default false
       combine: true, // use the Yahoo! CDN combo service for YUI resources, default is true unless 'base' has been changed
       filter: 'raw', // apply a filter to load the raw or debug version of YUI files
       timeout: 10000, // specify the amount of time to wait for a node to finish loading before aborting
       insertBefore: 'customstyles', // The insertion point for new nodes
       // one or more external modules that can be loaded along side of YUI.  This is the only pattern
       // that was supported in 3.0.0 for declaring external modules.  3.1.0 adds 'groups' support,
       // which is an easier way to define a group of modules.  See below.
       modules:  {
           yui2_yde_datasource: {
               fullpath: 'http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/datasource/datasource-min.js'
           },
           yui_flot: {
               fullpath: 'http://bluesmoon.github.com/yui-flot/yui.flot.js',
               requires: ['yui2_yde_datasource']
           }
       },

       // one or more groups of modules which share the same base path and
       // combo service specification.
       groups: {
           // Note, while this is a valid way to load YUI2, 3.1.0 has intrinsic
           // YUI 2 loading built in.  See the examples to learn how to use
           // this feature.
           yui2: {
               combine: true,
               base: 'http://yui.yahooapis.com/2.8.0r4/build/',
               comboBase: 'http://yui.yahooapis.com/combo?',
               root: '2.8.0r4/build/',
               modules:  { // one or more external modules that can be loaded along side of YUI
                   yui2_yde: {
                       path: "yahoo-dom-event/yahoo-dom-event.js"
                   },
                   yui2_anim: {
                       path: "animation/animation.js",
                       requires: ['yui2_yde']
                   }
               }
           }
       }
}).use('dd', 'yui_flot', function(Y) {
    // All YUI modules required to get drag and drop to work are now loaded.
});

初次学习。也是初步了解,参考页面为:http://developer.yahoo.com/yui/3/yui/,以后我会更加多次使用,因为我觉得YUI有两方面集成的不错,YUICSS做页面还是很不错的。而我又不会做页面所以。。。
当然easyUI也考虑在用。

jQuery中10个非常有用的遍历函数

使用jQuery,可以很容易的选择HTML元素。但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情。在这篇教程中,我们将探讨十种方法去精炼和扩展我们将要操作的集合。

HTML

首先,让我们看看下图显示的简单的页面,通过这个教程我们将选择这些元素。

1. div.container是包裹元素;
2. div.photo、div.title、div.rating是div.container的直接子级;
3. 每个div.star是div.rating的子级;
4. 当div.satr的class为“on”时,它是一个完整的star。

为什么要遍历?
“为什么我们要进一步提炼一系列元素,难道是jQuery选择语法不够强大?”
好,让我们从示例开始。在上面提到的网页中,当一个star被点击时,我们需要给它以及左边 的每个star添加class“on”。与此同时,我们要改变所有star父元素的背景颜色,因此,我们的代码如下:

$('.star').click(function(){
    $(this).addClass('on');
//  如何选取当前对象的父元素?
//  如何获得当前star左侧所有的star?
});

在第二行,我们得到了我们点击的当前对象。但是,如何得到stars的父级?即 div.rating。但是,在一个页面中,有很多div.rating。哪一个是我们想要的?如何获得“this”左边所有的star?

可喜的是,jQuery允许我们基于这些基层关系,在现存集合的基础上获得新的元素集合。而 这些正是遍历函数发挥作用的地方。

1、children

这个函数得到一组元素的直接子级。

在很多情况下会很方便,看看下面这张图:

  1. 开始的时候容器中的star全部被选择;
  2. 给children()传递一个选择表达式将选择结果缩小至选中的star;
  3. 如果chilidren()每接受任何参数,将返回所有直接子级;
  4. 不返回孙级元素。

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的 集合中移除。

下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

3、not

与filter恰恰相反,not()从集合中移除匹配的元素。

看下面这个例子。偶数列的star从选择集合中移除,留下的是奇数行的star。

“ 注意:’Even’和’odd’选择器是从0开始的,从0开始计数,不是从1。”

4、add

如果我们想在集合中增加一些元素怎么办?add()函数正是做这件事的。

同样简单明了,photo盒子被添加到集合中。

5、slice

有时候,我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

  1. 第一个参数是从零开始的第一个元素的位置,它包含在返回的片段中;
  2. 第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略,将延伸至集合的末尾;
  3. 所以,slice(0,2)将选取前两个star。


6、parent

parent()函数选取一系列元素的直接父级。

正如下图所示,第一个star的直接父级被选中。非常方便,应当指出,它仅仅返回直接父级, 为什么很奇特?因为没有祖父元素或祖先元素被选中。

7、parents

这是复数形式,parents()选择集合的所有祖先元素。我的意思是所有祖先元素包括直接 父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

通过给parents()传递.container参数,div.container将被选 中,它实际上第一个star的祖父。

8、siblings

这个函数选择一组元素的所有兄弟姐妹,传递一个表达式可以筛选结果。

看看这个例子:

  1. 谁是第一个star的兄弟节点?其它的四个,对不?
  2. 如图所示,“odd”的节点被选中。索引是从零开始的,看看下面star的红色数字。

9、prev & prevAll

prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节 点。

如果你正在构建一个星级部件,这将相当方便。第三个star前面的兄弟节点被选中。

10、next & nextAll

这些函数与prev和prevAll工作方式相同,不过它选择的是下一个兄弟姐妹。

结论

最后,让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。

$('.star').click(function(){
    $(this).addClass('on');
//  如何取得当前对象的父级?
    $(this).parent().addClass('rated');
//  如何获得当前对象左侧的star?
    $(this).prevAll().addClass('on');
    $(this).nextAll().removeClass('on');
});

这就是这篇教程中早期提到的问题,对吗?在这几行代码中我们使用了这几个遍历函数。

  1. 在第5行,看看parent()函数,啊哈,真简单。
  2. 在第8行和9行,prevAll()和nextAll().选择填充的star和空的star。

现在,遍历函数是做么的方便。当在一起使用时,它们将更加强大。也就是说,一个函数的输出是 另一个函数的输入,它们是链式的。

谢谢你的拜读,希望这篇教程在你通过jQuery选择html元素时更容易。你有什么想法? 哪个遍历函数是我们遗漏的?

原文地址:10 Really Helpful Traversing Functions in jQuery

转载地址:http://www.denisdeng.com/?p=695

很不错的文章。虽然我现在已经相当熟悉了这些选择器的功能,但用来看看还是很不错的。。

jQuery图片自动缩放

半年前写的代码,现在看看也不算太差就放上来了

$(document).ready(function(){
    $('div').autoResize({height:50});  //用法
});  

jQuery.fn.autoResize = function(options)
{
    var opts = {
        'width' : 400,
        'height': 300
    }
    var opt = $.extend(true, {},opts,options || {});
    width = opt.width;
    height = opt.height;
    $('img',this).each(function(){
        var image = new Image();
        image.src = $(this).attr('src');
        //开始检查图片
        if(image.width > 0 && image.height > 0 ){
            var image_rate = 1;
            if( (width / image.width) < (height / image.height)){
                image_rate = width / image.width ;
            }else{
                image_rate = height / image.height ;
            }
            if ( image_rate <= 1){
                $(this).width(image.width * image_rate);
                $(this).height(image.height * image_rate);
            }
        }
    });
}

用法也写在上面了。可以直接使用。。。