jQuery 66

【jQuery/Traversing】.add(selector)

1. Description 1 + 1 + 1 + ... + 1과 같은 개념이다. 매칭되는 Element를 단지 선택만 해 주는 메소드이다. 선택된 Element들의 CSS를 변경하거나 하는 등의 조작을 하지 않는다면 아무 변화도 일어나지 않는다. .add(selector) 매칭된 Element들에 문자열로 표현된 selector를 추가적으로 선택한다. → #10, 11버튼 .add(elements) 매칭된 Element들에 하나 이상의 Element를 추가적으로 선택한다. → #20, 21버튼 .add(html) 매칭된 Element들에 html을 추가적으로 선택한다. → #30, 31버튼 .add(selection) 매칭된 Element들에 jQuery오브젝트를 추가적으로 선택한다. → #40, 41버..

JavaScript/jQuery 2023.03.21

【jQuery/Selector #62】:visible Selector

1. Description jQuery(":visible") visible한(보여지고 있는) Element들을 찾는다. document안에서 공간을 차지하고 있는 Element는 visible로 인식되기 때문에, visibility: hidden이나 opacity: 0도 visible Element로 인식된다. document 안에 존재하지 않는 Element들은 hidden Element로 인식된다. 해당 Element가 style이 적용되어서 visible하게 될 지 그렇지 않을지 jQuery로서는 알 수 있는 방법이 없기 때문이다. visible selector는 hidden selector의 정반대 selector이다. 은 selected여부와 관계없이 hidden Element로 간주된다. jQ..

JavaScript/jQuery 2023.03.15

【jQuery/Selector #61】:text Selector

1. Description jQuery(":text") type이 text인 Element들을 찾는다. $(":text")는 $("input[type='text']")와 같고, $(":text")로 사용하기보다는 $("input:text")처럼 사용하는 것이 좋다. ※ 자세한 내용은 「5. See also」 또는 「6. Reference」 를 참고하세요. 2. Example #1버튼을 클릭하면 type이 text인 Element를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 정해진 다른 배경색으로 변경된다.

JavaScript/jQuery 2023.03.15

【jQuery/Selector #60】:target Selector

1. Description jQuery(":target") URL에 들어있는 #(해시 마크)에 매칭되는 Element를 찾는다. 예를 들어 URL이 https://example.com/#foo 이라면 $( "p:target" )은 와 매칭된다. 2. Example ※ 코드를 작성해서 수차례 테스트를 진행하였으나, 제대로 된 결과가 출력되지 않아 이 부분은 생략합니다. 3. Reference https://api.jquery.com/target-selector/ https://www.w3.org/TR/selectors-3/#target-pseudo

JavaScript/jQuery 2023.03.15

【jQuery/Selector #59】:submit Selector

1. Description jQuery(":submit") type이 submit인 Element를 찾는다. 일부 웹 브라우저 에서는 태그를 암묵적으로 type="submit"으로 취급하는 경우가 있다. ※ 속도 향상을 위해서는 input[type="submit"]나 button[type="submit"]처럼 사용하는 것이 좋다고 합니다. 자세한 내용은 「5. See also」 또는 「6. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 type이 submit인 Element의 부모 Element 배경색을 변경한다. 버튼을 클릭할 때마다 스타일이 토글된다.

JavaScript/jQuery 2023.03.15

【jQuery/Selector #58】:selected Selector

1. Description jQuery(":selected") selected된 Element들을 찾는다. 이 selector는 선택된 Element를 찾는데 사용되며, checkbox나 radio버튼은 :checked를 사용해야 한다. ※ 속도 향상을 위해서는 선행하는 Selector다음에 .filter(":selected")처럼 사용하는 것이 좋다고 한다. 자세한 내용은 「5. See also」 또는 「6. Reference」를 참고하세요. 2. Example #1버튼을 클릭하면 선택되어진 Element의 배경색을 변경한다. 을 재선택하고 다시 버튼을 클릭하면 배경색이 재설정된다. ※ 「CTRL + 마우스 왼쪽클릭」 또는 「SHIFT + 마우스 왼쪽클릭」을 하면 어러 을 선택할 수 있다.

JavaScript/jQuery 2023.03.15

【jQuery/Selector #56】:reset Selector

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

JavaScript/jQuery 2023.03.15

【jQuery/Selector #55】:radio Selector

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

JavaScript/jQuery 2023.03.15