ホームページ ウェブフロントエンド jsチュートリアル WEB フロントエンド開発者が知っておくべき jquery のヒントと jquery の 3 つの略語_jquery

WEB フロントエンド開発者が知っておくべき jquery のヒントと jquery の 3 つの略語_jquery

May 16, 2016 pm 03:32 PM

jQuery スキルの向上に役立つ簡単なヒントのコレクション。現在、エディターは 14 の jquery ヒントをまとめています。

ディレクトリ構造

1 トップに戻るボタン
2 つのプリロードされた画像
3 画像が読み込まれているか確認する
4 破損した写真を自動的に修復
クラススイッチオン 5Hover
6入力欄を無効にする
7リンクの読み込みを停止
8 フェード/スライドスイッチ
9 つのシンプルな折りたたみエフェクト
102つのDivを同じ高さに設定します
11外部リンクを新しいウィンドウで開きます
12 テキスト要素
を見つけます 13表示トリガーと非表示トリガーを切り替える

以下では、各ヒントの具体的な意味を紹介します。

1. トップに戻るボタン

jQuery で animate メソッドとscrollTop メソッドを使用すると、プラグインを必要とせずに、単純なトップに戻るアニメーションを作成できます。

 // Back to top
 $('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
 });
 <!-- Create an anchor tag -->
 <a class="top" href="#">Back to top</a>
ログイン後にコピー

scrollTop の値を、スクロールバーを停止させたい位置に変更します。次に、800 ミリ秒以内に先頭に戻るように設定します。

2. 画像をプリロードします

ページで、最初は表示されない画像が多数使用されている場合 (ホバーにバインドされているなど)、それらをプリロードすると便利です:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
 };
 $.preloadImages('img/hover-on.png', 'img/hover-off.png');
ログイン後にコピー

3. 画像が読み込まれているか確認します

スクリプトで後続の操作を実行する前に、画像が完全にロードされているかどうかを確認する必要がある場合があります:

 $('img').load(function () {
 console.log('image load successful');
});
ログイン後にコピー

img タグを ID またはクラスに置き換えることで、特定の画像がロードされているかどうかを確認することもできます。

4. 破損した写真を自動的に修復します

Webサイト上の画像リンクが切れていることに気付いた場合、いちいち張り替えるのは面倒です。この単純なコードは非常に役立ちます:

 $('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});
ログイン後にコピー

リンク切れがない場合でも、このコードを追加しても影響はありません。

5. ホバー時のクラス切り替え

ユーザーがページ上のクリック可能な要素の上にマウスを置いた場合、この要素の視覚的表現を変更したいとします。次のコードを使用すると、ユーザーが要素にホバーしたときにクラスを追加し、ユーザーがマウスを離れたときにクラスを削除できます。

 $('.btn').hover(function () {
 $(this).addClass('hover');
 }, function () {
 $(this).removeClass('hover');
 });
ログイン後にコピー
必要な CSS を追加するだけです。もっと簡単な方法が必要な場合は、toggleClass メソッドを使用することもできます:

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});
ログイン後にコピー

注: この例では CSS の方が高速な解決策である可能性がありますが、それでも知っておく価値はあります。

6. 入力フィールドを無効にする

ユーザーが特定のアクション (「規約を読みました」チェックボックスを確認するなど) を実行するまで、フォームの送信ボタンやテキスト入力ボックスを使用できないようにしたい場合があります。必要な効果を実現するには、入力に無効な属性を追加します:

 $('input[type="submit"]').prop('disabled', true);
ログイン後にコピー
disabled の値を false に変更したい場合は、入力に対して prop メソッドを再度実行するだけです。

 $('input[type="submit"]').prop('disabled', false);
ログイン後にコピー

7. リンクの読み込みを停止します

リンクでページにジャンプしたり、ページをリロードしたりしたくないが、他のスクリプトをトリガーするなど、別のことを実行できるようにしたい場合があります。次のコードは、デフォルトの動作を無効にするちょっとしたトリックです:

 $('a.no-link').click(function (e) {
 e.preventDefault();
 });
ログイン後にコピー

8. フェード/スライドスイッチ

フェードイン、フェードアウト、スライドは、jQuery を使用して作成することが多いアニメーション効果です。ユーザーが何かをクリックしたときに要素を表示したいだけかもしれません。fadeIn と slideDown の使用はどちらも優れています。ただし、要素を最初のクリックで表示し、2 回目のクリックで非表示にしたい場合は、次のコードを使用するとうまく機能します:

// Fade
 $('.btn').click(function () {
 $('.element').fadeToggle('slow');
 });
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

