jQueryの開始方法:JavaScriptプログラミングをより簡単にする

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


ついに、すべてのWebサイトの90%以上がJavaScriptを実行していた。最も人気のあるJavaScriptライブラリとして、jQueryは最新のWebサイトの大部分で使用されており、1,000万のWebで最も人気のあるサイトの約65%が使用されています.

つまり、Web開発者、Webサイトデザイナー、またはWebマスターになりたい場合は、jQueryの操作方法を知る必要があります。.

jQueryの概要

Contents

jQueryとは?

JavaScriptは、ウェブサイトにインタラクティブ機能を追加するために使用されるプログラミング言語です。 jQueryは、JavaScriptで一般的に管理されるタスクを処理するビルド済みJavaScript関数のライブラリです。本質的に、jQueryはJavaScriptの使用をより簡単かつ高速にします.

jQueryは、訪問者のアクティビティに応じてWebページ上のHTML要素を簡単に検索、選択、操作できるコマンドのライブラリです。たとえば、jQueryを使用すると、特定の要素を選択できます。

ヘッダー要素、および訪問者のアクティビティに基づいて何らかの方法でそれらを操作させる–マウスを要素の上に置いたときのフォントサイズの変更など.

jQueryの長所は、HTML要素に追加の属性を適用する必要なく、HTML要素を簡単に見つけて選択できることです。.

jQueryは難しいことを簡単にする

jQueryで実行できることはすべて、JavaScriptでも実行できます。違いは、JavaScriptで実行するのが非常に複雑になる可能性のある多くのことは、jQueryで非常に簡単に実行できることです。 2つの例を見てみましょう:トグルとトリガー.

トグルでページ要素を非表示または表示する

CSS表示プロパティを使用して、HTML要素を非表示にすることができます。 CSSセレクターを使用してHTML要素を選択し、値noneをdisplayプロパティに適用すると、要素はビューに表示されなくなります。コマンドでHTML要素を非表示にしたい場合、CSS表示プロパティを使用してそれを実現できます。.

JavaScriptを使用してCSS表示プロパティを制御することにより、HTML要素を非表示または表示することはそれほど難しくありません。ただし、jQueryのtoggle()メソッドには、JavaScriptで複製するのが非常に難しい強力なトグル効果を簡単に生成できるようにする多くの組み込みオプションが含まれています。 HTMLドキュメントにボイラープレートjQueryに加えてjQuery UIを含める場合、多数のjQuery UI効果を使用して、トグルされた要素の非表示および表示方法を制御することもできます。.

jQuery toggle()メソッドの使用方法を学びたい場合は、始めるための多くの場所があります。

  • jQueryの学習:jQuery Foundationの無料の教育リソース。完全なjQueryチュートリアルは完了する価値があり、このドキュメントの最後にあるリソースにリンクしています。ただし、トグルメソッドを説明するセクションに直接移動する場合は、このリンクを使用してください。.
  • jQuery APIドキュメント:トグルメソッドの概要と、それと一緒に使用できるすべてのオプション.
  • jQuery UIのエフェクトとトグル:jQuery UIは、toggleメソッドをいくつかのエフェクトで拡張します。さらに、エフェクトがトグルメソッドを補完する方法のライブデモがあります。.
  • W3SchoolsでのjQuery toggle()メソッド:toggleメソッドの簡単な紹介と、それを試すことができるコードサンドボックス.
  • Akshay JaiswalによるjQueryトグル効果のチュートリアルとHarry FinnによるjQueryトグル効果は、jQueryを含むHTMLドキュメントを作成し、トグルメソッドを使用してHTML要素を非表示または表示する方法を簡単に示す2つのYouTubeビデオチュートリアルです.

トリガーイベントハンドラーでスクリプトを実行する

jQueryが非常に簡単にするもう1つのタスクは、実際のイベントが発生していなくてもイベントハンドラーをトリガーすることです。たとえば、JavaScriptのonclickイベントを使用して特定のボタンがクリックされるたびに実行されるスクリプトがあるとします。では、ボタン自体がクリックされたかのように別のアクションが実行されるときに同じスクリプトを実行したい場合はどうでしょうか。 trigger()イベントハンドラが答えです.

トリガーメソッドの基本的な使用方法には、特定のイベントにトリガーメソッドを適用し、最初のイベントが発生したときにそれを使用して2番目のイベントをトリガーすることが含まれます。複雑に聞こえるかもしれませんが、トリガーメソッドの基本的な使い方は簡単です。以下のリソースを使用して、基本をカバーし、メソッドのいくつかのより高度な使用法を見てください.

  • イベントハンドラーのトリガー:このリンクを使用して、Learn jQueryチュートリアルのイベントハンドラーのトリガーに関する章に直接移動します。.
  • jQuery APIドキュメント:トリガーメソッドの概要と、トリガーメソッドで使用できるすべてのパラメーターとオプション.
  • W3SchoolsでのjQuery trigger()メソッド:jQueryトリガーメソッドの紹介とコードをテストするためのコードサンドボックス.
  • jQueryでカスタムイベントを作成する方法:組み込みのjQueryイベントではなくカスタムイベントでトリガーメソッドを使用できるようにカスタムjQueryイベントを作成する方法を説明するSitepointチュートリアル.
  • jQueryで実際のイベント名をトリガーしないでください!多くの開発者は、次のような標準のjQueryイベントを使用します "クリック" イベントをトリガーするイベントタイプとして。ただし、これにより問題が発生する可能性があるため、トリガーメソッドでカスタムイベントを使用することをお勧めします。.

