꼭 알아야 할 15가지 새로운 기능: jQuery 1.4 출시-Word누르다-php.cn

jQuery 1.4가 최근 출시되었습니다. 이것은 일부 사람들이 추측하는 것처럼 단순한 유지 관리 릴리스가 아닙니다. 1.4에는 다양한 새로운 기능, 개선 사항, 성능 개선 사항이 포함되어 있습니다! 이 문서에서는 유용할 수 있는 새로운 기능과 향상된 기능에 대해 설명합니다.

지금 여기에서 jQuery 1.4를 다운로드할 수 있습니다: http://code.jquery.com/jquery-1.4.js

1. jQuery에 속성 전달(...)

1.4 이전에 jQuery는 유용한 "attr" 메소드를 통해 요소 컬렉션에 속성을 추가하는 것을 지원했습니다. 이 메소드는 속성 이름과 값 또는 여러 속성을 지정하는 객체를 전달할 수 있습니다. jQuery 1.4에는 요소를 생성할 때 속성 객체를 jQuery 함수 자체에 대한 두 번째 인수로 전달하는 지원이 추가되었습니다.

여러 속성을 가진 앵커 요소를 생성해야 한다고 가정해 보겠습니다. 1.4의 경우 다음과 같이 간단합니다.

으아악

"text”属性 - 您可能想知道它在那里做什么，毕竟锚点没有“text”属性！嗯，当您传递某些属性时，jQuery 1.4 使用它自己的方法。因此，上面指定的“text”属性将导致 jQuery 调用“.text()" 메소드가 "Go to Google!"을 유일한 인수로 전달한다는 것을 눈치채셨을 것입니다.

더 나은 실제 예:

으아악

"id"는 일반 속성으로 추가되지만 "css" 및 "click" 속성은 각 해당 메소드에 대한 호출을 트리거합니다. 버전 1.4 이전의 위 코드는 다음과 같이 작성되어야 합니다.

으아악

jQuery에 대해 자세히 알아보기(...)

2. 모두 "까지"!

1.4, "nextUntil”、“prevUntil”和“parentsUntil"의 DOM 순회 라이브러리에 세 가지 새로운 메서드가 추가되었습니다. 이러한 각 메서드는 전달된 선택기가 충족될 때까지 DOM을 특정 방향으로 순회합니다. 이제 과일 목록이 있다고 가정해 보겠습니다.

으아악

"Apple" 다음의 모든 항목을 선택하고 싶지만 "Strawberry"에 도달한 후 중지하고 싶습니다. 이보다 더 간단할 수는 없습니다:

으아악

다음에 대해 자세히 알아보기: prevUntil, nextUntil, parentUntil

3. 여러 이벤트 핸들러 바인딩

여러 이벤트 바인딩 메서드를 함께 연결하는 대신 다음과 같이 모두 동일한 호출로 묶을 수 있습니다.

으아악

이것은 ".one()"에도 적용됩니다.

.bind(...)에 대해 자세히 알아보기

4. 모든 속성의 느슨함

이제 단일 애니메이션에 대해 하나의 완화 함수를 정의하는 대신 애니메이션을 적용하려는 각 속성에 대해 서로 다른 완화 함수를 정의할 수 있습니다. jQuery에는 스윙(기본값)과 선형이라는 두 가지 완화 기능이 포함되어 있습니다. 그 외의 경우에는 별도로 다운로드하셔야 합니다!

각 속성에 대해 여유 함수를 지정하려면 속성을 배열로 정의하면 됩니다. 첫 번째 값은 해당 속성에 대해 애니메이션을 적용할 값이고, 두 번째 값은 사용할 여유 함수입니다.

으아악

이 코드가 실제로 작동하는 모습을 확인하세요!

선택적 옵션 개체의 각 속성에 대한 여유 함수를 "specialEasing" 개체의 속성 이름-값 쌍으로 정의할 수도 있습니다.

으아악

편집자 주 - 이 기사의 저자인 James Padolsey는 매우 겸손합니다. 이 새로운 기능은 그의 아이디어였습니다!

