ホームページ > 記事 > CMS チュートリアル > 知っておくべき15の新機能: jQuery 1.4がリリース

知っておくべき15の新機能: jQuery 1.4がリリース

王林オリジナル: 2023-08-30 22:53:07747ブラウズ

jQuery 1.4 が最近リリースされました。一部の人が推測しているように、これは単なるメンテナンスリリースではありません。 1.4 には、多数の新機能、拡張機能、およびパフォーマンスの向上が含まれています。この記事では、有益と思われる新機能と拡張機能について説明します。

jQuery 1.4 はここからダウンロードできます: http://code.jquery.com/jquery-1.4.js

＃＃＃１。 jQuery(...)

にプロパティを渡す

1.4 より前では、jQuery は便利な "

attr" メソッドを使用して要素のコレクションに属性を追加することをサポートしていました。このメソッドには、属性名と値、または複数の属性を指定するオブジェクトを渡すことができました。 jQuery 1.4 では、要素の作成時にプロパティオブジェクトを jQuery 関数自体の 2 番目の引数として渡すサポートが追加されました。

複数の属性を持つアンカー要素を作成する必要があるとします。 1.4 の場合、これは次のように簡単です:

リーリー

text" 属性に気づいたかもしれません。アンカーには "text" 属性がないので、これが何をするのか疑問に思っているかもしれません。 jQuery 1.4 は、特定のプロパティを渡すときに独自のメソッドを使用します。したがって、上で指定した「text」属性により、jQuery は「.text()」メソッドを呼び出し、「Go to Google!」を唯一の引数として渡します。

より良い実践例:

リーリー

「id」は通常の属性として追加されますが、「css」および「click」属性は、対応する各メソッドの呼び出しをトリガーします。バージョン 1.4 より前の上記のコードは、次のように記述する必要があります:

リーリー

jQuery(...)について詳しく学ぶ

＃＃＃２。全部「まで」！

1.4 の DOM トラバーサルライブラリに、「

nextUntil

」、「prevUntil」、「parentsUntil」という 3 つの新しいメソッドが追加されました。これらの各メソッドは、渡されたセレクターが満足されるまで、DOM を何らかの方向に走査します。したがって、果物のリストがあるとします。 リーリー 「Apple」以降の項目をすべて選択したいが、「Strawberry」に到達した時点で停止したいとします。これ以上に簡単なことはありません:

リーリー

詳細: prevUntil、nextUntil、parentsUntil

＃＃＃３。複数のイベントハンドラーのバインド

多数のイベントバインディングメソッドをチェーンする代わりに、次のようにすべてを同じ呼び出しにまとめることができます。リーリー

これは「

.one()

」にも当てはまります。

.bind(...) について詳しく学ぶ＃＃＃４。属性ごとに緩い

単一のアニメーションに対して 1 つのイージング関数を定義するのではなく、アニメーション化するプロパティごとに異なるイージング関数を定義できるようになりました。 jQuery には、swing (デフォルト) と Linear という 2 つのイージング関数が含まれています。他のものについては、個別にダウンロードする必要があります。

各プロパティにイージング関数を指定するには、プロパティを配列として定義するだけです。最初の値はそのプロパティでアニメーション化する値、2 番目の値は使用するイージング関数です。

リーリー

このコードの実際の効果を見てください。

オプションのオプションオブジェクトの各プロパティのイージング関数を、「specialEasing」オブジェクトのプロパティ名と値のペアとして定義することもできます。

リーリー

編集者注記 - この記事の著者、James Padolsey は非常に謙虚な人物です。この新機能は彼のアイデアでした。

属性によるイージングの詳細についてはこちらをご覧ください

＃＃＃５。新しいライブイベント！ jQuery 1.4 では、デリゲート "

Submit

"、"

Change

"、"

Focus

"、および "Blur" のサポートが追加されました。 " イベント。jQuery では、イベントを委任するために ".live()" メソッドを使用します。多くの要素にイベントハンドラーを登録する必要があり、時間の経過とともに新しいイベントハンドラーが追加される可能性がある場合、これは作業時に便利です。要素を使用します (「.live()」を使用する方が、常に再バインドするよりもコストがかかりません)。しかし、注意してください! 「フォーカス」イベントと「ブラー」イベントを委任したい場合は、イベント名「focusin」と「focusout

」を使用する必要があります。

リーリー＃＃＃６。制御関数コンテキスト jQuery 1.4 は、jQuery 名前空間で新しい「proxy」関数を提供します。この関数は、「スコープ」とメソッド名、または関数と予期されるスコープのいずれかの 2 つのパラメーターを受け入れます。 JavaScript の「this」キーワードを習得するのは難しい場合があります。場合によっては、それを要素ではなく、以前に作成したオブジェクトにしたい場合があります。たとえば、ここには「

app

」オブジェクトがあり、これには「

clickHandler

」メソッドと構成オブジェクトという 2 つのプロパティがあります。リーリー 「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()”创建的对象。

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 事件的更多信息。

享受 jQuery 1.4，迄今为止最受期待、功能最丰富、性能最佳的 jQuery 版本！

嗯，就是这样！我已尽力涵盖我认为会对您产生影响的变化！

如果您还没有看过，您应该查看“jQuery 14 天”，这是一场精彩的在线活动，标志着 jQuery 1.4 的发布以及 jQuery 的四周年生日！

并且不要忘记查看新的 API 文档！

编写 Plus 教程

您知道吗，为我们编写 PLUS 教程和/或截屏视频最多可赚取 600 美元？ 我们正在寻找有关 HTML、CSS、PHP 和 JavaScript 的深入且编写良好的教程。如果您有能力，请通过 nettuts@tutsplus.com 联系 Jeffrey。

请注意，实际报酬将取决于最终教程和截屏视频的质量。

在 Twitter 上关注我们，或订阅 Nettuts+ RSS Feed 以获取网络上最好的 Web 开发教程。

以上が知っておくべき15の新機能: jQuery 1.4がリリースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WooCommerce の包括的な紹介: 商品タグ、カテゴリ、属性の活用次の記事：WooCommerce の包括的な紹介: 商品タグ、カテゴリ、属性の活用

続きを見る

知っておくべき15の新機能: jQuery 1.4がリリース

にプロパティを渡す

1.4 の DOM トラバーサル ライブラリに、「

これは「

リーリー

"、"

」オブジェクトがあり、これには「

7。延迟动画队列

8。检查元素是否有某物

9。展开元素！

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

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

12。 DOM 操作方法接受回调

13。确定对象的类型

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

15。新活动！ focusIn 和 focusOut

享受 jQuery 1.4，迄今为止最受期待、功能最丰富、性能最佳的 jQuery 版本！

编写 Plus 教程

関連記事

1.4 の DOM トラバーサルライブラリに、「