제이쿼리 한방 정리 {유목민 알폰스}

제이쿼리 기초 사용법에 대한 가이드 입니다.

jQuery를 사용하여 HTML 폼 필드에 접근하는 방법은 여러 가지가 있습니다.

다음은 일부 예시입니다. 추후 계속해서 덧붙여서 내용을 추가할 예정 입니다.

​

ID를 통한 접근

jQuery에서는 CSS 선택자 문법을 사용하여 요소에 접근할 수 있습니다. HTML 요소의 ID를 사용하여 특정 폼 필드에 접근하는 것이 가장 직접적인 방법입니다.

var value = $('#myInput').val(); // myInput라는 ID를 가진 요소의 값을 가져옵니다.

 

클래스를 통한 접근

 

클래스 선택자를 사용하면 동일한 클래스 이름을 공유하는 모든 요소에 접근할 수 있습니다.

$('.myClass').val(); // myClass라는 클래스명을 가진 모든 요소의 값을 가져옵니다.

 

이름(name)을 통한 접근

이름 속성을 사용하면 폼 필드에 직접적으로 액세스할 수도 있습니다.

var value = $('#myInput').val(); // myInput라는 ID를 가진 요소의 값을 가져옵니다.

 

속성(attribute) 선택자로 접근

jQuery에서는 속성 선택자를 이용해 다양한 HTML 속성을 기반으로 요소들을 찾아낸다.

$('input[type="text"]').val(); // type이 "text"인 input 필드의 값을 가져옵니다.

 

포함된 내용으로 검색

contains선택자로 텍스트 내용으로 검색 가능합니다.

$("div:contains('John')") // 'John' 이 포함된 div 태그 선택

 

포지션(위치) 기반으로 검색

첫 번째, 마지막 아이템 또는 특정 위치의 아이템 찾기

$("div:contains('John')") // 'John' 이 포함된 div 태그 선택

 

포지션(위치) 기반으로 검색

첫 번째, 마지막 아이템 또는 특정 위치의 아이템 찾기

$("div:contains('John')") // 'John' 이 포함된 div 태그 선택

 

포지션(위치) 기반으로 검색

첫 번째, 마지막 아이템 또는 특정 위치의 아이템 찾기

$("div:contains('John')") // 'John' 이 포함된 div 태그 선택

 

참고로, .val() 메서드 외에도 .text(), .html(), .attr(), .prop() 등 다양한 메서드들로 해당 DOM 객체들과 상호작용 할 수 있습니다.

또한, jQuery를 사용하면서 특정 폼 필드에 이벤트 핸들러를 바인딩하는 것도 가능합니다. 예를 들어, 특정 input 필드의 값이 변경될 때마다 함수를 실행하도록 설정할 수 있습니다.

 

스타일 관련 변경

css에서 사용하는 모든 속성을 사용 가능 합니다.

$("#tdNode").css("속성");//스타일 값을 가져올때
$("#tdNode").css("속성", "값");//스타일을 적용할때
$("#tdNode").css("속성", "");//제거할때는 빈값을 넣어준다.

클래스 속성제어

Style class를 컨트롤할 수 있습니다.

$("#tdNode").attr("class");//값을 가져올때
$("#tdNode").addClass("클래스명");//값을 추가할때
$("#tdNode").removeClass("클래스명");//제거할때

 

다양한 방식으로 계층적 접근

$("#myDiv .subDiv tr td")는 jQuery에서 사용하는 CSS 선택자입니다. 이 선택자를 통해 HTML 문서 내의 특정 요소들을 선택할 수 있습니다. 각 부분에 대해 설명하겠습니다:

​

1. #myDiv: 이 부분은 ID가 "myDiv"인 요소를 선택합니다. ID는 HTML 문서 내에서 유일해야 합니다.

​

2. .subDiv: 이 부분은 클래스가 "subDiv"인 요소를 선택합니다. 하지만, 앞에 공백이 있기 때문에 #myDiv 아래에 있는 ".subDiv" 클래스를 가진 자식 요소들 중에서만 찾게 됩니다.