jQueryを使用する利点

jQueryがJavaScriptの使用を簡単にするだけの場合、なぜjQueryを使用するのですか? JavaScriptだけに固執し、まったく新しいコマンドと実装のセットを学ぶ必要がないようにしてください。?

ウィキペディアによると、jQueryによって提供される少なくとも4つの利点があります.

  1. jQueryはスクリプトとHTMLの分離を促進します. スクリプトは直接HTMLドキュメントに書き込むことができますが、Web設計および開発コミュニティにおける現在の考え方では、HTML、CSS、およびJavaScriptはすべて個別に保守する必要があります。これは、スクリプトを特定のHTML要素およびイベントに関連付ける方法が必要なため、複雑です。 jQueryを使用しない場合、これを行う最も簡単な方法は、JavaScript関数を呼び出すHTMLドキュメントにイベント属性を追加することです。ただし、jQueryは、JavaScriptを使用してイベントハンドラーを動的に追加するための簡単な構文を提供することで、これを行う必要性を回避します。これにより、JavaScriptをHTMLドキュメントから完全に分離できます。.
  2. jQueryは、より簡潔でわかりやすいスクリプトを作成することをプログラマーに奨励します. jQueryは簡潔にするために設計されています。 jQueryで実行できることはすべて、プレーンJavaScriptでも実行できます。ただし、jQueryコードは通常、同じタスクを実行するためのJavaScriptコードよりもはるかに短くて明確です。.
  3. jQueryを使用すると、ブラウザー間の不整合が解消されます. JavaScriptのレンダリングはブラウザーエンジンによって多少異なりますが、jQueryはブラウザー間の違いを処理し、ブラウザー間で一貫したエクスペリエンスを提供するために開発されました.
  4. jQueryは拡張可能です. jQueryライブラリは、新しい要素、イベント、メソッドを簡単に追加できるように設計されています。これらの新しいアイテムがローカルのjQueryライブラリに追加されると、プラグインとしてWebサイト全体で簡単に再利用できます.

jQueryを使ってみる

jQueryの使い方を学ぶ準備ができていて、まだJavaScriptに慣れていない場合、jQueryを学ぶための最初のステップはJavaScriptを学ぶことです.

前述したように、jQueryはJavaScriptコマンドのライブラリです。その結果、jQueryはJavaScriptと同じ基本的な構文と構造に従います。 JavaScriptの構文、構造、および基本的な機能を十分に理解することは、jQueryを習得するために不可欠です。 jQuery Foundationによると:

jQueryのすべての機能はJavaScriptを介してアクセスされるため、JavaScriptを十分に理解することは、コードの理解、構造化、およびデバッグに不可欠です。 jQueryを定期的に使用することで、JavaScriptの習熟度を徐々に向上させることができますが、JavaScriptの組み込みの構文や構文に関する実用的な知識がないと、jQueryの作成を開始するのが難しい場合があります。.

あなたの開発環境

コーディングを開始する前に、開発環境をセットアップする必要があります。良いニュースは、jQueryを書き始めるために本当に必要なのは、Webブラウザー、テキストエディター、およびjQueryのコピーだけであることです。.

どのWebブラウザーでも機能しますが、開発者はMozilla FirefoxまたはGoogle Chromeを使用します。 Internet ExplorerまたはEdge、Opera、Safariを使用して複数のブラウザーでコードをテストすることもできますが、FirefoxまたはChromeをまだ使用していない場合は、これらの無料アプリケーションのいずれかまたは両方の最新バージョンをダウンロードしてインストールしてください。開発目的で使用する.

確かに、メモ帳を使用してコードを書くことはできますが、なぜそうするのでしょうか。無料または非常にリーズナブルなコストで利用できる多くの優れたテキストエディターがあり、コーディングを容易にし、エラーが発生しにくいように設計された多くの機能を提供します。私たちのお気に入りのいくつかは、Atom、Appleコンピューター用のTextMate、Windowsコンピューター用のNotepad ++、およびブラケットです。.

最後に、jQueryはJavaScriptに基づいて構築されたコマンドのライブラリであるため、jQueryを使用するドキュメントからjQueryライブラリを呼び出す必要があります。これを行うには、jQueryをダウンロードするか、オンラインでホストされているjQueryライブラリにリンクする必要があります.

