ホームページ ウェブフロントエンド 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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。 関数isvaliddate(s){ var bits = s.split( '/'); var d = new Date(bits [2] '/' bits [1] '/'ビット[0]); return !!(d &&(d.getmonth()1)== bits [1] && d.getdate()== number(bits [0])); } //テスト var

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $( "div.header")。css( "margin"、 "10px"); $( "div.header")。css( "padding"、 "10px"); このコードはそうだと思うかもしれません

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。 タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。 関連記事:10 jQueryタブプラグイン

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください!このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。 関連投稿: 1

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 (デモンストレーションはありません、それを直接firebugにコピーしてください) // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $(this)、 wintop = contentarea.scrolltop()、 docheight = $(d).height()、 winheight = $(w).height()、 divheight = $( '#c

See all articles