jQuery 66

【jQuery/Selector #14】Class Selector (“.class”)

1. Description 해당하는 CSS 클래스를 가지고 있는 Element들을 찾는다. $(".class1, .class2, .class3, ...)과 같이 여러 클래스로 찾을 수 있지만, 그 중 하나는 반드시 매칭되어야 한다. 2. Example #1버튼을 클릭하면 .tesla, .google, .apple 클래스를 가지고 있는 Element를 찾아서 border색생과 같은 색상으로 배경색을 채운다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.

JavaScript/jQuery 2023.02.22

【jQuery/Selector #11】:checkbox

1. Description type이 checkbox인 것을 찾는다. $(":checkbox") Selector는 $("[type='checkbox']")와 같다. ':'로 시작하는 Selector들은 기본적으로 "*"(All Selector)를 내포하고 있기 때문에, tag이름이나 다른 Selector와 같이 쓰는 것이 좋다고 한다. 즉, $(":checkbox")는 $("*:checkbox")와 같기 때문에 $("input:checkbox")처럼 쓰는 것이 좋다고 한다. 현대의 브라우저들 상에서 가장 좋은 퍼포먼스를 내기 위해서는 $("[type='checkbox']")를 사용하는 것이 좋다고 한다. ※ 자세한 내용은 「4. Reference」를 참고하세요. 2. Example #1버튼을 누른면 ty..

JavaScript/jQuery 2023.02.21

【jQuery/Selector #10】:button

1. Description 모든 button Element들을 찾는다. $(":button")은 CSS의 $( "button, input[type='button']" )과 같다고 한다. 속도 향상을 위해서는 직접 $(":button") Selector를 사용하기 보다는, pure CSS Selector를 사용한 후에 .filter(":button")을 사용하는 것이 좋다고 한다. ※ 자세한 내용은 「5. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 button Element를 찾아 border-color, border-size를 변경한다. 버튼을 클릭할 때마다 해당 CSS가 토글된다.

JavaScript/jQuery 2023.02.21