検索
ホームページウェブフロントエンドjsチュートリアルプログラマーが知っておくべき 35 の jQuery コード スニペット

jQuery は現在、Web 開発で最も人気のある JavaScript ライブラリとなっており、jQuery と多数のプラグインを使用して、さまざまな素晴らしい効果を簡単に実現できます。この記事では、jQuery をより効率的に使用できるように、いくつかの実践的な jQuery スキルを紹介します。

迅速な開発に役立つ 35 の jQuery ヒント/コード スニペットを集めました。

1. 右クリックを無効にします

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

2. 検索テキストボックスのテキストを非表示にします

Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {
$("input.text1").val("Enter your search text here");
  textFill($('input.text1'));
});
  function textFill(input){ //input focus text function
   var originalvalue = input.val();
   input.focus( function(){
     if( $.trim(input.val()) == originalvalue ){ input.val(''); }
   });
   input.blur( function(){
     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
   });
}

3. 新しいウィンドウでリンクを開きます

XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
  //Example 1: Every link will open in a new window
  $('a[href^="http://"]').attr("target", "_blank");
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
   this.target = "_blank";
  });
});
// how to useopen link

4. ブラウザを検出します

注: バージョン jQuery 1.4 では、$.support が $.browser 変数を置き換えました

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
  // do something
}
// Target Safari
if( $.browser.safari ){
  // do something
}
// Target Chrome
if( $.browser.chrome){
  // do something
}
// Target Camino
if( $.browser.camino){
  // do something
}
// Target Opera
if( $.browser.opera){
  // do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version  6){
  // do something
}
});

5. 画像のプリロード

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

6. ページスタイルの切り替え

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $(&#39;link[rel=stylesheet]&#39;).attr(&#39;href&#39; , $(this).attr(&#39;rel&#39;));
  });
// how to use
// place this in your header// the linksDefault ThemeRed ThemeBlue Theme});

7. 列の高さは同じです

2 つの CSS 列が使用されている場合、このメソッドを使用して 2 つの列の高さを同じにすることができます。同じ 。

$(document).ready(function() {
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
// how to use
$(document).ready(function() {
  equalHeight($(".left"));
  equalHeight($(".right"));
});
});

8. ページのフォント サイズを動的に制御します

ユーザーはページのフォント サイズを変更できます

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  $(".resetFont").click(function(){
  $(&#39;html&#39;).css(&#39;font-size&#39;, originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
  var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
  return false;
 });
});

9. ページの先頭関数に戻ります

For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {
$(&#39;a[href*=#]&#39;).click(function() {
 if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
 && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
  if ($target.length) {
 var targetOffset = $target.offset().top;
 $(&#39;html,body&#39;)
 .animate({scrollTop: targetOffset}, 900);
  return false;
  }
 }
 });
// how to use
// place this where you want to scroll to// the linkgo to top});

10. マウス ポインタの XY 値を取得します。 🎜>

