jQuery：デザイナー向けの簡単なJavaScript-jsチュートリアル-php.cn

jQuery：デザイナー向けの簡単なJavaScript

キーテイクアウト

jQueryは、WebデザインにJavaScriptを使用するプロセスを簡素化し、機能性とユーザーエクスペリエンスを向上させるためのさまざまな機能とツールを提供するJavaScriptライブラリです。
jQueryの重要な機能の1つは、単一のコードで複数のアクションを実行できるようにするjqueryの機能を「チェーン」する機能です。これにより、複雑なJavaScriptタスクを簡素化するための強力なツールになります。
ハイエンドのトリックの能力にもかかわらず、jQueryの最大の魅力は、小さな問題を迅速かつ最小限に抑えて、ウェブデザイナーにとって貴重なツールになる能力です。
JavaScriptの再生が過去2年間の最大のテーマであった場合、おそらくこのトピックを取り巻く講演のほとんどを2つの主要な領域に分けることができます。

domを使用した画像のスタイリングでは、javascriptを使用して丸い角を画像に追加します。

dom Text Shadowsでは、JavaScriptを使用して、見出しテキストに影を構築しました。水平ルールズで！ OK！、JavaScriptを使用して危険なHR要素を修正しました。

これらの各スクリプトにはまったく異なる目的がありますが、それらはすべて、ブラウザにきちんとしたセマンティックマークアップを送信し、JavaScriptを使用して、理解できるほどスマートなブラウザの能力を修正または拡張することを伴います。ほとんどの場合、これにはマークアップの一部をさらにマークアップすることが含まれます。今日は、いつでもどこでもこれを行うことができる簡単で万能な方法を見ていきます。JQuery。だから、jqueryとは？

jQueryは、プロトタイプ、Scriptaculous、Rico、Moo.fxなど、すでに数十以上の他のものを含む、すでに混雑したスペースに参加するもう1つのJavaScriptライブラリです。それを使用するには、ページのヘッドに.jsファイルを添付するだけです。魔法のように、多くの事前に構築された機能とギズモにアクセスできます。

Q：なぜ別の不可解なJavaScriptライブラリに対処したいのでしょうか？ A：jQueryの重要な魅力は、それを使用してから最初の10分以内に提供できるものです。
しばらく前に、SitePointのマーケットプレイスの運営方法を改善するためにしばらく時間を費やしました。メインのオークションページを離れることなく、売り手が大規模なスクリーンショット、統計、グラフ、その他の画像を表示できるエレガントな方法を探している間、私はジョン・レジグのJQuery JavaScriptライブラリを搭載したCody LindleyのThickboxに出会いました。以下の画像は、動作中の厚い箱を示しています。

jQuery：デザイナー向けの簡単なJavaScript 太い箱をわずか5分間しかつかないと、その可能性が見られるようになります。マーケットプレイスでは、リンクされた画像と完全なHTMLドキュメントの両方をThickboxウィンドウに引くことができましたが、同時に発射ページを調整しました（紛失していません）。 JavaScriptが無効または利用できないブラウザを持つユーザーは、単にアイテム（つまり、画像またはページ）に直接取得されます。「このサムネイルを拡大する」問題に対する非常に賢く、使いやすく、アクセスしやすいソリューションです。

しかし、私たちはすでにページにjqueryライブラリを含めることを決めたので（それは小さい - 約10kb）、私たちのために他に何ができるかを知ることは良い考えだと思いました。 1時間後、私はjQueryの改宗者でした。

jQueryの真の美しさは、そのシンプルさです。 jQueryコードの単一行は、通常のJavaScriptの12行を置き換えることができますが、非常にエレメンタルで柔軟なままです。この点を例で説明させてください。 2年前の「水平ルールフィクサー」で、次のスクリプトを使用しました。

このコードのクイックサマリーとして、ブラウザはページがロードが終了するのを待ってから、DOMを繰り返してHRの各発生を見つけることができます。それが見つかるたびに、新しいDivを作成し、クラス名「ライン」を与え、HRの場所に挿入し、新しいDIV内の古いHRをポップして、この特定の効果を実装するために必要なマークアップを実現します。セマンティックペダントリーはさておき、このスクリプトの最終結果は、数百ページを変更することなく、望ましい結果を達成できたことでした。

当時、12行のコードでは悪い結果ではないと思いました。しかし、jQueryを使用して同じ結果をどのように達成するかを見てみましょう。

私はあなたを子供にしません。

それを分解するために（壊れることがたくさんあるというわけではありません）：

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

ログイン後にコピー

1つ目と3番目の行はjQueryのロードイベントで、古いウィンドウを置き換えます。上からのロード。ページの読み込み中に完了したいタスクは、これらの巻き毛の中でドロップできます。

これは、すべてがロードが終了するまで待つのではなく、jQueryの関数が入ってくるすべてのものを監視し、必要なすべての部品を持っているとすぐに機能し始めているため、古いオンロード方法の大きな改善です。それは本当にとてもきれいです。

驚くべきことに、2行目はさらに単純です：

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

ログイン後にコピー

「ドルオブジェクト」 - $（ "HR"） - は、このページのすべての水平ルールをつかむようにjqueryに伝える必要があります。

jQueryの組み込みラップ関数は、私たちが提供するHTML（この場合は "

"）を使用し、ページ内の各HRの周りにラップします - ループやテストは不要です。

