GITBOOK-190: 자바스크립트 모르는 지식 추가

developLog/programming-lanuage/javascript/undefined.md

@@ -123,3 +123,27 @@ jfunction handleClick(event) {
 
 * **`event` 객체가 전달되지 않으면**: `onclick` 속성에서 직접 전달하는지 확인하거나, 이벤트 리스너 방식으로 구현합니다.
 * **`event.preventDefault()`가 작동하지 않으면**: 이벤트가 제대로 바인딩되었는지 확인하고, 리스너를 사용해 이벤트를 처리하는 방법을 사용해보세요.
+
+## 5. 클래스명이 앞에만 같은 애들 이벤트 적용
+
+> div 영역에 있는 class명이 pic\_box\_po\_01, pic\_box\_po\_02, pic\_box\_po\_03 ...이런식으로 10까지 있다 $(".pic)\_boc\_po").on("click:) 이런식으로 하면 모든 애들이 적용되나
+
+$(".pic\_box\_po")로는 해당 요소들을 선택할 수 없습니다. jQuery의 클래스 선택자는 클래스 이름이 완전히 일치해야 하므로, pic\_box\_po\_01, pic\_box\_po\_02처럼 번호가 붙은 클래스들을 선택할 수 없습니다. 이를 해결하기 위해 접두사로 일치하는 클래스 **이름을 선택할 수 있는 jQuery의 속성 선택자를 사용해야 합니다.**
+
+올바른 방법 접두사가 동일한 클래스 이름을 선택하려면, 아래와 같이 **^= (시작 문자 일치) 선택자를 사용할 수 있습니다.**
+
+접두사가 동일한 클래스 이름을 선택하려면, 아래와 같이 `^=` (시작 문자 일치) 선택자를 사용할 수 있습니다.
+
+```javascript
+$("[class^='pic_box_po']").on("click", function() {
+    // 클릭 시 실행할 코드
+});
+```
+
+#### 설명
+
+* `^=`는 "접두사로 시작"을 의미하는 선택자입니다.
+* `"[class^='pic_box_po']"`는 클래스 이름이 `pic_box_po`로 시작하는 모든 요소를 선택합니다.
+
+이렇게 하면 `pic_box_po_01`, `pic_box_po_02` 등 `pic_box_po_`로 시작하는 모든 요소에 클릭 이벤트가 적용됩니다.
+