Want to know where your mouse cursor is?
$(document).ready(function() {
  $().mousemove(function(e){
   //display the x and y axis values inside the div with the id XY
  $(&#39;#XY&#39;).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});

11. トップに戻るボタン

トップに戻るアニメーションを実装するには、animate とscrollTopを使用します。他のプラグインを使用せずに。

// Back to top
$(&#39;a.top&#39;).click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top
scrollTop の値を変更することでリターンとトップの間の距離を調整できます。animate の 2 番目のパラメータはリターン動作の実行に必要な時間 (単位: ミリ秒) )。

12. 画像のプリロード

ページで非表示の画像 (ホバー表示など) が多数使用されている場合は、それらをプリロードする必要がある場合があります:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
  $(&#39;&#39;).attr(&#39;src&#39;, arguments[i]);
 }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

13. 画像がロードされているかどうかを確認します

次の操作を実行するために、画像がロードされていることを確認する必要がある場合があります。 >

$(&#39;img&#39;).load(function () {
 console.log(&#39;image load successful&#39;);
});
img を他の ID またはクラスに置き換えて、指定したイメージが読み込まれているかどうかを確認できます。

14. 壊れた画像を自動的に修正する

Web サイト上で壊れた画像リンクを見つけた場合は、簡単に置き換えることができない画像に置き換えることができます。 。この簡単なコードを追加すると、多くの問題を軽減できます:

$(&#39;img&#39;).on(&#39;error&#39;, function () {
 $(this).prop(&#39;src&#39;, &#39;img/broken.png&#39;);
});
サイトに壊れた画像リンクがない場合でも、このコードを追加しても問題はありません。

15. マウスホバー (hover) 切り替えクラス属性

ユーザーがクリック可能な要素の上にマウスを置いたときの効果を変更したい場合は、次のコードを使用します。要素の上にマウスを移動するとクラス属性を追加でき、ユーザーがマウスを離すとクラス属性を自動的にキャンセルできます:


$(&#39;.btn&#39;).hover(function () {
 $(this).addClass(&#39;hover&#39;);
 }, function () {
  $(this).removeClass(&#39;hover&#39;);
 });
你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法:
$(&#39;.btn&#39;).hover(function () { 
 $(this).toggleClass(&#39;hover&#39;); 
});
注: CSS を直接使用して実現します。この効果はより良い解決策である可能性がありますが、その方法を知る必要があります。

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

ユーザーが何らかのアクションを実行するまで、フォームの送信ボタンまたは入力フィールドを無効にする必要がある場合があります (たとえば、「読み取り」をチェックします)条件」チェックボックス)。無効な属性は、有効にするまで追加できます:


必要なのは、removeAttr メソッドを実行し、削除する属性をパラメータとして渡すことだけです:
$(&#39;input[type="submit"]&#39;).prop(&#39;disabled&#39;, true);


$(&#39;input[type="submit"]&#39;).removeAttr(&#39;disabled&#39;);
17. リンクの読み込みを防止する

ページにリンクしたくない、またはページをリロードしたくない場合は、別のことをしたい場合があります。または何かをトリガーする 他のスクリプトの場合は、次のようにすることができます:


$(&#39;a.no-link&#39;).click(function (e) {
 e.preventDefault();
});
18. フェード/スライドを切り替えます

スライドは私たちが使用するものです アニメーション効果は、要素の見栄えを良くするために jQuery でよく使用されます。ただし、要素が表示されるときに最初の効果が使用され、要素が消えるときに 2 番目の効果が使用されるようにしたい場合は、次のようにすることができます:


// Fade
$(&#39;.btn&#39;).click(function () {
 $(&#39;.element&#39;).fadeToggle(&#39;slow&#39;);
});
// Toggle
$(&#39;.btn&#39;).click(function () {
 $(&#39;.element&#39;).slideToggle(&#39;slow&#39;);
});
19. シンプルなアコーディオン効果

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


// Close all panels
$(&#39;#accordion&#39;).find(&#39;.content&#39;).hide();
// Accordion
$(&#39;#accordion&#39;).find(&#39;.accordion-header&#39;).click(function () {
 var next = $(this).next();
 next.slideToggle(&#39;fast&#39;);
 $(&#39;.content&#39;).not(next).slideUp(&#39;fast&#39;);
 return false;
});
20. 2 つの DIV を同じ高さにする

内部のコンテンツに関係なく、2 つの DIV を同じ高さにする必要がある場合があります。次のコード スニペットを使用できます:

var $columns = $(&#39;.column&#39;);
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
  height = $(this).height();
 }
});
$columns.height(height);
このコードは、要素のグループをループし、要素の高さを要素内の最大の高さに設定します。

21. 要素が空かどうかを確認します

This will allow you to check if an element is empty.
$(document).ready(function() {
 if ($(&#39;#id&#39;).html()) {
  // do something
  }
});
22. 要素

$(document).ready(function() {
  $(&#39;#id&#39;).replaceWith(&#39;I have been replaced&#39;);
});
23. jQuery 遅延読み込み関数

$(document).ready(function() {
  window.setTimeout(function() {
   // do something
  }, 1000);
});
24. 🎜>

25. 要素が jquery オブジェクト コレクションに存在するかどうかを確認します
$(document).ready(function() {
  var el = $(&#39;#id&#39;);
  el.html(el.html().replace(/word/ig, ""));
});

26 . DIV 全体をクリック可能にします
$(document).ready(function() {
  if ($(&#39;#id&#39;).length) {
 // do something
 }
});

27. ID与Class之间转换

当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $(&#39;body&#39;).addClass(&#39;large&#39;);
  }
  else {
    $(&#39;body&#39;).removeClass(&#39;large&#39;);
  }
  }
$(window).resize(checkWindowSize);
});

28. 克隆对象

$(document).ready(function() {
  var cloned = $(&#39;#id&#39;).clone();
// how to use});

29. 使元素居屏幕中间位置

$(document).ready(function() {
 jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
   return this;
 }
 $("#id").center();
});

30. 写自己的选择器

$(document).ready(function() {
  $.extend($.expr[&#39;:&#39;], {
    moreThen1000px: function(a) {
      return $(a).width() > 1000;
   }
  });
 $(&#39;.box:moreThen1000px&#39;).click(function() {
   // creating a simple js alert box
   alert(&#39;The element that you have clicked is over 1000 pixels wide&#39;);
 });
});

31. 统计元素个数

$(document).ready(function() {
  $("p").size();
});

32. 使用自己的 Bullets

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

33. 引用Google主机上的Jquery类库

//Example 1

34. 禁用Jquery(动画)效果

$(document).ready(function() {
  jQuery.fx.off = true;
});

35. 与其他Javascript类库冲突解决方案

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq(&#39;#id&#39;).show();
});

以上就是本章的全部内容,更多相关教程请访问jQuery视频教程

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

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか?ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか?Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

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

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

メモ帳++7.3.1

メモ帳++7.3.1

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

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。