ここではDivを使用しましたが、B、SPAN、または要素を簡単に変更またはラップすることもできます。

ここで非常に単純な選択ルール（すべてのHR）を使用しましたが、ターゲットを絞ったものにより簡単に具体的になることができたはずです。おなじみの古いCSS構文を使用して、次のいずれかを使用できました。

$（ "hr.separate"） - クラス名「個別」でHR要素を取得します。

$（ "li：only-child"） - それ自体であるリストを取得します

$（ "ul> li"） - 順序付けられていない親リストを持つリストのみを取得します。

私は、ラップが最も即座に有用なjQuery関数であることを個人的に見つけましたが、それは、hide、show、fadeout（ "slow"）やスライドアップ（「速い」）など、多くの名前を含む多くの1つです。おそらく、これらの機能のそれぞれが何をするか推測できます。 jQueryサイトのjQueryスターターのチュートリアルは、非常に穏やかな初心者向けガイドであり、最も一般的な機能のいくつかをご覧ください。

このページを開発しているとき、各サムネイルの一番下の隅に小さなアイコンを追加したかったのです。これには、各IMG要素をコンテナdivに包み、アイコンをコンテナdivに配置することを示す別のdivが必要でした。

繰り返しますが、jQueryコードは1行にすぎません（列の幅が制限されているため、ここで分割します）

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

ログイン後にコピー

平易な英語では、このコードはjqueryに次のように要求します

私の画像の直前に「ラップ」divに別のdiv（アイコングラフィックのあるもの）を絞る。

構造があるので、CSSは残りをします。

もちろん、JavaScriptがオフになった場合、サムネイルはRAW画像ファイルに直接リンクし、アイコンは必要ありません。これが私がエレガントな劣化と呼んでいるものです。

他のほとんどのJavaScriptライブラリと同様に、jQueryはいくつかの非常にハイエンドのトリックが可能です（以前の記事ではAjax機能について説明しました）が、私にとって最大の魅力は、小さな問題を迅速かつ最小限に抑える能力でした。

おそらく言うことができるように、私はすでに大きなjQueryファンです。あなたもそれが便利であることを願っています。

そしてもちろん、JavaScript Horizonsを拡大している場合は、Joe HewittのFirebug拡張機能の最新バージョンにアップグレードすることを忘れないでください。

この記事は、もともとデザインビュー＃23で公開されていました

デザイナーのためのjQueryとjavascriptについてのよくある質問

jQueryとjavascriptの違いは何ですか？

javascriptは、Webページに複雑な機能を実装できるプログラミング言語です。一方、JQueryは、高速で、小さく、機能が豊富なJavaScriptライブラリです。 HTMLドキュメントのトラバーサルと操作、イベントの取り扱い、アニメーションなど、多数のブラウザで動作する使いやすいAPIを使用すると、アニメーションがはるかにシンプルになります。基本的に、jQueryは、HTMLドキュメントのトラバース、イベント処理、およびアニメーションを簡素化するように設計されたJavaScriptライブラリのセットです。

プロジェクトでJQueryの使用を開始するにはどうすればよいですか？公式のjQuery Webサイトからダウンロードするか、コンテンツ配信ネットワーク（CDN）から直接含めることができます。ライブラリがプロジェクトに含まれると、セレクター（選択した要素を選択するために）とjQueryアクション（選択した要素で実行するために）を使用して$サインを使用してjQuery関数の使用を開始できます。（クリックやマウスの動きなど）、アニメーションの作成、Ajaxの呼び出しを作成して、サーバーにデータを取得または送信します。また、画像スライダー、フォーム検証、動的コンテンツの読み込みなどのインタラクティブな機能を作成するためにも使用されます。

jQueryは、JavaScriptの作業をどのように単純化しますか？

jQueryは、一般的なWebタスクに使いやすいAPIを提供し、複雑なJavaScript機能を抽象化することによりJavaScriptを簡素化します。また、RAW JavaScriptを作成するときに発生する可能性のあるクロスブラウザー互換性の問題を処理し、コードを書き込みと維持しやすくします。 noconflictモードと呼ばれる機能を提供します。これにより、$シンボルも使用する他のライブラリでjqueryを使用できます。公式のjQueryウェブサイトは、包括的なドキュメントとチュートリアルを提供しています。 Codecademy、Udemy、Khan Academyなどの他のオンラインプラットフォームもjQueryのコースを提供しています。ブラウザの開発者ツールを使用して、要素を検査し、コンソールログを表示し、コードを踏み出すことができます。さらに、jQueryは、エラーと例外を処理するために.error（）、.fail（）、.done（）などのいくつかの方法を提供します。

jQueryを使用する際のベストプラクティスを使用する場合は何ですか？ jquery cdn loading時間を速くするため。

jqueryコードを最適化してパフォーマンスを向上させるにはどうすればよいですか？

jQueryコードを最適化してパフォーマンスを向上させる方法がいくつかあります。これらには、DOM操作の最小化、クラスセレクターの代わりにIDセレクターの使用、jQueryオブジェクトのキャッシュ、およびイベントバインディングのために.on（）メソッドを使用します。すべての人気のあるモバイルデバイスプラットフォームに統一されたHTML5ベースのユーザーインターフェイスシステムを提供します。

以上がjQuery：デザイナー向けの簡単なJavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。