1Q74

다음의 Selector들은 CSS사양이 아니기 때문에 독립적인 사용만으로는 native DOM의 querySelectorAll()이 제공하는 속도향상을 기대할 수 없으므로, 우선 CSS Selector를 사용한 다음 .filter()를 적용하는 것이 좋다고 합니다. ※ 자세한 내용은 「2. Reference」참고하세요. 1. Extensions :animated Selector Select all elements that are in the progress of an animation at the time the selector is run. Also in: Selectors > Attribute Attribute Not Equal Selector [name!=”value”] Select elements..

원문 : https://api.jquery.com/file-selector/ 1. 무엇 ("*")은 모든 요소들을 선택하는 universal selector이다. $(":checkbox"), $(":file"), $(":disabled"), $(":enabled") ... 처럼 사용하는 것은 ":"로 시작하는 Selector들은 $("*:checkbox"), $("*:file"), $("*:disabled"), $("*:enabled")과 같은 의미이다. 2. 어떻게 모든 요소들의 검색을 피하려면, $("input:checkbox"), $("input:file"), $("div[name='container'] :enabled")와 같이 선행하는 Selector와 조합해서 사용해야 한다.

jQuery API문서를 보면서 계속 나를 신경쓰이게 하는 것이 있어서 검색을 좀 해 보았다. 1. 무엇 이미지의 설명 중에서 「pseudo-class selectors(thos that begin with a ":"」부분이다. 출처 : https://api.jquery.com/file-selector/ 2. 내용 pseudo-class는 요소(element)의 특별한 상태를 정의하는 데 사용한다고 한다. 태그로 예를 들면, a:link, a:visited, a:hover ...와 같이 사용한다고 할 때 [:link], [:visited], [:hover]을 의미한다. ※ 자세한 내용은 「3. Reference」를 참고하시기 바랍니다. 3. Reference Thank you, www.w3schools...

1. Description :file은 [type="file"]과 동일하다. $(":file")과 같이 사용하기 보다는 선행하는 다른 Selector들과 조합해서 사용하는 것이 좋다고 합니다(자세한 내용은 여기나 「4. Reference」를 참고하세요). 속도향상을 위해서는 [type="file"]과 같이 사용하는 것이 좋다고 합니다. 2. Example #1버튼을 클릭하면 태그 하위에 있는 file타입의 InputElement를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.

1. Description 3.4버전부터 Deprecated되었고, .even()은 3.5.0이상의 버전부터 사용할 수 있다. (0부터 시작하는 인덱스 기준)짝수번째 Element를 찾는다. $(":even")처럼 사용하면 querySelectorAll()에서 제공하는 속도향상의 이점을 기대할 수 없으므로, 우선 CSS Selector를 사용한 후 .filter(":even")을 사용하는 것이 좋다고 한다. ※ 자세한 내용은 「5. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 태그들 중, 짝수번째 태그를 찾아서 배경색을 변경한다. 버튼 클릭할 때마다 해당 스타일이 토글된다.

1. Description 3.4버전부터 Deprecated되었다. 매치되는 Element들 중에서, 0으로 시작하는 인덱스의 n번째 Element를 선택한다. :eq(index) : (첫 번째 Element부터 찾기 시작해서) index번째 Element를 선택한다. :eq(-index) : (마지막 Element부터 찾기 시작해서) index번째 Element를 선택한다. (1.8버전부터 추가되었다). ※ 3.4버전부터는 Selector로 사용하지 말고, 찾아진 Element들에 .eq()를 적용하세요. 2. Example 예제는 .eq()함수를 사용한다. #1버튼을 클릭하면 태그들 중, 두 번째 태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다. #2버튼을 클릭하면 태그..

1. Description 자식Element를 가지고 있지 않은 모든 Element들을 찾는다. 이것은 :parent와는 정반대의 Selector이다. 자식에는 text노드도 포함된다(즉, 태그 내용에 문자열이 들어가 있으면 자식Element라고 인정하는 것이다). 자식노드가 없는 태그들은 다음과 같은 것들이 있다. , , , 2. Example #1버튼을 클릭하면 자식Element가 비어 있는 Element들을 찾아서, [empty]라는 텍스트를 삽입하고 배경색을 gray로 변경한다. 버튼을 클릭할 때마다 해당 기능을 토글시킨다.

1. Description 1$(":enabled")처럼 사용하기 보다는 다른 Selector와 조합해서 사용하는 것이 추천된다. (※ 이 내용은 $(":disabled")와 같으므로 여기를 참고하기 바랍니다). :enabled는 disabled프로퍼티가 false인 것을 찾는 반면 :not([disabled])는 disabled속성이 설정되지 않은 요소들을 찾는다. :enabled는 disabled속성을 지원하는 , , , , , Element를 찾을 때 사용해야 한다. 2. Example #1버튼을 클릭하면 checkbox가 enabled인 것을 찾아서 체크표시를 넣는다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.

1. Description 해당 태그 이름으로 된 모든 Element들을 찾는다. 2. Example #1버튼을 클릭하면 , , 태그를 찾아서 텍스트 중간에 'Great'을 삽입한다. 해당 버튼을 클릭할 때마다 문자열 삽입과 삭제가 토글된다.

1. Description disabled된 모든 Element들을 찾는다. ※ $(":disabled")처럼 사용하는 것보다는 다른 Selector과 같이 사용하는 것이 좋다고 합니다(해당 내용에 대해서는 여기를 참고하거나 「5. Reference」를 참고하세요). :disabled는 실제로 disabled된 Element소들을 찾는 반면 [disabled]는 disabled속성의 존재유무를 체크한다고 합니다. :disabled Selector는 disabled속성을 지원하는 다음의 HTMLElement들을 찾기 위해서 사용해야 한다고 합니다. , , , , , , , ※ 자세한 내용은 「4. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 disabled된 Element인 M..