Jクエリ[jQuery]デフォルト

11689 ワード
jquery JavaScript テキストリンク

Jクエリー[jQuery]

  • の2回目のクエリは、JavaScript言語の使用を簡素化するオープンソースベースのJavaScriptライブラリです.
  • ドキュメントオブジェクトモデル(DOM)とイベント処理を実現します.
  • AjaxアプリケーションとプラグインもjQueryを使用して迅速に開発できます.

    • 2番目のクエリーの適用

  • Jクエリーはjavascriptライブラリです.Jクエリーファイルはjavascriptファイルとして存在するため、WebページでJクエリーを使用するには、まずJクエリーファイルをWebページにロードする必要があります.
  • ページでJクエリーファイルをロードする方法
    -Jクエリー・ファイルのダウンロードとロード
    -コンテンツ配信ネットワーク(CDN)を使用して
    • をロード

    Jクエリーファイルのダウンロードとロード方法


    公式サイトからJクエリーをダウンロードし、Jクエリーファイルをサーバに保存します.
    <script> 태그를 웹 페이지의 <head> 태그 내에 삽입.
    <head>
  <script src="/user(파일경로)/jquery-3.2.1.min.js(제이쿼리파일명)"></script>
</head>

    CDNロードの使用方法

  • コンテンツ配信ネットワーク(CDN):Webサイトのユーザーがサーバからコンテンツをダウンロードする必要がある場合に、最近のサーバから自動的にコンテンツをダウンロードできるようにする技術.
  • コンテンツ配信ネットワーク(CDN)のメリット
    -トラフィックは特定のサーバに集中しません.
    -コンテンツの転送時間が非常に速くなります.
    -Jクエリー・ファイルをサーバに保存する必要はありません.
    • <head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

    クエリーの基本構文

    $(선택자).동작함수();
    [$]記号はJクエリを表し、Jクエリへのアクセスを許可する識別子である.
    選択プログラムを使用して、必要なHTML要素を選択します.
    アクション関数を定義し、選択した要素に必要なアクションを与えます.

    $()関数

  • で選択したHTML要素をJクエリで使用可能な形式のロールとして生成します.
  • $()関数の引数として、HTMLタグ名に加えてCSSセレクタを渡して特定のHTML要素を選択することもできます.
  • $()関数で生成された要素をjQueryオブジェクトと呼びます.
    Jクエリオブジェクトのメソッドを使用して複数のアクションを付与できます.

    • Documentオブジェクトのready()メソッド


    JavaScriptコードは、Webブラウザがドキュメント内のすべての要素をロードした後に実行する必要があります.
    通常、問題は発生しません.
    まだ作成されていないHTML要素に属性を追加しようとします.
    ロードされていない画像のサイズを取得してみます.
    タイプエラーがキャプチャされていないため、実行中のスクリプトは停止します.
    この場合、ドキュメントをDocumentオブジェクトのready()メソッドを使用して、すべてのロード後にコードを実行するように設定します.
    $(document).ready(function() {
	jQuery code
});
    document.readyを使用する必要がある場合は、=>を使用します.
    完全な単位を使用する場合はready()メソッドを使用します.
    関数の作成と書き込みには、=>特定のボタンの機能動作のみが必要です.
    詳細単位として使用する場合は、関数を作成して使用します.

    要素の選択


    Jクエリーを使用すると、HTML要素を簡単に選択し、選択した要素に特定のアクションを付与できます.
  • CSSセレクタを使用してHTML要素を選択
    -タグ名を使用して、同じ大文字と小文字の名前を持つすべてのHTML要素を選択できます.
    -関連分野の設計に使用します.
    -JavaScriptのgetElementsByTagName()メソッドと同じ操作を実行します.
    • $(function(){
  $("p").on("click", fuction() {        // <p> 요소를 모두 선택
    $("span").css("fontSize", "10px");  // <span> 요소를 모두 선택 
  });
});
  • idを使用して特定のHTMLを選択
    -javascriptは、制御機能セクションに使用されます.
    -JavaScriptのgetElementsById()メソッドと同じ操作を実行します.
    • $(function){
  $("p").on("click", function(){
    $("#jquery".css("border", "2PX solid green");  // id가 "jquery 인 요소를 선택
  });
});
  • classを使用して、同じクラスに属するすべてのHTML要素を選択します.
    -JavaScriptのgetElementsByClassName()メソッドと同じ操作を実行します.
    • $(functuon){
  $("p").on("click", function(){
    $("jquery").css("backgroundColor", "lightgray");  // class 가 "jquery"인 요소를 모두 선택
  });
});
  • プロパティを使用して、条件を満たす特定のHTML要素
    • を選択します.
    $(functuon){
  $("button").on("click", function(){ // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택
    $("img[alt='flower']").attr("scr", "/examples/images/img_1.png");
  });
});

    $()関数に渡されるパラメータは、引用符("")を使用した文字列で渡さなければなりません。

    私は何もすることがなかったので、テキストエディタを作りました.
    コーディングテストの準備-日付34