jQueryチュートリアル-はじめに：基本とセレクター

jQueryチュートリアル-はじめに：基本とセレクター

先週、私はjQueryが現代のWeb開発者にとってどれほど重要であるか、そしてなぜそれが素晴らしいのかについて話しました。今週は、いくつかのコードで手を汚し、プロジェクトでjQueryを実際に使用する方法を学んだときだと思います。





これを今言います-jQueryを使用するためにJavascriptを学ぶ必要はありません。 jQueryを、単に機能を追加するライブラリよりも、Javascriptの進化形（それを行うためのより良い方法）と考えるのがおそらく最善です。必要なJavascriptは途中でピックアップされます。ただし、Web開発者は、HTMLとCSSについてかなりの知識があることを前提としています（そうでない場合は、役立つ無料のxHTMLガイドをご覧ください）。



ドキュメントオブジェクトモデル

jQueryは、トラバーサルと操作に関するものです。 判定 - NS NS ocument また bject NS オデル。 DOMはページの階層ツリー表現であり、すべてのHTMLコードを読み込んだ後にブラウザによって構築されます。 jQueryでは、次のような用語を使用します 親 、 子供達 、 と 兄弟 非常に頻繁に発生するため、DOMとの関係でこれが何を意味するのかを理解しておく必要があります。





からのこの簡単な図w3schools概念をかなりよく説明します。要素の親がであることがわかりますが、 要素には即時があります

兄弟。

はじめに：jQueryの追加

jQueryの最新バージョンは圧縮すると約91KBであるため、小さな写真やスクリーンショットとほぼ同じページの重みが追加されます。プロジェクトにjQueryを含める最も簡単な方法は、ホストされている最新バージョンへの参照をサイトのヘッダーセクションに貼り付けることです。



ただし、Wordpressを実行している場合は、jQueryライブラリの独自のコピーがすでにあるため、問題が発生する可能性があることに注意してください。プラグインはこれをロードするように要求でき、Wordpressはプラグインが要求した数に関係なくjQueryをインテリジェントに1回だけロードします。

次の行をに追加すると 関数.php テーマファイルには、それを含めるための別のリクエストを追加します。テーマがアクティブな場合、Wordpressは常にそれをロードすることを認識します。





USBにWindowsをインストールする方法
wp_enqueue_script('jquery');

2つ目の注意点は、jQueryが標準の方法を使用して追加されると、次のように読み込まれることです。 $ 。 jQueryで行うことはすべて、次のようにこの$が前に付きます。

$.ajax

また



$('#header')

ただし、jQueryがWordpressを介してロードされる場合、すべては$ではなくjQuery変数を使用して実行されます。たとえば、次のようになります。

jQuery('#header')

独自のコードを作成する場合、これは大きな問題ではありませんが、Web上で見つけたjQueryのスニペットを切り取って貼り付けるには、代わりにjQueryを使用するように変換する必要があります。 $- それで全部です。

これを回避する1つの方法は、次のように見つけた$スタイルのコードをラップすることです。

(function($) {
// paste $ code in here
})(jQuery);

これはかかります jQuery 変数とそれを無名関数に渡します $ 。次回は無名関数について説明します。とりあえず、jQueryコードの基本構造を学びましょう。

コードをHTMLまたはPHPページに追加するには、次のようにすべてをタグで囲みます。


// jQuery code codes here

$（ 'セレクタ'）。方法（）;

それだけです、そこのタイトルで。これが、DOMを操作するための単一のjQueryコードの基本構造です。簡単ですよね？

NSセレクタこのルールに一致するものを見つけるようにjQueryに指示します。 そしてCSSセレクターと同じです（そしてさらにいくつかが上にあります）。したがって、CSSの場合と同様に、すべてのリンクのスタイルを設定します。

a { }

同じことがjQueryでも行われます。

$('a')

これは、任意のHTML要素（div、h1、span）に対して実行できます。 CSSクラスとIDを使用してより具体的にすることもできます。

たとえば、クラス 'findme'のすべてのリンクを検索するには、次を使用します。

$('a.findme')

毎回要素のタイプを指定する必要はありませんが、指定すると、ルールがより具体的になります。あなたはちょうど言ったかもしれない

$('.findme')

クラスとすべてが一致します 私を見つけて 、リンクかどうか。

名前付きID要素を使用するには、 ＃ 代わりに署名してください。ここでの主な違いは、IDセレクターは1つのオブジェクトのみを選択するのに対し、クラスセレクターは複数のオブジェクトを検出する可能性があることです。

プログラムがインストールされている場所を変更する方法Windows10
$('#something')

基本的に、CSSで実行できる場合は、jQueryでも実行できます。実際、：firstのようなかなり複雑なCSS3スタイルの疑似セレクターも使用できます。

$('body p:first')

これはページの段落をつかむでしょう。特定の属性を持つ要素もあります。この例を考えてみましょう。内部を指すページ上のすべてのリンクを検索したい makeuseof 何らかの方法でそれらを強調表示します。それらを見つける方法は次のとおりです。

$('a[href*='makeuseof']')

かっこいいじゃないですか。そうですね。

次の寄港地は セレクター用のjQueryAPIドキュメント 。これは、使用可能なさまざまな種類のセレクターの膨大なリストであり、すべてを学ぶことを誰も期待していません。

方程式の次の部分は方法-それらをすべて見つけたらどうするか-しかし、それは次のレッスンに残しておきます。ただし、さまざまなセレクターの試用を今すぐ開始したい場合は、次のcssメソッドを使用することをお勧めします。これは2つのパラメータを取ります-CSS プロパティ名 、および新しい 価値 そのプロパティに割り当てます。したがって、すべてのリンクに赤い背景色を付けるには、次のようにします。

$('a').css('background-color','red');

簡単です！これは実用的ではないかもしれませんが、セレクターを使用して配置された要素を簡単に確認できます。さあ、先に進んで、選択します-DOMがあなたを待っています。

このチュートリアルがお役に立てば幸いです。できるだけシンプルに理解できるように心がけました。質問がある場合やフィードバックを残してください。ただし、私は確かにエリートjQuery忍者ではないことに注意してください。

共有 共有 つぶやき Eメール VirtualBoxLinuxマシンを過給するための5つのヒント

仮想マシンによって提供されるパフォーマンスの低下にうんざりしていませんか？ VirtualBoxのパフォーマンスを向上させるためにすべきことは次のとおりです。

次を読む 関連トピック
  • Webカルチャー
  • ウェブ開発
  • JavaScript
  • プログラミング
  • jQuery
著者について ジェームズブルース（707件の記事が公開されました）

ジェームズは人工知能の理学士号を取得しており、CompTIA A +およびNetwork +の認定を受けています。ハードウェアレビューエディターとして忙しくないときは、LEGO、VR、ボードゲームを楽しんでいます。 MakeUseOfに参加する前は、照明技術者、英語教師、データセンターエンジニアでした。

ジェームズブルースのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください