NeatCN(NeatStudio工作室) NeatStudio工作室

Posts Tagged ‘jquery’

YUI Node and jQuery

04.28.2010 · Posted in Javascript开发

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 ...

Getting Started From YUI – YUI Global Object

04.13.2010 · Posted in Javascript开发

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($){ ...

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

04.06.2010 · Posted in Javascript开发

使用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 这个函数得到一组元素的直接子级。 在很多情况下会很方便,看看下面这张图: 开始的时候容器中的star全部被选择; 给children()传递一个选择表达式将选择结果缩小至选中的star; 如果chilidren()每接受任何参数,将返回所有直接子级; 不返回孙级元素。 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()正是做这个的。 第一个参数是从零开始的第一个元素的位置,它包含在返回的片段中; 第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略,将延伸至集合的末尾; 所以,slice(0,2)将选取前两个star。 6、parent parent()函数选取一系列元素的直接父级。 正如下图所示,第一个star的直接父级被选中。非常方便,应当指出,它仅仅返回直接父级, 为什么很奇特?因为没有祖父元素或祖先元素被选中。 ...

jQuery图片自动缩放

03.28.2010 · Posted in Javascript开发

半年前写的代码,现在看看也不算太差就放上来了 $(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( ...