jQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있는데 브라우저의 버전에 따라 작동하지 않는 코드를 jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있다.
제이쿼리란?
jQuery로 작성한 코드는 자바스크립트보다 간단하면서 동일한 기능을 구현할 수 있는데요.
제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어이다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합체를 말한다.
자바스크립트에서 함수는 일련의 코드를 함수내에 정의했다가 필요할때마다 호출해서 사용하는 것이라고 배웠다. 제이쿼리는 이런 다양한 함수들을 제공하고 있고, 자바스크립트에서
불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선한 언어이다.
1.호환성 문제 해결
:자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체는 호환성(크로스브라우징)이 떨어진다는 단점이 있다.
제이쿼리에서는 문서 객체 선택자의 호환성 문제가 모두 해결되었다.
🎈크로스 브라우징이란 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 하는 기능으로 코드가 브라우저에 따라 제대로 작동하지 않는 문제를 해결할 수 있다
2.쉽고 편한 애니메이션 효과 기능 구현
:자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야하기때문에 개발에 많은 시간이 소요되었다. 하지만 제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메서드들을 제공하고 있기 때문에 개발 시간을 많이 단축할 수 있다.
제이쿼리 사용방법
제이쿼리는 script태그 안에 직접 작성하거나 .js파일을 만들어서 작성하면 된다.
하지만 그 전에 제이쿼리가 반드시 먼저 연결되어 있어야만 사용할 수 있다.
이때 옛날 버전 파일을 사용해야 모든 기능을 사용할 수있다.
만약 최신버전을 쓴다면 미그레이트 파일을 함께 사용해주면 옛날 라이브러리 기능도 호환할 수 있다.
1.https://cdnjs.com/libraries/jquery/1.12.4
위 사이트에서 jquery.min.js파일을 </>아이콘을 눌러 태그 안에 붙여넣는다.
그 다음 내가 작성할 자바스크립트 파일을 아랫줄에 연결한다.
이 순서가 바뀌면 오류가 발생하므로 주의해야 한다.
2.import문법을 이용해 .js파일 안에서 불러 올 수 있다.
자바스크립트 파일 첫 줄에 import라는 문법을 이용해 제이쿼리를 연동할 수 있다.
예시) import ''./js/jquery.min.js';
제이쿼리 기본형
제이쿼리를 사용하려면 먼저 제이쿼리를 연결한 후에 기본구조를 먼저 작성해줘야 한다.
제이쿼리에서 기호는 '제이쿼리'를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 역할을 한다. $()는 '제이쿼리 함수'를 뜻하며 기본형의 가장 바깥에 쓰인다. 또한 $()는 css선택자를 전달하여 특정 html요소를 선택할 수 있도록 해준다. $()함수를 통해 생성된 요소를 '제이쿼리 객체'라고 부른다.()함수에 전달되는 인수는 반드시 ""를 사용한 문자열 형태로 전달되어야 한다.
[기본형]
1.$(document).ready(function(){ 자바스크립트 코드~~~~~~~~~~~~~~~~; })
$(function(){ 자바스크립트 코드~~~~~~~; });
태그요소 불러오기
제이쿼리로 태그에 특정 css를 적용하고싶다면 아래 문법을 사용한다.
[기본형]
1. 선택한 요소에 지정한 css스타일을 적용한다.$("css선택자").css("스타일 속성명","값");2.선택한 요소에 지정한 속성을 적용한다.
$("css선택자").attr("속성","값");
$(function () {
//a태그에 css속성 적용하기
$("a").css("color", "red");
//a태그에 target속성 넣기
$("a").attr("target", "_blank");
});
let aTag = $("a");
아래와 같이 css스타일이나 속성을 연속해서 입력하여 사용할 수있다.
a태그에 속성 추가하기
위의 이미지와 같이 개발자도구를 확인하면 a태그에 href속성과 target 속성이 추가된 모습을 볼 수있다.
