목록2024/04/11 (20)
SeouliteLab
jQuery의 :contains() 선택자는 지정한 텍스트를 포함하는 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 특정한 텍스트를 가진 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 특정 텍스트를 포함하는 요소 선택하기 안녕하세요, jQuery를 배우는 중입니다. jQuery를 사용하여 다양한 작업을 할 수 있습니다. $("p:contains('jQuery')").addClass("highlight"); 이 예제는 "jQuery"라는 텍스트를 포함하는 p 요소를 선택하여 "highlight" 클래스를 추가합니다. 예제 2: 특정 텍스트를 가진 버튼 요소 선택하기 로그인 회원가입 로그아웃 $("button..
jQuery의 클래스 선택자인 (“.클래스명”)는 특정한 클래스를 가진 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 요소 중에서 특정한 클래스를 가진 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 특정 클래스를 가진 요소에 스타일 적용하기 빨간 상자 파란 상자 초록 상자 $(".red").css("color", "red"); 이 예제는 클래스가 "red"인 요소에 텍스트 색상을 빨간색으로 변경합니다. 예제 2: 클래스를 조합하여 요소 선택하기 활성 항목 비활성 항목 $(".item.active").addClass("highlight"); 이 예제는 클래스가 "item"과 "active" 두 가지를 동시에 가진 요소를 선택하..
jQuery의 자식 선택자인 (“부모 > 자식”)는 특정 부모 요소의 직계 자식 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 구조에서 특정한 깊이에 있는 요소를 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 직계 자식 요소 선택하기 자식 요소 1 자식 요소 2 $(".parent > .child").addClass("highlight"); 이 예제는 클래스가 "parent"인 요소의 직계 자식 요소 중에서 클래스가 "child"인 요소를 선택하여 "highlight" 클래스를 추가합니다. 예제 2: 특정 폼 안의 직계 자식 요소 선택하기 사용자 이름: 비밀번호: $("#myForm > label").addClass("form-label..
jQuery의 :checked 선택자는 현재 선택된 체크박스 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 사용자가 체크한 항목을 쉽게 선택하여 처리할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 선택된 체크박스에 스타일 적용하기 $(":checked").addClass("highlighted"); 이 예제는 선택된 체크박스 요소에 "highlighted" 클래스를 추가하여 스타일을 적용합니다. 예제 2: 선택된 체크박스의 라벨 변경하기 Option 1 Option 2 Option 3 $(":checked + label").text("Selected"); 이 예제는 선택된 체크박스의 라벨을 "Selected"로 변경합니다. 예제 3: 선택된 ..
jQuery의 :checkbox 선택자는 체크박스 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 체크박스를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 모든 체크박스 요소 선택 $(":checkbox").addClass("styled-checkbox"); 이 예제는 모든 체크박스 요소를 선택하여 "styled-checkbox" 클래스를 추가합니다. 예제 2: 특정 부모 요소 안에 있는 체크박스 요소 선택 $("#checkbox-container :checkbox").addClass("container-checkbox"); 이 예제는 ID가 "checkbox-container"인 부모 요소 안에 있는 체크..
jQuery의 :button 선택자는 버튼 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 버튼 요소를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 모든 버튼 요소 선택 Click Me Anchor Button $(":button").addClass("styled-button"); 이 예제는 모든 버튼 요소를 선택하여 "styled-button" 클래스를 추가합니다. 예제 2: 특정 클래스를 가진 버튼 요소 선택 Primary Button $(".primary-button:button").addClass("highlight"); 이 예제는 클래스가 "primary-button"인 버튼 요소 중에 :butt..
jQuery의 속성 값이 특정 값으로 시작하는 요소를 선택하는 선택자([name^="value"])는 웹 페이지에서 특정한 패턴으로 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 속성 값이 특정 값으로 시작하는 요소를 쉽게 선택할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 클래스가 "button-"으로 시작하는 요소 선택 Primary Button Secondary Button Danger Button $("button[class^='button-']").addClass("styled-button"); 이 예제는 클래스가 "button-"으로 시작하는 요소들을 선택하여 "styled-button" 클래스를 추가합니다. 예제 2: ..
jQuery의 속성 값이 특정 값과 다른 경우를 선택하는 선택자([name!="value"])는 웹 페이지에서 특정한 값을 가지지 않는 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 특정 값을 제외한 요소를 선택할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 클래스가 "inactive"가 아닌 요소 선택 Item 1 Item 2 Item 3 $("div[class!='inactive']").addClass("active-item"); 이 예제는 클래스가 "inactive"가 아닌 요소들을 선택하여 "active-item" 클래스를 추가합니다. 예제 2: ID가 "username"이 아닌 입력 필드 선택 $("input[id!='usernam..
jQuery의 속성 값이 정확히 일치하는 선택자([name="value"])는 지정한 값과 정확히 일치하는 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 특정한 값을 가진 요소를 정확하게 선택할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 클래스가 "active"인 요소 선택 Item 1 Item 2 Item 3 $("div[class='active']").addClass("highlight"); 이 예제는 클래스가 "active"인 요소들을 선택하여 "highlight" 클래스를 추가합니다. 예제 2: ID가 "username"인 입력 필드 선택 $("input[id='username']").addClass("input..
jQuery의 속성 끝 부분 선택자([name$="value"])는 지정한 값으로 끝나는 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자는 HTML 요소 중 특정한 속성 값을 가진 요소를 쉽게 선택할 수 있도록 도와줍니다. 여러 가지 예제를 통해 이 선택자의 활용을 살펴보겠습니다. 예제 1: 파일 확장자가 ".jpg"로 끝나는 이미지 선택 $("img[src$='.jpg']").addClass("jpg-image"); 이 예제는 파일 경로의 끝이 ".jpg"로 끝나는 이미지 요소들을 선택하여 "jpg-image" 클래스를 추가합니다. 예제 2: 외부 링크가 ".com"으로 끝나는 링크 선택 Example 1 Example 2 Example 3 $("a[href$='.com..