[jQuery] 기본 문법

1. 선택자

1. ID 선택자: 특정 ID를 가진 요소를 선택합니다.
HTML: <div id="myDiv"></div>
jQuery: $('#myDiv')

2. 클래스 선택자: 특정 클래스를 가진 모든 요소를 선택합니다.
HTML: <div class="myClass"></div>
jQuery: $('.myClass')

3. 태그 선택자: 특정 태그를 가진 모든 요소를 선택합니다.
HTML: <div></div>
jQuery: $('div')

4. 속성 선택자: 특정 속성을 가진 요소를 선택합니다.
HTML: <input type="text" name="myInput">
jQuery: $('input[name="myInput"]')

5. 자식/후손 선택자: 특정 요소의 자식 또는 후손 요소를 선택합니다.
HTML:
<div id="parent">
  <p>자식 요소</p>
  <div>
    <p>후손 요소</p>
  </div>
</div>

jQuery:
$('#parent > p'): #parent의 바로 아래 자식인 <p> 요소 선택 (자식)
$('#parent p'): #parent의 모든 후손인 <p> 요소 선택 (후손)

 

2. 이벤트

1. 클릭 이벤트: 요소가 클릭되었을 때 실행되는 함수를 지정합니다.
HTML: <button id="myButton">클릭하세요</button>
jQuery:
$('#myButton').on('click', function() {
  alert('버튼이 클릭되었습니다!');
});

2. 키보드 이벤트 (keypress, keydown, keyup): 키보드 입력에 반응하는 이벤트
HTML: <input type="text" id="myInput">
jQuery:
$('#myInput').on('keypress', function(event) {
  console.log('눌린 키:', event.key);
});

3. 폼 이벤트 (submit, change): 폼 제출이나 요소 값 변경에 반응하는 이벤트
HTML:
<form id="myForm">
  <input type="text" name="username">
  <button type="submit">제출</button>
</form>
jQuery:
$('#myForm').on('submit', function(event) {
  event.preventDefault(); // 기본 제출 동작 막기
  console.log('폼이 제출되었습니다.');
});

 

3. 속성 조작

1. attr(): 요소의 속성 값을 가져오거나 설정합니다.
HTML: <a href="https://www.example.com" id="myLink">링크</a>
jQuery:
$('#myLink').attr('href'); // 속성 값 가져오기 (예: "https://www.example.com")
$('#myLink').attr('href', 'https://www.newexample.com'); // 속성 값 설정하기

2. addClass(), removeClass(), toggleClass(): 요소에 클래스를 추가, 제거, 또는 토글합니다.
HTML: <div id="myDiv"></div>
jQuery:
$('#myDiv').addClass('highlight'); // 클래스 추가
$('#myDiv').removeClass('highlight'); // 클래스 제거
$('#myDiv').toggleClass('highlight'); // 클래스 토글 (있으면 제거, 없으면 추가)

 

4. DOM 조작

1. append(), prepend(): 요소를 특정 요소의 내부 뒤 또는 앞에 추가합니다.
HTML: <div id="myDiv"></div>
jQuery:
$('#myDiv').append('<p>새로운 내용 (뒤에 추가)</p>');
$('#myDiv').prepend('<p>새로운 내용 (앞에 추가)</p>');

2. html(), text(): 요소의 HTML 내용 또는 텍스트 내용을 가져오거나 설정합니다.
HTML: <div id="myDiv"><p>기존 내용</p></div>
jQuery:
$('#myDiv').html(); // HTML 내용 가져오기 (예: "<p>기존 내용</p>")
$('#myDiv').text(); // 텍스트 내용 가져오기 (예: "기존 내용")
$('#myDiv').html('<p>새로운 HTML 내용</p>'); // HTML 내용 설정
$('#myDiv').text('새로운 텍스트 내용'); // 텍스트 내용 설정

3. remove(), empty(): 요소를 삭제하거나 요소의 내용을 비웁니다.
HTML: <div id="myDiv"><p>내용</p></div>
jQuery:
$('#myDiv').remove(); // 요소 자체를 삭제
$('#myDiv').empty(); // 요소 내부의 모든 내용을 삭제

 

5. 탐색

1. closest():  선택한 요소에서 시작하여 DOM 트리를 따라 올라가면서, 
지정된 선택자에 의해 선택되는 가장 가까운 조상 요소를 찾습니다.
HTML:
<div id="container">
  <article>
    <section>
      <p id="myElement">This is a paragraph.</p>
    </section>
  </article>
</div>
jQuery:
$('#myElement').closest('article'); // <article> 요소를 선택합니다.

2. find(): 선택된 요소의 하위 요소 (자손 요소) 중에서 특정 선택자에 해당하는 요소를 찾습니다.
html:
<div id="container">
  <ul>
    <li>Item 1</li>
    <li class="highlight">Item 2</li>
  </ul>