속성별 완화에 대해 자세히 알아보세요

5. 새로운 라이브 이벤트!

jQuery 1.4에는 "Submit", "Change", "Focus" 및 "Blur" 이벤트에 대한 지원이 추가되었습니다. jQuery에서는 사용자 정의 비용을 지속적으로 리바인딩하는 대신 ".live()”方法来委托事件。当您必须在许多元素上注册事件处理程序，并且随着时间的推移可能会添加新元素时（使用“.live()"를 사용합니다. 매우 유용합니다.

하지만 조심하세요! 위임하려면 "focusin", "focusout" 이벤트 이름을 사용해야 합니다. focus" 및 "blur" 이벤트! 으아악

6. 제어 기능 컨텍스트

jQuery 1.4는 jQuery 네임스페이스 아래에 새로운 "

" 기능을 제공합니다. 이 함수는 "범위"와 메서드 이름, 또는 함수와 예상 범위라는 두 개의 매개 변수를 허용합니다. JavaScript의 "this" 키워드는 익히기가 까다로울 수 있습니다. 때로는 요소가 아니라 이전에 생성한 개체가 되기를 원할 때도 있습니다. proxy

예를 들어 여기에는 "

" 메서드와 구성 개체가 있습니다. app”对象，它有两个属性，一个“clickHandler 으아악

“

”. 간단히 전화하면: clickHandler”方法，当像“app.clickHandler()”这样调用时，将以“app”作为其上下文，这意味着“this”关键字将允许它访问“ app 으아악

이벤트 핸들러로 바인딩해 보겠습니다.

jQuery('a').bind('click', app.clickHandler);

로그인 후 복사

当我们单击锚点时，它似乎不起作用（没有任何警报）。这是因为 jQuery（以及大多数理智的事件模型）默认情况下会将处理程序的上下文设置为目标元素，也就是说，刚刚单击的元素将可以通过“this”访问。但我们不希望这样，我们希望将“this”设置为“app”。在 jQuery 1.4 中实现这一点再简单不过了：

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

로그인 후 복사

现在，每当点击锚点时，“嗨！”将会收到警报！

代理函数返回函数的“包装”版本，并将“this”设置为您指定的任何内容。它在其他上下文中也很有用，例如将回调传递给其他 jQuery 方法或插件。

了解有关 jQuery.proxy

7。延迟动画队列

您现在可以向动画队列添加延迟。事实上，这适用于任何队列，但其最常见的用例可能是“fx”队列。这允许您在动画之间暂停，而不必混乱回调和调用“setTimeout”。 “.delay()”的第一个参数是您想要延迟的毫秒数。

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

로그인 후 복사

如果您想要延迟默认“fx”队列以外的队列，则需要将队列名称作为第二个参数传递给“.delay()”。

了解更多关于 .delay(…)

8。检查元素是否有某物

jQuery 1.4 可以轻松检查元素（或集合）“.has()”是否有某些内容。这相当于 jQuery 的选择器过滤器“:has()”的编程方式。此方法将选择当前集合中至少包含一个符合传递选择器的元素的所有元素。

jQuery('div').has('ul');

로그인 후 복사

这将选择包含 UL 元素的所有 DIV 元素。在这种情况下，您可能只使用选择器过滤器（“:has()”），但是当您需要以编程方式过滤集合时，此方法仍然有用。

jQuery 1.4 还揭示了 jQuery 命名空间下的“contains”函数。这是一个接受两个 DOM 节点的低级函数。它将返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>

로그인 후 복사

阅读更多内容：.has(...), jQuery.contains(...)

9。展开元素！

我们使用“.wrap()”方法已经有一段时间了。 jQuery 1.4 添加了“.unwrap()”方法，其作用完全相反。如果我们假设以下 DOM 结构：

<div>
    <p>Foo</p>
</div>

로그인 후 복사

我们可以像这样展开段落元素：

jQuery('p').unwrap();

로그인 후 복사

生成的 DOM 结构将是：

<p>Foo</p>

로그인 후 복사

本质上，此方法只是删除任何元素的父元素。

了解更多关于 .unwrap(…)

