📚 jQuery 기본 문법 $() 정리

...

jQuery 기본 문법

$(선택자).동작함수1().동작함수2()

$(선택자).동작함수1().동작함수2()

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.

- 선택자를 이용하여 원하는 HTML 요소를 선택하고,

- 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

jQuery $객체

jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 한다.

생성된 jQuery 객체는 다양한 메소드를 가지는데, jQuery를 학습한다고 하는 것은 대체로 이 메소드를 사용하는 방법을 익히는 것이다.

$() // jQuery() 함수의 축약형

jQuery() 함수는 전달되는 인수의 종류에 따라 다른 움직임을 하지만 결국 jQuery 객체를 반환한다.

인수의 종류에 따라 jQuery() 함수가 어떻게 동작하는지 살펴보도록 하자.

CSS 스타일의 selector를 인수로 전달받을 때

jquery 문법

$('#ssd')
$('.hdd')

javascript 문법

document.getElementById('ssd')
document.querySelectorAll('.hdd')

$() 함수의 인수로 CSS의 태그 선택자를 지정하였다.

이때 $() 함수는 선택자에 의해 선택된 요소들을 jQuery 객체로 반환한다. 또한 선택한 요소가 여러개일경우 자동으로 리스트를 만들어 저장해준다.

그래서 여러개 요소 리스트 형태일 경우, 이들을 하나하나 조작할 필요가 있을 경우, 순회하여 일일히 조작해야 하는 js와는 달리, jquery는 따로 조건 없이 바로 자동으로 지정해 조작 해줄 수 있다.

셀렉터 이벤트 등록

HTML

<button id="b1" class="btn">Button1</button>
<button id="b2" class="btn">Button2</button>
<button id="b3" class="btn">Button3</button>
<button id="b4" class="btn">Button4</button>

jquery 문법

//jquery는 여러개 요소 리스트일 경우 자동으로 다 순회해서 등록해준다.
$('.btn').on('click', function() { });

javascript 문법

// js는 하나의 요소마다 일일히 click이벤트를 등록해줘야 한다.
const btn = document.querySelectorAll('.btn');
for(let i; i<btn.length; i++){
   btn[i].addEventListener('click', function() { });
}

📌 셀렉터 이벤트 등록

$() 로 반환된 jqeury객체는 당연히 바닐라 자바스크립트의 함수들을 사용할수 없고, jquery전용 함수를 사용해야 한다.

jquery 문법

$("p").on("click", function() {
     $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함.
});

$('h1').text('Hello!');

javascript 문법

document.querySelector("p").addEventListener("click", function() {
	document.querySelector("#jq").style.border = "2px solid orange";
})

document.querySelector("h1").textContent = 'Hello!';

HTML을 인수로 전달받을 때

HTML 문자열을 인수로 받으면 새로운 HTML 요소를 생성한다.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

JavaScript 객체를 인수로 전달받을 때

var foo = { 
   foo: 'bar', 
   hello: 'world' 
};

var $foo = $(foo); // $()함수에 객체foo를 전달
console.log( $foo.prop('foo') ); // bar

$foo.prop('foo', 'foobar');
console.log( $foo.prop('foo') ); // foobar

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다.

주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다.

HTML의 속성은 .attr() 함수를 쓴다.

jQuery 체이닝

$()함수는 자기자신 노드객체를 반환하기떄문에 체이닝 기법 사용이 가능하다.

$("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");

$("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");

1. id가 list인 요소를 반환 (자식노드가 있다면 같이 딸려옴)
2. li 요소를 find함. 이 find는 자바스크립트의 고차함수 find와 같으며, 찾고자 하는 게 여러개일 경우 리스트로 반환함.
3. eq는 노드리스트에서 인덱스가 인수인걸 가져옴.
4. html()은 innerHTML이라 보면 됨. setter로서 사용됨.

jQuery 연습 예제

다음은 자식노드인 li 요소들을 가져와서 클릭하면 클래스이름을 selected로 바꾸는 코드를 제이쿼리와 자바스크립트로 구현한 예제이다.

HTML

<body>
    <ul id="navigation">
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
        <li class="selected">jQuery</li>
        <li>PHP</li>
        <li>mysql</li>
    </ul>
</body>

jquery 문법

//ul의 자식들 li들을 자동으로 하나씩 이벤트 등록해줌
$("#navigation li").on("click", function(){
   $("#navigation li").removeClass('selected'); // ul의 자식들 li 전체의 클래스이름을 지움
   $(this).addClass('selected'); // this는 클릭 이벤트에 등록된 li를 알아서 가리킴
})

javascript 문법

//버블링을 이용하기 위해 부모노드 ul에 이벤트 리스너 등록
document.querySelector("#navigation").addEventListener('click', function(event) {
   for(let b of this.children) { //this는 등록된 노드인 ul을 가리키고 그의 자식들 li들을 순회
      b.className = ''; //li들의 class이름을 빈칸으로

   event.target.className = 'selected'; //그리고 클릭된 타겟의 클래스이름을 변경
})

# 참고자료

http://www.tcpschool.com/jquery/jq_basic_syntax