💻 제이쿼리 기본 문법
🔥 기본문법
// $('선택자').동작함수(); $('.welcome').html('hello jQuery');
$ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 입니다. 이를 이용해 HTML의 태그나 선택자로 접근이 가능하며, 이후 동작함수에 여러가지 이벤트를 붙이거나 CSS를 추가해 줄 수 있습니다.
🔥 Document 객체의 ready()메소드
자바스크립트를 배울 때 window.onload = function(){}를 배웠습니다. onload()메소드는 돔과 이미지등이 모두 로드되었을 때 코드가 실행하도록 설정을 해주어, HTML과 자바스크립트의 위치 때문에 실행되지 않는 경우를 막아줍니다.
window.onload = function(){ // 자바스크립트 코드; }
제이쿼리에도 비슷한 메소드가 있습니다. ready()메소드인데, 레디 메소드는 모든 돔이 로드되면 실행되어, 자바스크립트의 onload메소드보다 조금 더 빠르게 실행되는 특징이 있습니다. 또 ready() 메소드는 더욱 짧게 줄여 사용할 수도 있습니다.
$('document').ready(function(){ // 제이쿼리코드; }); $(function(){ // 제이쿼리코드; });
💻 제이쿼리 선택자
제이쿼리를 사용하여 HTML요소를 손쉽게 선택할 수 있으며, 동작 또한 선택할 수 있습니다. 제이쿼리에서는 대부분의 CSS선택자와 몇몇 비표준 선택자를 제공합니다.
⭐️ CSS 선택자를 이용한 선택
<!--공통사항--> <style> .selected{ background-color: tomato !important; color: white; border: 2px solid red !important; } </style> <body> <ul> <li id="htmlID">HTML</li> <li class="selectClass">CSS</li> <li>javascript</li> <li>PHP</li> <li id="mysqlID">mySql</li> </ul> </body>
🔥 tag
제이쿼리에서는 태그 이름을 사용하여 같은 태그 이름을 가지는 요소를 모두 선택할 수 있습니다.
$('li').addClass('selected');
🔥 class
클래스는 앞에 .을 붙여 표현해줍니다.
$(.selectClass).addClass('selected');
🔥 id
아이디는 앞에 #을 붙여 표현해줍니다.
$(#htmlID).addClass('selected');
🔥 여러개의 선택자를 동시에 선택
, 를 이용하여 여러 개의 선택자를 나열해줄 수도 있습니다.
$('#htmlID,.selectClass').addClass('selected');
🔥 조합형 셀렉터
id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태로, 독립적으로 명시할 때 보다 우선적으로 적용된다. (tag.class / tag#id)
$('li.selectClass').addClass('selected');
🔥 자식선택자를 선택
$('부모클래스 자식클래스') 와 같이 띄어쓰기로 구분하여 자식클래스를 표현해 줍니다.
$('#list li').addClass('selected');
⭐️ 비표준 선택자를 이용한 선택
제이쿼리에서는 선택한 요소들을 더욱 세분화 시켜 선택하기 위해 필터링을 진행할 수 있습니다. 이에 해당하는 선택자는 여러가지가 있는데 대표적인 것 몇 가지만 소개하겠습니다.
<!--공통 사항--> <style> .selected{ background-color: tomato !important; color: white; border: 2px solid red !important; } </style> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>javascript</li> <li>PHP</li> <li>mySql</li> </ul> </body>
🔥 eq(n)
인자와 인덱스가 동일한 엘리먼트 찾는 선택자
$('#list li:eq(2)').addClass('selected'); // javascript에만 색칠됨
🔥 gt(n)
인자보다 인덱스가 큰 엘리먼트 찾는 선택자
$('#list li:gt(1)').addClass('selected'); // javascript아래로 전부 색칠됨
🔥 lt(n)
인자보다 인덱스가 작은 엘리먼트 찾는 선택자
$('#list li:lt(2)').addClass('selected'); // javascript위로 전부 색칠됨
🔥 even
짝수의 인덱스 값을 가진 엘리먼트 선택자
$('#list li:even').addClass('selected'); // HTML, javascript, mySql 색칠됨
🔥 odd
홀수의 인덱스 값을 가진 엘리먼트 선택자
$('#list li:odd').addClass('selected'); // CSS, PHP 색칠됨
🔥 first
첫 번째 인덱스 엘리먼트에 대한 선택자
$('#list li:first').addClass('selected'); // HTML에만 색칠됨
🔥 last
마지막 인덱스 엘리먼트에 대한 선택자
$('#list li:last').addClass('selected'); // mySql에만 색칠됨
💻 메소드 체이닝
여러 개의 메소드가 연속으로 호출되는것을 메소드 체이닝이라고 합니다. 이는 선택자의 중복작성을 막아주어 코드를 깔끔하게 유지할 수 있도록 해줍니다.
<a href="http://jquery.com" id="tuto" target="_self">jQuery</a>
$('tuto').attr('href', 'http://www.naver.com') .attr('target', '_blank') .attr('color', 'tomato');
이처럼 체인기법을 사용하면 대상을 여러 번 작성할 필요가 없습니다.