10。删除元素而不删除数据

新的“<strong>.detach()</strong>”方法允许您从 DOM 中删除元素，与“.remove()”方法非常相似。这种新方法的主要区别在于它不会破坏 jQuery 在该元素上保存的数据。这包括通过“.data()”添加的数据以及通过 jQuery 事件系统添加的任何事件处理程序。

当您需要从 DOM 中删除元素，但您知道稍后需要将其添加回来时，这会很有用。其事件处理程序和任何其他数据都将保留。

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

foo.detach(); // Remove it from the DOM

// … do stuff

foo.appendTo('body'); // Add it back to the DOM

foo.click(); // alerts "Foo!"

로그인 후 복사

了解有关 .detach(...)

11。索引（...）增强功能

jQuery 1.4 为您提供了两种使用“.index()”方法的新方法。以前，您只能传递一个元素作为其参数，并且您希望返回一个数字，指示该元素在当前集合中的索引。

现在不传递任何参数会返回元素在其同级元素中的索引。因此，假设以下 DOM 结构：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

로그인 후 복사

当单击一个列表项时，您想要找出被单击元素在所有其他列表项中的索引。很简单：

jQuery('li').click(function(){
    alert( jQuery(this).index() );
});

로그인 후 복사

jQuery 1.4 还允许您指定一个选择器作为“.index()”的第一个参数，这样做将为您提供从该选择器生成的集合中当前元素的索引。

您应该注意，此方法返回的是一个整数，如果在文档中找不到传递的选择器/元素，它将返回 -1。

了解更多关于 .index(…)

12。 DOM 操作方法接受回调

大多数 DOM 操作方法现在支持传递函数作为唯一参数（或第二个参数，在“.css()”和“.attr()”的情况下）。此函数将在集合中的每个元素上运行，以确定应用作该方法的实际值的内容。

以下方法具有此功能：

之后
之前
追加
前置
添加类
切换类
删除类
包裹
包裹所有
包裹内部
值
文本
替换为
CSS
属性
html

在回调函数中，您可以通过“this”访问集合中的当前元素，并通过第一个参数访问其索引。

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

로그인 후 복사

此外，使用上述某些方法，您还将获得第二个参数。如果您调用 setter 方法（例如“.html()”或“.attr('href)”），您将可以访问当前值。例如

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

로그인 후 복사

如您所见，使用“.css()”和“.attr()”方法，您可以将该函数作为第二个参数传递，因为第一个参数将用于命名您想要更改的属性：

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

로그인 후 복사

13。确定对象的类型

jQuery 1.4 添加了两个新的辅助函数（直接存储在 jQuery 命名空间下），可帮助您确定正在处理的对象类型。

首先，有“isEmptyObject”，该函数返回一个布尔值，指示传递的对象是否为空（缺乏属性 - 直接和继承）。其次，“isPlainObject”，它将返回一个布尔值，指示传递的对象是否是纯 JavaScript 对象，即通过“{}”或“new Object()”创建的对象。< /p>

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false 
jQuery.isPlainObject(jQuery()); // false

로그인 후 복사

了解更多： isPlainObject(...), isEmptyObject(...)

14。最近的（...）增强功能

jQuery 的“.closest()”方法现在接受选择器数组。当您想要遍历元素的祖先，查找（多个）具有某些特征的最接近元素时，这非常有用。

此外，它现在接受上下文作为第二个参数，这意味着您可以控制 DOM 遍历的距离或距离。这两个增强功能都适用于罕见的用例，但它们在内部使用时效果很好！

了解更多关于 .closest(…)

15。新活动！ focusIn 和 focusOut

如上所述，要委托“focus”和“blur”事件，您必须使用这些新事件，称为“focusin”和“focusout”。这些事件允许您在元素或元素的后代获得焦点时采取操作。

jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

로그인 후 복사

您还应该注意，这两个事件都不会传播（“冒泡”）；他们被俘虏了。这意味着最外层（祖先）元素将在因果“目标”元素之前被触发。

了解有关 focusIn 和 focusOut 事件的更多信息。