Ext.get() と Ext.query() を組み合わせて使用​​すると、elements_jquery を取得する最も柔軟な方法が実現します。

前に書いた get() と query() のパラメーターは省略しました。まずドキュメント内の関数プロトタイプを見てみましょう:
Ext.get( Mixed el ) : Element
Parameters:
el : 混合
ノード、DOM ノード、または既存の要素の ID。
戻り値:
Element
Element オブジェクト
Ext.query( String path, [Node root] ) :配列
パラメータ:
path : 文字列
セレクター/xpath クエリ
root : ノード
(オプション) クエリの開始 (デフォルトはドキュメント)
戻り値:
配列
クエリ関数は実際には DOM ノードの配列を返します。Ext.get のパラメーター el は DOM ノードにすることができます。はは、わかりますか?つまり、最も柔軟な取得方法を実現するには、クエリを使用して DOM ノードを取得し、それを渡して要素に変換する必要があります。つまり、
var x=Ext.query(QueryStr);
// インライン関数として記述しないのはなぜでしょうか?ここでの x は 1 つの要素のみであり、上の文の x は配列であるため、自分で変換して処理できます。
var y=Ext.get(x);
その場合、QueryStr の形式は次のようにする必要があります。次に紹介します（実際には、jQueryのセレクターの形式に非常に似ています）。Elementを取得した後に何ができるかについては、ExtJSドキュメントのExt.Elementの説明を自分で読んでください。それを抽出します。
まずデモ用に HTML コードを提供します

コードをコピーします コードは次のとおりです:

私は div ==>私のクラス: foo
私は foo class を持つ div 内のスパンです
ExtJs リンク

私の ID: foo,私のクラス: bar

私は foo div 内の P タグです

私は bar クラスを持つ div 内の Span です< ;/span>
内部リンク

BlueLotus7@126.com ;/div> ;



(1) タグに従って取得します。 // このクエリは 2 つの要素を含む配列を返します。クエリでは、ドキュメントのすべてのスパン タグ全体が選択されます。
Ext.query("span");

// このクエリは ID foo を考慮するため、1 つの要素を含む配列を返します。
Ext.query("span", "foo"); // これは 1 つの要素を含む配列を返します。内容は div タグの下の p タグです。
Ext.query("div p");
// これは 2 つの要素を含む配列を返します。内容は div タグの下の span タグです。
Ext.query("div span") (2) ID に基づいて次のようになります。 // このクエリは次の値を返します。 foo div 要素の配列を含むコンテンツ!
Ext.query("#foo"); //または直接 Ext.get("foo");(3) クラス名に従って取得します: Ext.query(".foo");/ /このクエリは 5 つの要素の配列を返します。
Ext.query("*[class]"); // 結果: [body#ext-gen2.ext-gecko、div#bar.foo、span.bar、div#foo.bar、span.bar] (4) 取得する汎用メソッド: (このメソッドを使用して、ID、名前、クラス、CSS などで取得できます) // これにより、クラスが "bar" に等しいすべての要素が取得されます
Ext.query ("*[class=bar" ]");
// これにより、クラスが "bar" に等しくないすべての要素が取得されます
Ext.query("*[class!=bar]");
// これは " b で始まるすべての要素"
Ext.query("*[class^=b]") からクラスを取得します。
// これはクラスが " で終わるすべての要素を取得します。 r"
Ext.query( "*[class$=r]");
//これにより、class
Ext.query("*[class] 内の「a」文字を抽出するすべての要素が取得されます*=a]");// これにより、「BlueLotus7」と等しい名前を持つすべての要素が取得されます
Ext.query("*[name=BlueLotus7]");
HTML コードを変更しましょう:

コードをコピー コードは次のとおりです。

🎜>

; 私の ID は: bar、私のクラス: foo
私は foo クラスを持つ div 内のスパンです >空のターゲットを持つ ExtJs リンク!
< /div>

私の ID: foo、私のクラス: bar

foo div 内の P タグ
私は bar クラスを持つ div 内のスパンです
内部リンク

;


// 赤色の要素をすべて取得
Ext.query("*{color=red}"); // [div#bar.foo]
// 赤色のピンク色の要素をすべて取得 子の要素elements
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
// 赤色のテキストではないすべての要素を取得します
Ext .query ("*{color!=red}"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core. scan.bar, a www.extjs.com, div#foo.bar, p, scan.bar, a test.html#]
// color 属性が "yel" で始まるすべての要素を取得します
Ext. query("*{color^=yel}"); // [a www.extjs.com]
// 色属性が「ow」で終わるすべての要素を取得します
Ext.query( "*{color $=ow}"); // [a www.extjs.com]
// color 属性に「ow」文字が含まれるすべての要素を取得します
Ext.query("*{color*= ow}" ); // [a www.extjs.com, span.bar]
(5) 疑似演算子メソッドを html に変更します:

コードをコピーします コードは次のとおりです。

私は div ==> です。それは bar で、私のクラスは foo
です。これは span 要素で、外側の div 要素には foo の class 属性があります。
blank=target ExtJS リンクを設定 div>

ここの ID は次のとおりです。 foo、ここでのクラスは bar

"foo" div で囲まれた p 要素です。

これは外側の層で div で囲まれたspan要素で、spanもbarのclass属性を持ちます。
組み込みリンク

" ボーダー:2px 点線ピンク; マージン:5px; パディング:5px;">

• アイテム #1
/ li>

• アイテム #3


• リンク
>

最初の行最初の列

2 行目、セルが結合されました。

td>

最初の行、2番目の列

3 行目、1 列目

<フォーム>
クリックされました



私ではありません



//SPAN 要素はその親要素の最初の子要素です
Ext.query("span:first-child"); // [span.bar]
//A 要素はその親要素ですparent 要素の最後の子要素 ​​
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
// SPAN 要素は 3 番目です親要素の 2 つの子要素 ​​(1 から始まる番号)
Ext.query("span:nth-child(2)") // [span.bar]
//TR 要素は奇数です親要素 子要素の数
Ext.query("tr:nth-child(odd)") // [tr, tr]
//LI 要素は親要素の子要素の数が奇数です
Ext.query("li:nth-child(even)") // [li, li]
//親要素の唯一の子要素である A 要素を返します。
Ext. query("a :only-child") // [a test.html#]
//チェックされた (チェックされた) INPUT 要素をすべて返します
Ext.query("input:checked") // [input# chked on ]
//最初の TR 要素を返します
Ext.query("tr:first") // [tr]
//最後の INPUT 要素を返します
Ext.query(" input :last") // [input#notChked on]
//2 番目の TD 要素を返します
Ext.query("td:nth(2)") // [td]
/ /それぞれを返します「範囲内」の文字列を含む DIV
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
//Return None 以外の DIV が含まれますFORM サブ要素
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
//A 要素を返します これらの DIV コレクション
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
// 引き続き TD が集まる TD を返します。特に、colspan 属性を持つ TD が使用されている場合、それは無視されます。
Ext.query("td:next(td)") // [td, td]
// 要素を返しますINPUT の前にあるそれらの LABEL 要素 collections
Ext.query("label:prev(input)") //[label, label]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript_javascript スキルの String クラスの replace 関数についても説明します。次の記事：JavaScript_javascript スキルの String クラスの replace 関数についても説明します。

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved