ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの基礎知識ポイントを詳しく解説
jqueryの基礎知識ポイントを詳しく解説
- php中世界最好的语言オリジナル
- 2018-04-23 11:26:451614ブラウズ
今回はjqueryの基礎知識を詳しく解説していきます。jqueryの基礎知識を使う際の注意点は何なのか、具体的な事例を見てみましょう。
jQuery は、CSS3 およびさまざまなブラウザー (IE 6.0 以降、FF1.5 以降、Safari 2.0 以降、Opera 9.0 以降)、および jQuery2.0 以降と互換性のある優れた軽量の JS ライブラリです。このバージョンでは、IE6 はサポートされなくなります。 /7/8 ブラウザ。 jQuery を使用すると、ユーザーは HTML (Standard Universal Markup Language に基づくアプリケーション)、イベントをより簡単に処理し、アニメーション効果を実装し、Web サイトに AJAX インタラクションを簡単に提供できるようになります。 jQuery のもう 1 つの大きな利点は、その ドキュメント が非常に充実していることです。また、さまざまなアプリケーションについても詳細に説明されており、選択できる成熟したプラグインも多数あります。
1. jQueryエントリー関数とJsエントリー関数の違い
【注意】jsエントリー関数とは、 window.onload = function(){};
違い1:書き込み回数が異なる
Js エントリー関数は 1 回しか出現できません。複数回出現すると、イベント カバレッジの問題が発生します。
jQuery のエントリ関数は、イベント カバレッジの問題なく何度でも出現できます。
違い2:実行タイミングが異なります
Jsエントリー関数は、すべてのファイルリソースが読み込まれた後に実行されます。これらのファイル リソースには、ページ ドキュメント、外部 js ファイル、外部 css ファイル、画像などが含まれます。
jQueryのentry関数はドキュメント読み込み後に実行されます。ドキュメントのロードが完了すると、DOM ツリーがロードされた後、すべての外部リソースがロードされるのを待たずに DOM を操作できるようになります。
ドキュメントのロード順序: 上から下へ、解析と実行が同時に行われます。
2. jQueryオブジェクトとDOMオブジェクトの相互変換
①ここでいうDOMオブジェクトとは、jsを使ってDOMを操作して返された結果です
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
②ここでいうjQueryオブジェクトとは、提供されたjQueryを使って返された結果DOMの操作方法で
var $btn = $(“#btnShow”); // $btn就是一个jQuery对象
③DOMオブジェクトをjQueryオブジェクトに変換
var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready
④jQueryオブジェクトをDOMオブジェクトに変換
// 第一种方式 var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式） // 第二种方式 var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2
3. jQueryセレクター
| シンボル(名前) | 説明 | usage |
| basicセレクター（焦点） | ||
| IDセレクター$（ "＃btnshow"）。css（ "color"、 "red"）; btnShowの要素です(戻り値はjQueryオブジェクト、以下同様) | . | Class selector|
| $(".liItem").css("color", "red "); | クラス liItem を含むすべての要素を選択します | element | タグセレクター
| $("li").css("color", "red"); | という名前のタグを選択しますli すべての要素 | レベルセレクター |
| 子孫セレクター | ||
| $("#j_wrap li").css("color", "red"); | select id すべて子孫要素 li | >子孫セレクター |
| すべての子要素 li を選択します。 id を持つ要素のすべての子要素 ul j_wrap |
基本フィルターセレクター |
|
| :eq(index) | ||
| $("li:eq(2)").css("color", "red"); | li 要素内のインデックス番号 2 の要素を選択します
: odd |
|
| $("li:odd").css("color", "red") ; | すべての要素を選択li 要素に奇数のインデックス番号がある||
| :even | 一致した要素の中で偶数のインデックス番号を持つすべての要素を選択します。インデックスは 0 から始まります |
$("li:odd").css("color", "red") ; li要素内のインデックス番号が偶数の要素を全て選択 |
| フィルターセレクター(メソッド)(ポイント) | ||
| find(selector) | 指定された要素の子孫要素(descendants)を全て検索するSun) |
$("#j_wrap").find("li").css("color", "red"); j_wrap の ID を持つすべての子孫要素 li を選択します |
| children( ) | 指定した要素の直接の子要素(子要素)を検索 |
$("#j_wrap").children("ul").css("color","red"); どれかを選択j_wrap の ID を持つすべての子孫要素 ul |
| siblings() | すべての兄弟要素を検索します (それ自体を除く) |
$("#j_liItem").siblings().css("color", "red "); ID j_liItem を持つすべての兄弟要素を選択します |
| parent() | 親要素 (parent) を検索します |
$("#j_liItem").parent("ul").css(" color" , "red"); j_liItemのIDを持つ親要素を選択します |
| eq(index) | 指定された要素のindex番目の要素を検索します。indexは0から始まるインデックス番号です |
$("li ”).eq(2).css(“color”, “red”); すべての li 要素の中から 2 番目の要素を選択します |
後の方法はマスターできたと思いますこの記事の事例を読むと、さらに刺激的になります。php 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
全体的なアーキテクチャ分析と jQuery の使用の詳細な説明
jQuery アップロードされた画像のタイプとサイズを決定する方法の詳細な説明
以上がjqueryの基礎知識ポイントを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。