ログイン後にコピー

9. シンプルなアコーディオンエフェクト

アコーディオン効果を素早く簡単に実現する方法は次のとおりです:

 // Close all panels
 $('#accordion').find('.content').hide(); 
 // Accordion
 $('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
 });
ログイン後にコピー
このスクリプトを追加したら、必要な HTML 内でスクリプトが適切に動作するかどうかを確認するだけです。

10. 2 つの Div を同じ高さにします

含まれるコンテンツに関係なく、2 つの div を同じ高さにしたい場合があります。

('.div').css('min-height', $('.main-div').height());
ログイン後にコピー
この例では min-height を設定します。つまり、メイン div よりも大きくすることはできますが、小さくすることはできません。ただし、より柔軟な方法は、要素のセットの設定を繰り返し、高さを要素内の最高値に設定することです:

 var $columns = $('.column');
 var height = 0;
 $columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
 });
 $columns.height(height);
ログイン後にコピー
すべての列を同じ高さにしたい場合:

 var $rows = $('.same-height-columns');
 $rows.each(function () {
 $(this).find('.column').height($(this).height());
}); 
ログイン後にコピー

11. 新しいタブ/ウィンドウで外部リンクを開きます

外部リンクを新しいタブまたはウィンドウで開き、内部リンクも同じタブまたはウィンドウで開くようにしてください:

 $('a[href^="http"]').attr('target', '_blank');
 $('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
ログイン後にコピー

注意:window.location.origin 在 IE 10 中不可用,该 issue 的修复方法。

12.通过文本找到元素

通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。如果文本不存在,该元素将会隐藏:

var search = $('#search').val();
 $('div:not(:contains("' + search + '"))').hide();
ログイン後にコピー

13.视觉改变触发

当用户焦点在另外一个标签上,或重新回到标签时,触发 JavaScript:

 $(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
 });
ログイン後にコピー

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理:

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
 });
ログイン後にコピー

14.插件链式调用

jQuery 支持链式调用插件,以减缓反复查询 DOM,并创建多个 jQuery 对象。看下面示例代码:

 $('#elem').show();
 $('#elem').html('bla');
$('#elem').otherStuff();
ログイン後にコピー

上面这段代码,可以通过链式操作大大改进:

 $('#elem')
 .show()
 .html('bla')
 .otherStuff();
ログイン後にコピー

还有另外一种方法,把元素缓存在变量中(前缀是 $ ):

var $elem = $('#elem');
 $elem.hide();
 $elem.html('bla');
 $elem.otherStuff();
ログイン後にコピー

jQuery 中的链式操作和缓存方法,都极大精简和提速了代码。

下面给大家介绍jquery小技巧之三个简写

简洁写法如下所示:

对象的简写

在过去,如果你想创建一个对象,你需要这样:

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;
ログイン後にコピー

下面的写法能够达到同样的效果:

var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}
ログイン後にコピー

这样就简单多了,你不需要反复使用这个对象的名称。
这样 car 就定义好了,也许你会遇到 invalidUserInSession 的问题,这只有你在使用IE时会碰到,只要记住一点,不要右大括号前面写分号,你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样:

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4');
ログイン後にコピー

简写版是这样:

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4']; 
ログイン後にコピー

对于数组,这里有个问题,其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ,就像这样:

var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;
ログイン後にコピー

数组不是万能的;这样写不对,会让人困惑。图组实际上是对象的功能,人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子:

var direction; 
if(x < 200){ 
  direction = 1; 
}
else { 
  direction = -1; 
}
ログイン後にコピー

你可以使用三元条件符号简化它:

var direction = x < 200 &#63; 1 : -1;
ログイン後にコピー

当条件为true 时取问号后面的值,否则取冒号后面的值。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

PowerPointはJavaScriptを実行できますか? PowerPointはJavaScriptを実行できますか? Apr 01, 2025 pm 05:17 PM

JavaScriptはPowerPointで実行でき、外部JavaScriptファイルを呼び出したり、VBAを介してHTMLファイルを埋め込んだりすることで実装できます。 1. VBAを使用してJavaScriptファイルを呼び出すには、マクロを有効にし、VBAプログラミングの知識を持つ必要があります。 2。JavaScriptを含むHTMLファイルを埋め込みます。これは、シンプルで使いやすいが、セキュリティ制限の対象となります。利点には、拡張機能と柔軟性が含まれますが、欠点にはセキュリティ、互換性、複雑さが含まれます。実際には、セキュリティ、互換性、パフォーマンス、ユーザーエクスペリエンスに注意を払う必要があります。

See all articles