jQuery 객체

jQuery 함수의 리턴값으로 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체

jQuery 객체 특

DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리됨 (암시적 반복)
대부분의 메소드들이 인자를 2개 사용하면 값을 변경하고, 인자를 1개만 사용하면 값을 가져오는 메소드가 됨
값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환(메소드의 인자를 1개만 전달시)
선택된 엘리먼트에 대해서 연속저으로 작업을 처리할 수 있는 체이닝 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <input type="button" value="변경하기" onclick="fn_setUnderline()">
  <input type="button" value="가져오기" onclick="fn_getColor()">
  <ul>
    <li style="color: red">banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function fn_setUnderline() {
     // 제이쿼리 객체의 메소드에 인자를 2개 입력하면 속성 변경
      $('li').css('textDecoration', 'underline');
    }
    
    function fn_getColor() {
     // 제이쿼리 객체의 메소드에 인자를 1개 입력하면 속성값 가져오기    
      $('ul').append($('li').css('color'));
    }
  </script>
</body>
</html>

jQuery 조회한 결과 가져오기

jQuery 객체는 유사배열로 배열과 같은 방법(인덱스 접근)으로 값에 접근이 가능함(가져온 값은 jQuery객체가 아닌 일반 DOM 객체임)
lenght 프로퍼티로 길이를 얻을 수 있음
jQuery 함수는 CSS선택자를 인자로 jQuery객체를 반환 받거나, HTMLElement를 인자로 넣어 jQuery객체를 반환 받을 수 있음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    var lis = $('li');
    
    for(var i=0; i<lis.length; i++) {
      // 각각의 HTMLElement 반환(순회)
      console.log(lis[i]);
      
      // console.log(lis[i].css('color')) 는 불가능
    }
    
  </script>
</body>
</html>

jQuery 객체 map 메소드

인덱스(첫번째 인자)와 dom객체(두번째 인자)를 인자로받는 함수를 인자로 받아서 사용함
jQuery 객체의 길이만큼 반복함 각각의 인덱스 번호와 dom객체를 반환하며 반복함

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    var lis = $('li');
    
    // lis 객체를 순회하면서 index와 dom객체를 활용할 수 있음
    lis.map(function(index, elem) {
      console.log(index, elem);
      // 각각의 스타일값 변경
      $(elem).css('color', 'red');
    })
  </script>
</body>
</html>

jQuery API

PreviousHTMLCollection NextElement 객체

Last updated 3 years ago

Was this helpful?

jQuery 객체

jQuery 함수의 리턴값으로 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체

jQuery 객체 특

DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리됨 (암시적 반복)
대부분의 메소드들이 인자를 2개 사용하면 값을 변경하고, 인자를 1개만 사용하면 값을 가져오는 메소드가 됨
값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환(메소드의 인자를 1개만 전달시)
선택된 엘리먼트에 대해서 연속저으로 작업을 처리할 수 있는 체이닝 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <input type="button" value="변경하기" onclick="fn_setUnderline()">
  <input type="button" value="가져오기" onclick="fn_getColor()">
  <ul>
    <li style="color: red">banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function fn_setUnderline() {
     // 제이쿼리 객체의 메소드에 인자를 2개 입력하면 속성 변경
      $('li').css('textDecoration', 'underline');
    }
    
    function fn_getColor() {
     // 제이쿼리 객체의 메소드에 인자를 1개 입력하면 속성값 가져오기    
      $('ul').append($('li').css('color'));
    }
  </script>
</body>
</html>

jQuery 조회한 결과 가져오기

jQuery 객체는 유사배열로 배열과 같은 방법(인덱스 접근)으로 값에 접근이 가능함(가져온 값은 jQuery객체가 아닌 일반 DOM 객체임)
lenght 프로퍼티로 길이를 얻을 수 있음
jQuery 함수는 CSS선택자를 인자로 jQuery객체를 반환 받거나, HTMLElement를 인자로 넣어 jQuery객체를 반환 받을 수 있음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    var lis = $('li');
    
    for(var i=0; i<lis.length; i++) {
      // 각각의 HTMLElement 반환(순회)
      console.log(lis[i]);
      
      // console.log(lis[i].css('color')) 는 불가능
    }
    
  </script>
</body>
</html>

jQuery 객체 map 메소드

인덱스(첫번째 인자)와 dom객체(두번째 인자)를 인자로받는 함수를 인자로 받아서 사용함
jQuery 객체의 길이만큼 반복함 각각의 인덱스 번호와 dom객체를 반환하며 반복함

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>banana</li>
    <li>apple</li>
    <li>mango</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    var lis = $('li');
    
    // lis 객체를 순회하면서 index와 dom객체를 활용할 수 있음
    lis.map(function(index, elem) {
      console.log(index, elem);
      // 각각의 스타일값 변경
      $(elem).css('color', 'red');
    })
  </script>
</body>
</html>

jQuery API

jQuery API Documentation

PreviousHTMLCollection NextElement 객체

Last updated 3 years ago

Was this helpful?