//jQuery selector$ //$(expression,[context]) return jQuery //Unit One //expression の CSS 定義者は、CSS 構文を使用して選択される要素を表します // $("*"); // ページ上のすべての要素タグを表します // $("th, td") // すべての 要素タグを表します// $ ("a") // すべての 要素タグを示します // $("div#onlydiv") // id=onlyidv を持つ要素 $("#ID") を示しますCSS 選択は完全なドキュメント一致です // $("#rated") // id= Rating の要素を表します// $("#ownedlist > li"); // すべてのサブクラスを表しますid=ownedlist の要素ですが、要素 の下の子要素は含まれません // $("#ownedlist li:last") // id=ownedlist の li の最後の要素を表します。 // $("#ownedlist li:first"); // id=ownedlist の li の最初の要素を表します // $("#ownedlist li:nth-child(0)"); id=ownedlist の li の (N) 番目の要素 n、n は配列の添字です // $("button:only-child") // それが CSS の親コンテナーの唯一の要素であることを示しますselection// $(".stuff:empty"); // 内の空の要素を CSS で指定します。 // $(".buttons:enabled"); // CSS 選択で通常有効になっている要素を表します // $(".buttons:disabled"); // 内の無効な要素を CSS で表します。 // $("input:checked") // CSS 選択で選択されている要素を表します / / $("button:not(.not)"); // CSS 選択の not() の要素の削除を表します// $("button.not"); // 要素が $(" であることを示します) CLSS") with class=not in cssselection is a full document match// $("#ownedlist2 li"); // id=ownedlist のすべての子要素を示し、すべての子要素の子要素が含まれます// //alert($("#ownedlist ~ li").length) ; // $("#ownedlist,.buttons,li") // CSS セレクターに一致する要素 //式は要素の属性に基づいて選択されます //alert($("button[@class]").length); //クラス属性を持つ要素を表します //alert( $("button[@class=not").length); // クラス属性と not に等しい値を持つ要素を表します。// alter($('button[@class^=not'). length); // クラス属性と、not に一致する値で始まる要素を表します。 / / alter($('button[@class$=not').length); // を持つ要素を示します。 not と一致するクラス属性と not で終わる値。//alert($('button[@class*=not' ).length); // not//選択する必要があるページ要素を表す式 XPATH フィルター XPATH 構文//$("ol[@id^ ='ownedlist']").find("li:contains('First') ").each(function(i) { //// $(this).html( $(this).html( ) " BAM! " i ); // $(this).mouseover (function(){ // $(this).css("color","red"); // }); $(this).mouseout(function(){ // $(this).css("color","#000"); // }); // }); ol タグを含むすべての要素を検索します属性 id=ownedlist の場合、親要素を見つけて各反復を直接使用する //ol[@id='ownedlist'] を記述する方法が 2 つあります //ol[@id='ownedlist'] /* find('child-element').each() を使用して、親要素の下にあるすべての子要素を反復処理します //ユニット 2 ///$(html, [ownerDocument]) return jQuery //この関数では HTML 要素テキストを渡すことができ、コンストラクターはこの HTML テキストによって作成された jQuery オブジェクトを生成します。このオブジェクトは元々存在しないオブジェクト、または //$( 'hello は元々ページに存在していました').appendTo("h2"); //マークアップ テキストを生成し、ページの h2 タグに追加します //元のページ要素を取り出して追加することもできます //$( "input", this). appendTo("h2"); // ここで取り出されたページ要素はコピーされるのではなく移動されることに注意してください。 ///$(elements) return jQuery //この関数を使用すると、DOM に直接渡すことができます //$(document.forms[0].elements).appendTo("h2"); // DOM ドキュメントを参照できます//$(callback); return jQuery //以下はセレクターの手順です/* 基本: #id: ID に基づいてオブジェクトを取得します属性。 要素: 特定の HTML タグに一致するすべてのオブジェクト .class: オブジェクトの class 属性に従ってオブジェクトを取得 *: すべてのオブジェクトを取得 selector1、selector2、selectorN: 複数取得セレクター コレクション、重複は削除しません レベル セレクター: ancestor子孫: このセレクターはスペースです。これは、最初に最初のセレクターのすべてのオブジェクトを検索し、次にそのすべての子孫ノードを検索することを意味します。 2番目のセレクター。 parent > child: このセレクターは大なり記号です。これは、最初に最初のセレクターのすべてのオブジェクトを検索し、次にその子ノード (グランド ノードではない) で 2 番目のセレクターに一致するすべてのオブジェクトを検索することを意味します。 prev next: このセレクターはプラス記号です。これは、まず最初のセレクターのすべてのオブジェクトを検索し、次に同じレベルの次のノードに続き、2 番目のセレクターにも一致するオブジェクトを検索することを意味します。 prev ~ 兄弟: このセレクターは ~ 記号です。これは、まず最初のセレクターですべてのオブジェクトを検索し、次に同じレベルの後続のすべてのノードで 2 番目のセレクターに一致するオブジェクトを検索することを意味します。基本フィルター文字: :first: 複数のオブジェクトの最初のオブジェクトと一致:last: 複数のオブジェクトの最後のオブジェクトと一致:not(selector): 項目とコンテンツの一致削除されなかった後のセレクター内 :even: すべてのオブジェクトの偶数と一致します:odd: すべてのオブジェクトの奇数と一致します:eq(index): 何かと一致します 次の表の単一の要素:gt(index): 特定の添え字より大きいすべての要素に一致 :lt(index): 特定の添え字より小さいすべての要素に一致 :header: すべてのヘッダー要素に一致します。たとえば、h1、 h2、h3、h4、h5、h6 :animated: すべてのアニメーション要素に一致します。 テキスト フィルター: :contains(text): 内部コンテンツ オブジェクト (間接的なオブジェクトを含む) を持つテキスト要素に一致します。便利な状況 :empty: 子要素のないすべてのオブジェクトと一致します :has(selector): 少なくとも 1 つの子セレクターを含むすべてのオブジェクトと一致します :parent: すべての親オブジェクトと一致します。親オブジェクトにはそれらのオブジェクトが含まれますテキストのみを含む 可視性フィルタ: :hidden: すべての非表示オブジェクト、または入力の非表示タイプに一致します :visible: すべての可視オブジェクトに一致します 属性フィルタ: [attribute]: 特定の属性を持つすべてのオブジェクトと一致します [attribute=value]: 特定の属性と値を持つオブジェクトと一致します [attribute!= value]: 特定の属性を持ち、特定の値ではありません [attribute^=value]: 特定の属性を持ち、特定の値で始まるオブジェクトと一致します [attribute$=value]: 特定の属性を持ち、特定の値で終わるオブジェクトと一致します[attribute*=value]: 特定の属性を持ち、特定の値を含むオブジェクトと一致します [selector1] [selector2][selectorN]: 複数の属性セレクターに同時に一致するオブジェクトと一致します サブフィルター: :nth-child(index/even/odd/equation): 子要素内の特定の添え字 /even/odd/ と一致します 方程式オブジェクトの場合、:eq(index) は特性にのみ一致します一方、このメソッドは複数のオブジェクトの特定のサブ要素の共通の特性と一致します。 : first-child: 最初の子要素と一致します。 :last-child: 一致します。最後の子要素 これら 2 つのマッチャーは、複数の親オブジェクトのすべての子要素と一致することもできます :only-child: 親要素に子要素が 1 つしかない場合は、このサブ要素 形式のみと一致しますフィルター 名前 タイプ :input 戻り値: Array 形式の入力要素と一致します : text 戻り値: Array 要素と一致します 形式の入力タイプ テキスト: パスワード 戻り値: Array :radio 形式の入力タイプ パスワードを持つ要素と一致します。 戻り値: Array Match入力タイプが radio であるフォーム内の要素:checkbox 戻り値: Array 入力タイプが checkbox :submit であるフォーム内の要素と一致する 戻り値: Array フォーム内の入力タイプ submit を持つ要素と一致します:image 戻り値: Array フォーム内の画像を持つ要素と一致します:reset 戻り値 : Array 入力タイプがリセットであるフォーム内の要素と一致します:button 戻り値: Array 入力タイプがボタンであるフォーム内の要素と一致します:file戻り値: Array フォーム内の入力タイプが file である要素に一致します。:hidden 戻り値: Array フォーム内の入力タイプが Element または hidden である要素に一致します。エリア :有効 戻り値: Array は有効な要素すべてに一致 : 無効 戻り値: Array はすべての非有効要素に一致要素 :checked 戻り値: Array 選択されたすべての要素と一致します:selected 戻り値: Array ドロップダウン リストで選択されたすべての要素と一致します */
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
