아래는 jQuery에서 지원하고 있는 Selector 이다. jQuery를 살펴 보다보니 예전에 봤던 HTML, CSS, JavaScript, HTML의 데이터 모델, XML, XPath 등이 생각이 났다. XPath 정의 Selector는 예전에 봤던 XPath가 잘 기억이 나지 않아 생각나는 것만 일부 정리를 했다. 대신에 HTML의 데이터 모델을 뒤에 추가 한다.
CSS3 Selectors
| Selector | Selector 설명 |
| * |
모든 Element |
| E |
예) element: <element>~</element> |
| .class |
예) .className: <element class="className">~</element> |
| #id |
예) #elementID: <element id="elementID">~</element> |
| [~] Attribute로 선택 |
|
| E ~ F Element의 관계로 선택 |
|
| E:~ 위치로 선택 |
|
| E:~ 링크 관계로 선택 |
|
| E::~ 확장 선택 |
|
| 기타 |
|
jQuery 정의 Selector
| Selector | Selector 설명 |
| input type에 따라 선택 |
|
| 활성, 선택 여부로 선택 |
|
| :animated |
|
| :contains(val) |
|
| :header |
|
| :not(filter) |
|
| :parent |
|
XPath 정의 Selector
- XPath : XML Path Language
- XPath Selectors
| Selector | Selector 설명 |
| E/F |
|
| E//F |
|
| E[@F] |
|
| E/* |
|
| E/.. |
|
| E[@attr=val] |
|
HTML 데이터 모델
InnerHTML Model
- this.innerHTML = str;
- this.innerText = str;
- this.outerHTML = str;
- this.outerText = str;
- this.insertAdjacentHTML(,);
- this.insertAdjacentHTML("beforebegin", str);
- this.insertAdjacentHTML("afterbegin", str);
- this.insertAdjacentHTML("beforeend", str);
- this.insertAdjacentHTML("afterend", str);
- insertAdjacentText(,);
- this.insertAdjacentText("beforebegin", str);
- this.insertAdjacentText("afterbegin", str);
- this.insertAdjacentText("beforeend", str);
- this.insertAdjacentText("afterend", str);
Element Model
- this.parentElement;
- this.children;
- this.contains(node);
- bodyElement = document.getChildNodes().item(0).getChildNodes().item(1);
- bodyElement = document.getFirstChild().getFirstChild().getNextSibling();
- typeInt = bodyElement.getNodeType()
- elementName = bodyElement.getNodeName();
- elementContent = bodyElement.getFirstChild().getNodeValue();
- var td = xCreateElement("td");
- linkText = document.createTextNode("edit");
- tr.appendChild(td);
- oldNode = theDiv.firstChild.nextSibling.nextSibling;
- theDiv.removeChild(oldNode);
- newNode = document.createTextNode(newText);
- theDiv.appendChild(newNode);
- theDiv.replaceChild(newNode, oldNode);
- theDiv.firstChild.nextSibling.nextSibling.nodeValue=newText;
Document All Model
- window.document.all["idVal"]
- window.document.all.idVal
- var tagH2 = window.document.all.tags("H2");
- tagH2[0, 1, 2 . . .]
- this.getElementsByTagName("*");
- formElement = window.document.getElementById("noteForm");
Posted by 산사랑