</div>
javascript
$('#container').find('.highlight'); // <li class="highlight">Item 2</li> 를 포함하는 jQuery 객체 반환
$('#container').find('span'); // <span> 태그가 없으므로 빈 jQuery 객체 반환

 

6. 필터링

1. first(), last(): 선택된 요소 집합에서 첫 번째 또는 마지막 요소를 선택합니다.
HTML:
<p class="myParagraph">Paragraph 1</p>
<p class="myParagraph">Paragraph 2</p>
jQuery:
$('.myParagraph').first(); // 첫 번째 <p> 요소 선택
$('.myParagraph').last();  // 마지막 <p> 요소 선택

2. eq(index): 선택된 요소 집합에서 특정 인덱스에 해당하는 요소를 선택합니다 (인덱스는 0부터 시작).
HTML:(위와 동일)
jQuery:
$('.myParagraph').eq(0); // 첫 번째 <p> 요소 선택
$('.myParagraph').eq(1); // 두 번째 <p> 요소 선택

3. filter(selector): 선택된 요소 집합에서 특정 선택자에 해당하는 요소만 필터링합니다.
$('.paragraph').filter('.active'); // <p class="paragraph active">Paragraph 1</p> 를 포함하는 객체 반환
$('.paragraph').filter(function() {
  return $(this).text().indexOf('1') > -1; // 텍스트 내용에 '1'이 포함된 요소만 선택
}); // <p class="paragraph active">Paragraph 1</p> 를 포함하는 jQuery 객체 반환

4. not(selector): 선택된 요소 집합에서 특정 선택자에 해당하지 않는 요소만 필터링합니다.
HTML: (위와 동일)
jQuery:
$('.paragraph').not('.active'); // 클래스가 'active'가 아닌 <p> 요소 선택

5. is(selector): 선택한 요소가 특정 선택자와 일치하는지 확인합니다.  true 또는 false를 반환합니다.
HTML: <div id="myDiv"></div>
jQuery:
$('#myDiv').is('div'); // true 반환
$('#myDiv').is('.highlight'); // false 반환 (클래스가 없는 경우)

 

7. 유틸리티

1. $.each(array, function(index, value)): 배열 또는 객체의 각 요소에 대해 반복 작업을 수행합니다.
javascript
var myArray = ['사과', '바나나', '딸기'];
$.each(myArray, function(index, value) {
  console.log(index + ': ' + value);
});

2. $.trim(string): 문자열의 앞뒤 공백을 제거합니다 (이미 설명했지만 중요하므로 다시 언급).
javascript
var myString = "   Hello World   ";
var trimmedString = $.trim(myString); // "Hello World"

3. $.parseJSON(jsonString): JSON 문자열을 JavaScript 객체로 변환합니다.
javascript
var jsonString = '{"name": "John", "age": 30}';
var myObject = $.parseJSON(jsonString);
console.log(myObject.name); // "John"

4. data() 메서드: 요소에 임의의 데이터 저장 및 접근
HTML: <div id="myDiv"></div>
jQuery:
$('#myDiv').data('myKey', 'myValue'); // 데이터 저장
var myValue = $('#myDiv').data('myKey'); // 데이터 접근 (myValue는 "myValue"가 됨)

 

8. data 속성 사용

<button id="myButton" data-product-id="123" data-price="25.99" data-is-available="true">

$('#myButton').on('click', function() {
    var productId = $(this).data('product-id');
    var price = $(this).data('price');
    var isAvailable = $(this).data('is-available');
    
<input type="text" id="categoryName" name="categoryName" class="categoryName" value="${languageList.categoryName}" data-lang = "${languageList.langCode}">
$('input[data-lang]').val("");

if(data) {
    data.result.forEach (function (data, index) {
        $("#modal_category #selectCategoryInsert").val(data.siteId);
        $('input[data-lang=' + data.langCode + ']').val(data.categoryName);
    })
}
item.langCode가 "ko"이면, $('input[data-lang=ko]')
.val(item.categoryName): 선택한 input값을 item.categoryName으로 설정합니다. 
해당 언어에 맞는 카테고리 이름을 입력 필드에 채워 넣습니다.

{
  "result": [
    { "siteId": "1", "langCode": "ko", "categoryName": "한국어 카테고리" },
    { "siteId": "1", "langCode": "en", "categoryName": "English Category" },
    { "siteId": "1", "langCode": "ja", "categoryName": "日本語カテゴリー" }
  ]
}

 

9. 특수문자 입력방지

// 특수문자 입력방지
$("#modal_category .categoryName").on("input", function() {
  var regex = /[~!@#$%^&*()\-=+_']/gi;
  var temp = $(this).val();

  if (regex.test(temp)) {
    $(this).val(temp.replace(regex, ""));
  }
});