資源

最高のjQueryチュートリアル、電子ブック、インタラクティブコースをウェブで探しました。私たちの推奨は、これらのリソースのいくつかを利用して、あなたの学習スタイルに最適なリソースを順を追って取り組むことです.

推奨されるトレーニングの進行は、jQueryの能力を示し、世界で最も人気のあるJavaScriptライブラリで何ができるかを示すいくつかの基本的なインタラクティブチュートリアルから始まります。次に、Mozilla Developer NetworkやjQuery Foundationなど、Web開発で最も尊敬されている名前が提供する詳細なチュートリアルを確認して、jQueryをさらに詳しく見ていきます。最後に、電子ブックまたはペーパーバックのテキストを読み進めてjQueryをマスターします.

無料のインタラクティブコース

プログラミング言語がどのように機能し、何ができるかを説明するために書かれた文書でできることは、あまりにも多くあります。言語の力を実際に理解するには、実際の動作を確認する必要があります。無料のインタラクティブコースは、プログラミング言語の基本的な構文をすばやく理解しながら、実際に何ができるかを学ぶための最良の方法の1つです。.

jQuery Foundationは、jQueryに飛び込む前にJavaScriptを学習することを推奨しているため、同じように学習することをお勧めします。これらの無料コースでは、基本的なJavaSciptをすぐに作成できます。

  • CodeSchoolのJavaScriptロードトリップパート1:このロードトリップのパート1だけが無料です。旅行の残りの部分はペイウォールの後ろに隠されています。無料のコンテンツを確認してから、Codecademyに移動して学習を続けます.
  • CodecademyによるJavaScript:このフルレングスのオンラインコースのコンテンツは無料です。クイズへのアクセスはオプションであり、値札が付いています。コースの所要時間は約10時間で、基本的なJavaScriptコードを記述できるようになります。このコースを身に付ければ、jQueryに取り組む準備が整います。.

jQueryで何ができるかについての基本的な理解を深めるには、2つのインタラクティブなjQueryコースが必要です。これらのコースは次のとおりです。

  • jQueryを試す:CodeSchoolと共同でjQuery FoundationがまとめたjQueryの無料紹介.
  • CodecademyによるjQuery:このコースの所要時間は約3時間です。 JavaScriptコースの場合と同様に、コースの内容は無料ですが、クイズを受けたい場合は、その料金を支払う必要があります。私たちの推奨は、無料のコンテンツを処理してから、追加のリソースに移ることです。完了すると、jQueryを使用してHTML要素を選択する方法、これらの要素のスタイルを設定する方法、およびWebサイトの訪問者のアクションをjQueryコードに結び付けて、Webサイトが対話的に応答するようになる方法がわかります。.

業界のリーダーによる詳細なチュートリアルと学習ガイド

JavaScriptとjQueryの学習は密接に関連しています。 jQueryをさらに深く理解する準備ができている場合は、JavaScriptの知識を広げる必要もあります。 JavaScriptについて学ぶのに最適な場所の1つは、Mozilla Developer Network(MDN)です。これらのすばらしいリソースをチェックしてください:

  • JavaScriptの基本:私たちが推奨するインタラクティブコースを通じて実際にJavaScriptを使用する方法の基本を学んだかもしれませんが、MDNでは、プロの開発者がJavaScriptについて考え、使用する方法を学びます。注意深く読んだ場合、このドキュメントは完全に消化されるまでに数時間かかります。.
  • JavaScriptガイド:この広範なガイドとチュートリアルでは、関数、エラー処理、ループ、文法、式など、JavaScript言語の基本的なトピックすべてについて説明します。このガイドを通してそれを作りなさい、そしてあなたは平均的なウェブデザイナーがより多くのJavaScriptを知るであろう.

MDNのJavaScriptリソースを使用して作成した場合は、jQuery Foundationが提供するトレーニングに取り組む準備ができています。 jQuery FoundationのWebサイトには、章で構成された広範なラーニングセンターがあります。各章は、jQuery、エフェクト、Ajax、プラグインなどの特定のトピックに特化しています。この信頼できるリソースは詳細かつ技術的です-jQueryをマスターする場合に必要なものだけです.

電子ブックとペーパーバック

これまでに説明したリソースを使用して作業を終えると、jQueryを使用して、一般的なWebデザインシナリオに取り組む準備が整います。さらに、jQuery APIを使用してより複雑な問題に取り組むために必要なヘルプを見つけるのに十分な知識があります。.

高度なjQuery開発者になる準備ができたら、途中で役立ついくつかのテキストがあります。.

無料の電子ブック

