JavaScript/jQuery 66

【jQuery/Selector #54】:password Selector

1. Description jQuery(":password') type이 password인 Element를 찾는다. 이것은 $("[type='password']")와 같다. $(":password")로 사용하는 것보다 $("input:password")처럼 사용하는 것이 좋다. ※ 자세한 내용은 「5. See also」 또는 「6. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 type이 password인 Element의 부모를 찾아 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

JavaScript/jQuery 2023.03.15

【jQuery/Selector #50】:odd Selector

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

JavaScript/jQuery 2023.03.15

【jQuery/Selector #49】:nth-of-type() Selector

1. Description jQuery(":nth-of-type(index/even/odd/equation)") : 각 부모의 태그명이 같은 자식 Element들 중에서 n번째 Element들을 모두 찾는다. 첫 번째 인덱스부터 1이 된다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 태그들 중 첫 번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 태그들 중 두 번째 Element를 찾아서 배경색을 변경한다. #3버튼을 클릭하면 태그들 중 세 번째 Element를 찾아서 배경색을 변경한다. ..

JavaScript/jQuery 2023.03.14

【jQuery/Selector #48】:nth-last-of-type() Selector

1. Description jQuery(":nth-last-of-type(index/even/odd/equation)") : 부모의 자식 Element들 중에서 태그명이 같은 n번째 자식 Element들을 뒤에서부터 찾는다. 마지막 인덱스부터 1이 된다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 태그들 중 뒤에서부터 두 번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 태그들 중 뒤에서부터 두 번째, 네 번째 Element를 찾아서 배경색을 변경한다. #3버튼을 클릭하면 태그들 중 뒤에서..

JavaScript/jQuery 2023.03.14

【jQuery/Selector #47】:nth-last-child() Selector

1. Description jQuery(":nth-last-child(index/even/odd/equation) : 부모의 자식 Element들 중에서 n번째 자식 Element들을 뒤에서부터 찾는다. :nth-child와 동일하나, 마지막 인덱스부터 1이 된다는 점만 다르다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식을 나타낸다. 2. Example #1버튼을 클릭하면 의 뒤에서부터 2번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 의 뒤에서부터 두 번째(2번 인덱스), 네 번째(4번 인덱스)의 배경색을 변경한다. #3버튼을 클릭하면 ..

JavaScript/jQuery 2023.03.14

【jQuery/Selector #46】:nth-child() Selector

1. Description jQuery(":nth-child(index/even/odd/equation) : 부모의 자식 Element들 중에서 n번째 자식 Element들을 찾는다. 첫 번째 인덱스는 1번부터 시작한다. index : 1번부터 시작하는 index를 나타낸다. even : 짝수 인덱스를 나타낸다. odd : 홀수 인덱스를 나타낸다. equation : even, odd, 3n+1과 같은 표현식 나타낸다. 2. Example #1버튼을 클릭하면 의 2번째 Element를 찾아서 배경색을 변경한다. #2버튼을 클릭하면 의 두 번째(2번 인덱스), 네 번째(4번 인덱스)의 배경색을 변경한다. #3버튼을 클릭하면 의 첫 번째(1번 인덱스), 세 번째(3번 인덱스)의 배경색을 변경한다. #4버튼을..

JavaScript/jQuery 2023.03.14

【jQuery/Selector #45】:not() Selector

1. Description jQuery(":not(selector)") : selector와 매치되지 않는 Element를 찾는다. .not()메소드를 사용하는 것이 :not()필터에 selector를 나열하는 것보다 읽기 쉽고, 대부분의 경우 좋은 선택이 된다고 합니다. 2. Example #1버튼을 클릭하면 태그의 1번 인덱스와 매칭되지 않는 태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

JavaScript/jQuery 2023.03.14