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 코드를 주세요
(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 코드를 변경해 보겠습니다.
나는 foo 클래스가 있는 div 내의 범위입니다.
빈 타겟이 있는 ExtJs 링크! /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입니다.
라는 클래스 속성이 있습니다.
공백으로 설정 ExtJS 링크 div>
- 항목 #1 / li>
- 항목 #3
- 링크 가 있는 항목 #4
| 첫 번째 열 | 첫 번째 행, 두 번째 열 |
| 두 번째 행, 셀이 병합되었습니다! | |
| 세 번째 행, 첫 번째 열 | 세 번째 열 td> |
