Ext.get()과 Ext.query()는 elements_jquery를 가져오는 가장 유연한 방법을 달성하기 위해 함께 사용됩니다.

앞서 작성한 get() 및 query()에 대한 매개변수를 생략했습니다. 먼저 문서의 함수 프로토타입을 살펴보겠습니다.
Ext.get( Mixed el ) : Element
매개변수:
el : 혼합
노드의 ID, DOM 노드 또는 기존 요소
반환:
요소
요소 객체
Ext.query( 문자열 경로, [노드 루트] ) : Array
매개변수:
path : String
selector/xpath 쿼리
root : Node
(선택 사항) 쿼리의 시작(기본값은 document)
반환:
Array
query 함수는 실제로 DOM Node의 배열을 반환하고 Ext.get의 매개변수 el은 DOM Node가 될 수 있습니다. 하하, 이해하셨나요? 즉, 가장 유연한 검색 방법을 얻으려면 쿼리를 사용하여 DOM 노드를 얻은 다음 이를 전달하여 요소로 변환해야 합니다. 즉,
var x=Ext.query(QueryStr)
//인라인 함수로 작성하면 어떨까요? 여기서 x는 하나의 요소만 될 수 있고 위 문장의 x는 배열이므로 직접 변환하여 처리할 수 있습니다.
var y=Ext.get(x)
그런 다음 QueryStr의 형식은 다음과 같아야 합니다. 다음에 소개합니다.(사실 jQuery의 선택기 형식과 매우 유사합니다.) Element를 얻은 후 수행할 수 있는 작업에 대해서는 ExtJS 문서에서 Ext.Element에 대한 설명을 직접 읽을 수는 없습니다. 그것을 추출하십시오.
먼저 시연용 HTML 코드를 주세요

코드 복사 코드는 다음과 같습니다.

내 ID는 bar입니다. 내 클래스: foo
나는 foo 클래스가 있는 div 내의 범위입니다.
ExtJs 링크

내 ID: foo, 내 클래스: bar

나는 foo div 내의 P 태그입니다

나는 bar 클래스가 있는 div 내의 범위입니다내부 링크

BlueLotus7@126.com

(1) 태그에 따라 가져옵니다. // 이 쿼리는 두 개의 요소가 있는 배열을 반환합니다. 쿼리는 문서의 전체 All 범위 태그를 선택합니다.
Ext.query("span");
// 이 쿼리는 ID foo를 고려하기 때문에 하나의 요소가 있는 배열을 반환합니다.
Ext.query("span", "foo"); // 이는 하나의 요소가 있는 배열을 반환하며, 내용은 div 태그 아래의 p 태그입니다.
Ext.query("div p"); 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]");
//이것은 클래스에서 "a" 문자를 추출하는 모든 요소를 ​​가져옵니다
Ext.query("*[class *=a]");// 이렇게 하면 이름이 "BlueLotus7"과 같은 모든 요소를 ​​가져옵니다.
Ext.query("*[name=BlueLotus7]");
html 코드를 변경해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

🎜>

; 내 ID는 bar, 내 클래스는 foo
나는 foo 클래스가 있는 div 내의 범위입니다.
빈 타겟이 있는 ExtJs 링크! /div>

내 ID: foo, 내 클래스: bar

I' m 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, 스크립트 ext-base.js, 스크립트 ext-core. span.bar, a www.extjs.com, div#foo.bar, p,span.bar,a test.html#]
// 색상 속성이 "yel"로 시작하는 모든 요소를 ​​가져옵니다.
Ext. query("*{color^=yel}"); // [a www.extjs.com]
// 색상 속성이 "ow"로 끝나는 모든 요소를 ​​가져옵니다.
Ext.query( "*{color $=ow}"); // [a www.extjs.com]
// 색상 속성에 "ow" 문자가 포함된 모든 요소를 ​​가져옵니다.
Ext.query("*{color*= ow}" ); // [a www.extjs.com,span.bar]
(5) 의사 연산자 메서드를 html로 변경:

코드 복사 코드는 다음과 같습니다.

< ;div id="bar" class="foo" style="color:red; border: 2px doted red; margin:5px; padding:5px;">
나는 div입니다 ==> 그것은 bar이고 내 클래스는 foo입니다.
여기에는 스팬 요소가 있고 외부 div 요소에는 foo라는 클래스 속성이 있습니다.
공백으로 설정 ExtJS 링크 div>

foo, 여기서 클래스는 bar

"foo" div로 둘러싸인 p 요소입니다.

여기 외부 레이어의 div로 둘러싸인 스팬 요소가 있으며, 스팬에도 bar라는 클래스 속성이 있습니다.
내장 링크

• 항목 #1
/ li>

• 항목 #3


• 링크
가 있는 항목 #4

clicked label> />

나 말고요

//SPAN 요소는 상위 요소의 첫 번째 하위 요소입니다
Ext.query("span:first-child") // [span.bar]
//A 요소는 해당 요소입니다. parent 요소의 마지막 하위 요소
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
//SPAN 요소는 세 번째입니다. 상위 요소 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]
//두 번째 TD 요소 반환
Ext.query("td:nth(2)") // [td]
/ /각각 반환 "within" 문자열을 포함하는 DIV
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
//Return 없음 다음을 제외한 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 요소 컬렉션
Ext.query("label:prev(input)") //[label, label]

첫 번째 열	첫 번째 행, 두 번째 열
두 번째 행, 셀이 병합되었습니다!
세 번째 행, 첫 번째 열	세 번째 열 td>