私たちはjQueryコミュニティー内で評判の高い2つの無料の電子ブックを見つけました。 jQueryのコーディング経験を身につけた上で、次の高品質のテキストのいずれかまたは両方を処理することにより、最も人気のあるJavaScriptライブラリの新しいレベルの理解を深めてください。

  • jQuery Fundamentals by BoCoup、LLC .:電子ブックとインタラクティブチュートリアルの一部です。このテキストは、jQueryを書面と実際の例の両方でカバーしています。.
  • jQuery簡潔に、Cody Lindleyによって作成され、Syncfusionによってホストされています。高度なjQuery開発に不可欠な概念をカバーする100ページのテキスト。始めたばかりの場合、これはあなたにとってはテキストではありませんが、次のステップに進む準備ができている適度に有能なJavaScriptまたはjQueryの開発者である場合、このテキストは優れた選択です.

文庫本

物理的なテキストがお好みの場合は、今日入手可能なjQueryのテキストの中で最も優れたものをいくつか示します。

  • jQueryの学習:jQuery Foundation顧問委員会の現在のメンバーであるKarl Swedbergは、Web開発者であり影響力のあるDrupalプログラマーであるJonathan Chafferとともに、JavaScriptの初心者や経験豊富な開発者に適するようにこのテキストを設計しました。このテキストはKindleでも利用できます.
  • JavaScriptとJQuery、インタラクティブなフロントエンドWeb開発:Jon Duckettによるこのテキストは、HTMLとCSSに関する彼の主要なテキストを補完するものであり、今日入手可能な最も人気のあるJavaScriptとjQueryテキストになる可能性があります。.
  • Bear Bibeault、Yehuda Katz、Aurelio De RosaによるjQuery in Action:KatzとDe RosaはどちらもjQuery Foundationのアクティブなメンバーです。Katzは顧問委員会のメンバーで、De Rosaはコンテンツチームのメンバーです。この信頼できるテキストは、JavaScript開発者の初心者に理想的なjQueryの急速な変化です。.

jQueryを使用した設計

このセクションでは、jQueryを使用して素晴らしい相互作用するWebサイトを設計する方法を見ていきます。それが終わるまでに、利用可能なツールを理解し、必要なすべての知識、リソース、ツールを手に入れます.

JavaScript

JavaScriptは、すべての最新のWebブラウザーに組み込まれているプログラミング言語です。 HTMLとCSSとともに、最新のWebテクノロジートライアドの第3レッグです。.

JavaScriptは、Web内外のさまざまなスクリプトタスクに使用できる高レベルの一般的なプログラミング言語です。デザイナーがJavaScriptを使用する主な方法は、ユーザーインタラクションを強化することです。スタイリングの変更とAJAX呼び出しは、JavaScriptを利用できるユーザー操作の2つの例です。それぞれを簡単に見てみましょう.

しかし、最初に、少し前に戻り、JavaScriptのいくつかの側面について説明します.

JavaScriptでスタイルを変更する

Webページのスタイリングは通常、カスケードスタイルシート(CSS)のドメインですが、JavaScriptを使用してCSSを操作できます。次のように、要素を選択し、styleプロパティを使用して、スタイルを直接操作できます。

My Divのコンテンツ

document.getElementById("my-div").style.backgroundColor = "青い";

JavaScriptのこのビットは、my-divのIDを持つ要素を取得し、青色の背景色を適用します。 JavaScriptを使用してCSSを直接​​操作するのは便利ですが、一連のスタイルを一度に変更したい場合は、それらのスタイルをサイトのCSSに含めてから、JavaScriptを使用してスタイルを適用する方がはるかに簡単です。これを行う方法の1つを次に示します。

.最初の状態{
背景色:#303030;
色:#fff;
border:3px solid #ddd;
幅:200px;
高さ:200px;
}
.2番目の状態{
background-color:#ddd;
色:#333;
border:3px solid#333;
幅:300px;
高さ:300px;
}

My Divのコンテンツ

document.getElementById("my-div").onclick = function(){
this.className = "セカンドステート";
}

これで、my-divのid属性を持つdiv要素をクリックすると、最初の状態のクラスが削除され、2番目の状態のクラスに置き換えられ、2番目の状態のクラスのCSSが適用されます.

クラスアニメーションを追加

AJAXを使用したコンテンツのオンザフライ更新

非同期JavaScriptおよびXMLの略であるAJAXは、ページを更新せずにWebページにコンテンツを追加するために使用される手法です。基本的な考え方は、JavaScriptがデータをバックグラウンドでWebサーバーに送信し、サーバーから応答を受信し、その応答に基づいてWebページのコンテンツを調整することです.

それは少し理論的に聞こえるかもしれませんので、実用的にしましょう。 AJAXは、オートコンプリート機能、無限スクロール、インスタント検索結果などを可能にします。いずれの場合も、WebページはデータをWebサーバーに送信し、更新せずに応答をWebページにロードします.

AJAX呼び出しの実装は困難な作業であり、基本的なJavaScriptプログラミングを超えています。ただし、フロントエンドの開発者またはデザイナーとして、AJAXはJavaScript機能の1つであり、これなしでは実現できません。次のセクションでは、優れたAJAXリソースを取り上げます.

JavaScriptリソース

