【jQuery/Selector #35】:input Selector 1. Description jQuery(":input") : , , , 등의 Element를 찾는다. 2. Example #1버튼을 클릭하면 하위의 :input Element를 찾아서, 해당 Element가 들어있는 의 배경색을 변경한다. 버튼을 클릭할 때마다 무지개(?) 색상이 토글된다. JavaScript/jQuery 2023.03.05
【jQuery/Selector #34】:image Selector 1. Description jQuery(":image") : type이 image로 설정된 Element들을 찾는다([type="image"]와 동일하다). 2. Example #1버튼을 누르면 [type="image"]를 찾아서 border스타일을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. JavaScript/jQuery 2023.03.05
【jQuery/Selector #33】ID Selector (“#id”) 1. Description jQuery("#id") : 해당 id로 설정된 Element를 찾는다. ※ id는 한번만 사용되어야 하지만, 똑같은 id가 중복되어 사용되었을 경우 첫 번째 id와 매칭된다. 2. Example #1버튼을 클릭하면 id가 mygreatcompany로 설정되어 있는 Element를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. JavaScript/jQuery 2023.03.05
【jQuery/Selector #32】:hidden Selector 1. Description jQuery( ":hidden" ) : 숨겨진 모든 Element들을 찾는다. 다음의 경우 숨겨진 Element로 취급될 수 있다. display:none으로 설정된 경우 input type="hidden"으로 설정된 경우 width와 height가 0으로 설정된 경우(※ 테스트 결과 :hidden으로 필터링되지 않았다) 상위 Element가 hidden으로 설정된 경우 jQuery 1.3.2버전부터 visibility:hidden은 :hidden필터링에서 제외되었다. jQuery 3버전부터는 과 같이 Layout을 갖지 않는 Element들은 :hidden필터링에서 제외되었다. ※ 자세한 내용은 「6 Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 h.. JavaScript/jQuery 2023.03.05
【jQuery/Selector #31】:header Selector 1. Description jQuery(":header") : h1, h2, h3 ... 와 같은 Element들을 찾는다. 2. Example #1버튼을 클릭하면 의 에서 header태그들을 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. JavaScript/jQuery 2023.03.04
【jQuery/Selector #30】:has() Selector 1. Description jQuery(":has(selector)") : selector를 적어도 하나 이상 가지고 있는 Element들을 찾는다. 2. Example #1버튼을 클릭하면 의 안에 태그를 가지고 있는 Element들을 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. JavaScript/jQuery 2023.03.04
【jQuery/Selector #29】Has Attribute Selector [name] 1. Description jQuery("[attribute]") : (속성값이 없더라도)attribute속성이 설정되어 있는 Element를 찾는다. 2. Example #1버튼을 클릭하면 의 에 name속성이 설정되어 있는 Element를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. JavaScript/jQuery 2023.03.04
【Native/Selector #4】Attribute Contains Selector [name*=”value”] 1. Description querySelectorAll("[name*='value']") 속성값의 부분 문자열과 매칭되는 Element들을 선택한다. ※ jQuery Attribute Contains Selector [name*=”value”]의 Native버전입니다. 2. Example #1버튼을 클릭하면 name에 'va'가 들어가 있는 Element를 찾아서 텍스트의 색상을 파랑으로 변경하고 'is great'이라는 문자열을 추가한다. 버튼을 클릭할 때마다 텍스트의 오른쪽에 클릭한 횟수가 표시된다. JavaScript/Native 2023.02.27
【Native/Selector #3】Attribute Contains Prefix Selector [name|=”value”] 1. Description querySelectorAll("[name|='value']") 기본적으로 속성값의 전체 문자열이 같은 요소들을 선택하지만, [시작문자열]다음에 '-'(하이픈)기호가 들어 있는 요소도 선택한다. ※ 【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”]의 Native버전입니다. 2. Example #1버튼을 클릭하면 name속성이 UTF-8로 되어 있는 Element를 찾아서 배경색을 변경하고, #2버튼을 클릭하면 name속성이 UTF로 시작하면서 '-'(하이픈)으로 연결되는 Element를 찾아서 배경색을 변경한다. JavaScript/Native 2023.02.26
【Native/Selector #1】querySelectorAll("*") 1. Description querySelectorAll("*") 부모 Element하위에 있는 모든 자식 Element를 찾는다. 2. Example #1버튼을 클릭하면 태그 하위의 모든 Element를 찾아서, 태그이름과 텍스트를 표시한다. document.getElementById("_1q74-example").querySelectorAll("*") JavaScript/Native 2023.02.25