​

3. tr: 이 부분은 <tr> 태그(테이블 행)를 의미합니다. #myDiv .subDesc 아래의 모든 <tr> 태그를 찾습니다.

​

4. td: 마지막으로, <td> 태그(테이블 데이터 셀)을 의미합니다.

​

따라서, 전체적으로 보면, "ID가 'myDiv'인 요소 안에서 클래스가 'subDiv'인 자식 요소들 중 <tr>태그 안의 모든 <td>요소들을 찾아라"라는 뜻입니다.

​

이렇게 선택된 요소들은 jQuery 메서드로 처리할 수 있으며, 예시로는 .text(), .html(), .addClass(), .removeClass(), .css() 등이 있습니다.

​

숫자들을 선택하려면, 해당 숫자를 감싸고 있는 HTML 요소에 대한 접근 방법이 필요합니다. 숫자가 텍스트 노드로 직접 존재하거나, 특정 속성값으로 존재하는 경우 일반적인 CSS 선택자로는 직접 선택하는 것이 어렵습니다.

예를 들어, <td> 태그 안에 있는 숫자들을 선택하려면 다음과 같이 할 수 있습니다.

$('#myDiv .subDiv tr td').each(function() {
    var num = $(this).text();
    if (!isNaN(num)) { // num이 숫자인지 확인
        console.log(num); // 숫자 출력
    }
});

 

 

체크박스 접근

myDiv 아이디를 가진 노드안에 input type가 checkbox인 노드에 접근

$('#myDiv input[type="checkbox"]') //myDiv 아이디를 가진 노드안에 input type가 checkbox인 노드에 접근

$('#myDiv input[type="checkbox"]:checked') //체크박스 안에서 체크 된 것만 선택

$('#myDiv input[type="checkbox"]:checked').each(function() {
    // 여기서 $(this)는 체크된 체크박스를 가리킵니다.
    console.log('A checkbox was checked.');
});

 

 

체크박스 접근

myDiv 아이디를 가진 노드안에 input type가 checkbox인 노드에 접근

$('#myDiv input[type="checkbox"]') //myDiv 아이디를 가진 노드안에 input type가 checkbox인 노드에 접근

$('#myDiv input[type="checkbox"]:checked') //체크박스 안에서 체크 된 것만 선택

$('#myDiv input[type="checkbox"]:checked').each(function() {
    // 여기서 $(this)는 체크된 체크박스를 가리킵니다.
    console.log('A checkbox was checked.');
});

$('#myDiv input[type="checkbox"]').each(function() {
    if ($(this).is(':checked')) {
        console.log('Y');
    } else {
        console.log('N');
    }
});

 

Other

선택자 (Selectors): jQuery는 CSS 선택자를 사용하여 HTML 요소를 선택합니다. 

이를 통해 요소에 접근하고 조작할 수 있습니다. 

예: $('#id'), $('.class'), $('element')

 

이벤트 (Events): 클릭, 키보드 입력, 마우스 이동 등 사용자의 인터랙션에 반응합니다. 이벤트 핸들러를 등록하여 이벤트를 처리합니다. 

예: $(element).click(function() {...}), $(element).hover(function() {...})

 

효과 (Effects): 애니메이션 효과를 쉽게 추가할 수 있습니다. fadeIn, fadeOut, slideDown, slideUp 등의 메소드를 사용합니다. 

예: $(element).fadeIn(), $(element).slideUp()

 

AJAX (Asynchronous JavaScript and XML): 서버와 비동기적으로 데이터를 교환하고 웹 페이지를 업데이트합니다. 

jQuery의 $.ajax(), $.get(), $.post() 메소드를 사용합니다. 

예: $.ajax({url: "test.html", success: function(result){...}})

체이닝 (Chaining): 여러 jQuery 메소드를 한 줄에 연결하여 사용할 수 있습니다. 

코드를 간결하게 만들어 줍니다. 

예: $(element).css("color", "red").slideUp(2000).slideDown(2000);

 

 

By. 유목민 알폰스 - Alphonse Elric