JavaScriptのスキルが少し錆びている場合は、次の3つの優れたリソースを参考にしてください。

  • CodeCademyのJavaScriptコースでは、ブラウザベースのインタラクティブコースで構文、ループ、制御フロー、データ構造、オブジェクトを紹介しています.
  • Mozilla Developer Network(MDN)JavaScriptベーシックチュートリアルは、JavaScript構文、変数、演算子、条件、関数、およびイベントの紹介です。.
  • MDN AJAX Getting Startedは、基本的なAJAX呼び出しをカバーする短いチュートリアルです。 MDNでは、高度なAJAX技術を扱った追加の記事も利用できます。.

JavaScriptは強力ですが、jQueryを使用すると、少ない労力で多くのことが可能になります.

jQuery:世界を揺るがす準備

jQueryは、ビルド済みのJavaScriptビルディングブロックの集まりと考えてください。基本的な例を見てみましょう。最初にJavaScriptで、次にjQueryでmy-divのIDを持つ要素を選択する方法は次のとおりです。.

// JavaScript
document.getElementById( ‘my-div’);

// jQuery
$( ‘#my-div’);

どちらの言語でも、IDによる要素の選択は非常に簡単です。ただし、ご覧のとおり、jQueryで実行する場合はJavaScriptで実行する場合よりも約25回少ないキーストロークで済みます。.

HTMLドキュメントにjQueryを追加する

jQueryを使用するには、その前にjQueryをロードする必要があります。その方法は2つあります。 jQueryをダウンロードしてローカルコピーを含めるか、Google Hosted Librariesなどのホストコピーを使用できます.

以下は、jQueryを読み込むためにHTMLドキュメントに含めるコードです。

jQueryを作成するときは、jQueryコアがロードされた後にコードをロードする必要があることに注意してください。.

WordPressでjQueryを使用する

注意すべき1つの特別な考慮事項は、WordPress WebサイトでjQueryを使用する場合、$ではなくjQueryを使用してコードの前に付ける必要があることです。 $接頭辞を機能させるために使用できる回避策がありますが、それが失敗した場合は、次のようにコードの前にjQueryを付けてください。

//通常のjQuery
$( ‘#my-div’);

// WordPressのjQuery
jQuery( ‘#my-div’);

jQuery CSS

JavaScriptを使用してCSSを操作できるのと同じように、jQueryでも同じことができます.

jQueryを使用すると、クラスを非常に効果的に操作できます。以下のスクリプトは、my-divというIDを持つ要素のマウスクリックを監視し、1つのクラスを削除して別のクラスを追加します。このコードを使用して、2つのCSSクラスを切り替えることができます.

var myDiv = $( ‘#my-div’);
$(myDiv).click(function(){
if($( ‘#my-div’).hasClass( ‘first-state’)){
$( ‘#my-div’).removeClass( ‘first-state’);
$( ‘#my-div’).addClass( ‘second-state’);
}
else if($( ‘#my-div’).hasClass( ‘second-state’)){
$( ‘#my-div’).removeClass( ‘second-state’);
$( ‘#my-div’).addClass( ‘first-state’);
}
})

それは役に立ちますが、代わりに.toggleClass()を使用することで、もっと簡単にそれを実行できたはずです。.

var myDiv = $( ‘#my-div’);
$(myDiv).click(function(){
$(myDiv).toggleClass( ‘first-state’);
$(myDiv).toggleClass( ‘second-state’);
})

実際の移行を見てみましょう.

クラスアニメーションの切り替え

多くの追加のjQuery CSSメソッドがあります。特に、.css()メソッドを使用して、対象の要素のCSSを直接​​操作できます。 .height()や.width()などの他のメソッドを使用して、特定のCSS値をターゲットにすることができます.

jQuery効果

さまざまな効果がjQueryに組み込まれています。これらの効果は、ページ要素への変更の実行を制御するために、他のjQueryメソッドおよび関数と連携しています.

一口ですので、例を見てみましょう。 .toggleClass()関数に戻ると、いくつかの効果を追加して遷移をスムーズにすることができます.

var myDiv = $( ‘#my-div’);
$(myDiv).click(function(){
$(this).fadeOut( ‘slow’、function(){
$(this).toggleClass( ‘first-state’);
$(this).toggleClass( ‘second-state’);
})
$(this).fadeIn( ‘slow’);
})

そのコードが行うことは、要素をフェードアウトし、クラスを切り替え、変更された要素をフェードバックすることです.

効果アニメーションの切り替え

fadeOut()とfadeIn()エフェクトは、利用可能ないくつかのjQueryエフェクトの2つにすぎません。さらに、すべてのエフェクトは、その動作を微調整するためにいくつかの異なるオプションを使用できます.

jQueryイベント

このチュートリアルでは、1つのjQueryイベントをすでに何度か見てきました。.click()は、ユーザーがターゲット要素をクリックしたときに発生します。ただし、利用可能な追加のイベントがたくさんあります.

ユーザーアクションのターゲットに使用されるイベントには、.click()、. dblclick()、. hover()、. mouseenter()、. mouseleave()、および.mousemove()が含まれます。ページ要素への変更を監視するいくつかのイベントハンドラーもあります。

  • .change()は、フォーム要素の変更を検出します。同様に、.submit()は、フォームがいつ送信されたかを検出します.
  • .focus()は、ターゲット要素がフォーカスを取得したときにトリガーされます.
  • .ブラウザがウェブページを作成するとすぐにready()が呼び出されます.
  • .resize()は、ビューポートのサイズが変更されたときに実行するコードをトリガーします.
  • .trigger()は、1つのイベントを別の関連イベントに結び付けます.

この簡単なガイドでは取り上げていない追加のjQueryイベントがあります。 jQueryのドキュメントまたは推奨リソースを参照して詳細を学ぶ.

jQuery UI

jQuery UIは、強力なUIウィジェットとツールを含むjQueryの拡張機能です。アコーディオンウィジェットなどのjQuery UI機能の実装は、同じ機能を最初からコーディングする場合に比べて非常に簡単です。.

jQuery UI機能は、ウィジェット、エフェクト、インタラクション、ユーティリティの4つのカテゴリに分類できます。それぞれを見てみましょう。しかし、最初に、jQuery UIをHTMLドキュメントに追加する方法を知る必要があります。.

HTMLドキュメントへのjQuery UIの追加

jQuery UIの読み込みに関しては、ダウンロードしてローカルコピーを含めるか、CDNがホストするコピーを含めるかという2つのオプションがあります。.

また、次の点に注意してください。

  • CSSスタイルシートリンクはドキュメントヘッドに配置する必要があります.
  • jQuery UIスクリプトは、bodyの終了タグのすぐ上に配置する必要があります.
  • jQueryコア(jquery.jsまたはjquery.min.js)は、jQuery UI(jquery-ui.jsまたはjquery-ui.min.js)がロードされる前にロードする必要があります.

jQuery UIテーマ

jQuery UIのコピーをダウンロードすると、ダウンロードビルダーでテーマを含めることができます。これは、jQuery UIウィジェットがデフォルトのスタイル設定を必要とするためです。選択したjQuery UIテーマはデフォルトのウィジェットスタイルを定義し、関連するコードはjquery-ui.cssに含まれています.

Googleがホストするオプションを選択する場合は、テーマ名がファイル名の直前にドロップされることに注意してください:…/ smoothness / jquery-ui.css。滑らかさはデフォルトのjQuery UIテーマです。 URLを構築するときにテーマ名を置き換えることで、任意のテーマを使用できます.

さらに、jQuery UI Webサイトには、独自のテーマを構築してjQuery UIをダウンロードするときに組み込むことができるThemeRollerが用意されています。.

jQuery UIウィジェット

ウィジェットを使用すると、純粋なJavaScriptとCSSで大量のコードを作成する有用なUI要素を作成するのが比較的簡単になります。最も役立つjQueryウィジェットのいくつかを見てみましょう(デモに移動するには、いずれかをクリックしてください)。

  • アコーディオンを使用すると、見出しの後ろに情報を非表示にしたり、各セクションを開いたり閉じたりして情報を表示できます.
  • タブはアコーディオンに代わるものです。スペースを節約して情報を提示する方法.
  • jQuery UIのボタンは美しく、一貫して表示されます.
  • 日付ピッカーをフォームに追加して、日付が適切に選択およびフォーマットされるようにすることができます.
  • プログレスバーは、目標の達成に向けてどれだけの進歩があったかを視覚的に示します.
  • スライダーを使用すると、ユーザーはフォームを送信するときに単一の値または値の範囲を選択できます.
  • スピナーは、フォームフィールドに数値を入力するための上下矢印を追加します.
  • ツールチップを使用して、フィールド固有の情報をユーザーに提供できます。.

ウィジェットの実装がいかに簡単かを理解するために、アコーディオンのセットを作成するために使用する必要があるすべてのコードを次に示します。

アコーディオンセクション1

アコーディオンコンテンツ。段落、リスト、リンクなどを使用できます.

アコーディオンセクション2

私が言ったように.

  • 君は
  • できる
  • 使用する
  • リスト

アコーディオンセクション3

それでおしまい。とても簡単です.

$(function(){
$( "#アコーディオン" )。アコーディオン();
});

ご覧のとおり、HTMLは、HTMLをアコーディオンに変換するために必要なjQueryの数行よりもはるかに長くなっています。.

jQuery UIアコーディオンアニメーション

jQuery UIエフェクト

このカテゴリのメソッドのほとんどは、コアjQueryメソッドの拡張です。たとえば、クラスを操作する場合、.addClass()、. removeClass()、および.toggleClass()メソッドはすべて、追加のメソッド.switchClass()とともに、jQuery UIで使用できます。違いは、jQuery UIではこれらのメソッドに、メソッド自体に遷移効果を直接追加する機能などの追加オプションが含まれていることです。.

例を見てみましょう。 divの外観を変更するために.fadeIn()と.fadeOut()を使用したことを覚えていますか?まあ、jQuery UIを使用することで、はるかに少ないコードでより良い効果を作成できます.

var myDiv = $( ‘#my-div’);
$(myDiv).click(function(){
$(this).toggleClass( ‘second-state’、1000);
})

これが実際の移行です.

jQuery UI Toggle Classアニメーション

知っておきたいいくつかの追加のエフェクトメソッドは次のとおりです。

  • .show()メソッドは表示を削除します。ターゲット要素から.
  • .hide()メソッドは表示を追加します。ターゲット要素に.
  • .toggle()メソッドは、ターゲット要素を表示状態と非表示状態の間で切り替えます.
jQuery UIエフェクトアニメーション

ブラインド、バウンス、クリップ、ドロップ、爆発などの名前の付いた15の異なるエフェクトアニメーションがあります。スライド効果の例を見てみましょう.

var myDiv = $( ‘#my-div’);
var myButton = $( ‘#my-button’);
$(myButton).click(function(){
$(myDiv).toggle( "滑り台" );
})

この場合、divを画面上と画面外にスライドさせるボタンを追加しました。 jQueryのビットで隠されたときのdivの様子を見てみましょう.

jQuery UI非表示アニメーション

これらのjQuery遷移効果は、.show()、. hide()、および.toggle()メソッドに適用できます。 jQuery UI Webサイトには、実装に最適なエフェクトを決定するために使用できるエフェクトプレビューツールが含まれています.

jQuery UI遷移の緩和

jQueryコアには、swingとlinearの2つのイージングが含まれています。ただし、jQuery UIは20以上のイージングを追加します。 .toggle()メソッドの実装を振り返ってみましょう。今度は2つの異なるイージングを追加します。.

var myButton = $( ‘#my-button’);
$(myButton).click(function(){
$( ‘#first-div’).toggleClass( ‘second-state’、2000、 ‘easeInOutQuad’);
$( ‘#second-div’).toggleClass( ‘second-state’、2000、 ‘easeInOutExpo’);
})

この例では、2つのdivがあります。どちらも2秒後に2番目の状態に移行します。ただし、それぞれが異なるイージングを使用します。見てみましょう.

jQuery UIイージングアニメーション

jQuery UIの相互作用

インタラクションは、ウェブサイトとアプリのユーザーがページ要素を選択して移動できるようにするjQuery UIメソッドのセットです。 5つのjQuery UIインタラクションがあります。以下のリンクをクリックすると、jQuery UI Webサイトでの各インタラクションのデモが表示されます.

  • ドラッグ可能なインタラクションにより、ユーザーはマウスでドラッグアンドドロップしてWebページ要素を再配置できます。.
  • ドロップ可能なインタラクションは、ドラッグ可能なインタラクションと連携して機能します。これを使用するには、ドラッグ可能なアイテムとドロップ可能なアイテムの両方がWebページで使用できる必要があります。ドラッグ可能なアイテムがドロップ可能なアイテムにドロップされると、アクションがトリガーされます.
  • Resizableは、ユーザーが想定していることを正確に実行します。ページ要素をサイズ変更可能にします。.
  • Selectableは、一度に1つずつクリックするか、Ctrlキーを押したままにするか、複数のアイテムをクリックしてドラッグして複数のアイテムを一度に選択することにより、リスト内のアイテムを選択可能にします。.
  • 並べ替え可能により、リストアイテムを任意の順序に並べ替えることができます.

jQuery UIインタラクションは、平均的なWebサイトに実装することを期待するものではありません。ただし、インタラクティブなWebアプリ、ゲーム、または複雑なフォームを作成している場合は、これらの操作が便利です。.

jQuery UIユーティリティ

jQuery UIは拡張でき、ウィジェットファクトリはそのために使用されるユーティリティです。ウィジェットファクトリを使用すると、複数のjQuery UIメソッド、スタイル、および関数を単一の再利用可能なウィジェットにパッケージ化できます。.

オブジェクト指向プログラミングに精通している場合は、jQuery UIウィジェットをオブジェクトと考えると役立つ場合があります。したがって、jQuery UIアコーディオンは実際にはアコーディオンクラスのオブジェクトです。ウィジェットファクトリでできることは、ウィジェットの新しいクラスを定義し、そのクラスを使用して複数のオブジェクトを作成することです。これは、クラスを作成してOOPで何度も再利用するのと同じです.

もう1つの便利なjQuery UIユーティリティは.position()メソッドです。このメソッドを使用すると、別の要素またはユーザーアクションに対する任意の要素の位置を定義できます。慣れれば、この方法は非常に簡単です。例を見てみましょう.

$( ‘#second-div’).position({
私:「左上」,
at: ‘右下’,
of: ‘#first-div’
});

このコードは、次のように、second-divのIDを持つ要素の左上隅を、first-divのIDを持つ要素の右下隅に配置する必要があることを示しています。

jQuery UI位置アニメーション

さらに、ユーザーのアクションに基づいてアイテムを配置できます。最初のdivではなくマウスの位置を使用して2番目のdivの位置を決定するようにコードを調整してみましょう.

$(document).mousemove(function(event){
$( ‘#second-div’).position({
私: ‘センター’,
の:イベント,
衝突:「適合」
})
})

このコードは、マウスがドキュメントに入るたびにトリガーされる.mousemove()イベントのリスナーを追加します。その場合、ターゲットのdivの.position()はマウスの位置に基づいて決定されます.

実際に見てみましょう.

jQuery UI位置マウスムーブアニメーション

jQuery Mobile

jQuery Mobileは、jQueryライブラリのもう1つの拡張です。タッチ操作向けのレスポンシブウェブサイトやアプリを作成するために使用されます.

jQuery Mobileを考えるとき、タッチ最適化に重点を置く必要があります。 jQueryおよびjQuery UIのコアメソッドとイベントには、モバイルデバイスには適用できないものが数多くありますが、jQuery Mobileはその欠点に対処しています。 Webサイトの1つまたは2つのファセットを強化するために使用できるjQuery UIとは異なり、jQuery MobileはタッチベースのレスポンシブWebサイトおよびアプリ向けのオールオアナッシングソリューションになるように設計されています.

このライブラリには、タッチ対応の最適化されたボタン、日付ピッカー、フォーム要素、スワイプイベント、ナビゲーション要素、テーブル、タブ、スライダーなどの多数の配列が含まれています。さらに、jQuery MobileにはThemeRollerが含まれています.

jQuery Mobileを使用する上での課題は、そのオールオアナッシングアプローチです。 Webサイトやアプリのデスクトップバージョンの完全な代替品を作成するように設計されています。すべてのデバイスで動作する単一のサイトまたはアプリが必要な場合は、jQuery Mobileは探しているものではありません。すべてのデバイスで動作するアプリまたはウェブサイトでjQuery Mobileを使用する場合(タッチ対応ではなく)、デバイスタイプ、サイズ、タッチスクリーンの存在を検出することにより、jQuery Mobileをオン/オフに切り替える方法を見つける必要があります.

設計リソース

JavaScriptを学ぶことができるいくつかの場所をすでに指摘しました。 JavaScriptをまだ知らない場合は、jQueryに進む前にそれらのスキルを磨いてください。いくつかのJavaScriptを手に入れたら、次のリソースを使用して、jQuery、jQuery UI、jQuery Mobileを習得できます。.

  • jQuery Foundationラーニングセンターは、jQueryを学ぶための公式(そして最高の場所の1つ)です。ここでは、基本、イベントとエフェクト、AJAX、プラグインなどをカバーする章ベースのコースを見つけます。準備ができたら、jQuery UIとjQuery Mobileの使用方法も学ぶことができます.
  • 最初からjQueryを学ぶは、jQueryプログラマーとしての自信を得るのに役立つプロジェクトベースのチュートリアルです。.
  • CodeCademy jQueryコースでは、jQuery構文、および基本的な関数の記述方法、DOM要素の変更方法、イベントの使用方法、および効果の実装方法について学びます.
  • BocoupによるjQuery Fundamentalsは、JavaScriptコンソールが組み込まれた電子ブックなので、ブラウザーで直接コードを試すことができます。 jQueryの基本、DOM要素のトラバースと操作、イベント、エフェクト、AJAXについて説明します.

デザイナーにはjQueryが必要

jQuery、jQuery UI、jQuery Mobileの拡張機能により、豊富なウィジェット、インタラクション、メソッド、エフェクト、タッチ操作に最適化されたツールが追加されます。これらを習得すると、キーストロークを無駄にすることなく、強力でインタラクティブなWebアプリを構築できるため、より優れたデザイナーと開発者になります。.

その他の興味深いもの

コーディングとウェブサイトの開発に関連するガイド、チュートリアル、およびインフォグラフィックが他にもあります。

  • CSS3 —イントロ、ガイド & リソース:これは、Webページのレイアウトを学ぶのに最適な場所です.
  • ASP.NETリソース:このガイドでは、Webページを作成するためのMicrosoftの.NETフレームワークについて説明します.

どのコードを学ぶべきか?

あなたがコーディングするためにどのプログラミング言語を学ぶべきかについて混乱していますか?私たちのインフォグラフィックをチェックして、どのコードを学ぶべきですか?これは、言語のさまざまな側面について説明するだけでなく、「生活のためにJavaプログラミングを行うことでどれだけのお金を稼ぐことができるか」などの重要な質問に答えます。

どのコードを学ぶべきですか?
どのコードを学ぶべきか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map