오늘은 일요일이다. 금요일 일이 있어서 휴가를 써서 수업을 듣지못하였다. ㅜㅜ 그래도 선생님께서 녹화를 하셔서 올려주셨기에 따로 공부를 할수 있다. 선생님은 진짜 천사이신거 같다...
jquery
이제 바닐라가 끝나고 제이쿼리에 대해서 배운다고 한다. 이건 js의 라이브러리인데 함수를 모아놓아 기능을 구현할 때 더쉽게 할 수 있게 해주는 것이다.
예를들어 최댓값 최솟값을 구하는 함수같은 것이 미리 만들어져서 이런 기능이 필요한것들을 필요할때 사용하면 코딩길이도 줄어들고 시간도 줄어들고 노력도 줄어든다. 이런 기능들을 해준다.
예전에는 바닐라 안배우고 이거만 배우고 실무 시작하는 시절이 있었다. 하지만 바닐라가 성능이 더 좋아서 요즘은 바닐라로 회귀하는 현상이 생기고 있다.
아직은 jquery 가 파워가 세니 기초적인 것을 배우는 것이 중요하다.
또한 예전에는 웹브라우저들이 자바스크립트들이 웹브라우저들이 실행유무가 달랐다. 그래서 각부라우저용 소스들을 하나하나 만들었다. 근데 이걸 사용하면 하나만 코딩하면 다 돌아가니 jquery가 인기가 많아졌다.(속도가 느릴뿐 ...) 그런데 이제는 바닐라도 다 돌아가게 되고 바닐라의 단점이 없어져 회귀현상이 생기고 있다.
jquery 연결방법
jquery 연결(링크) : 이걸 걸어야 jq를 사용할 수 있다.
두가지 방법이 있는데 인터넷 주소를 연결 하거나 jq를 다운 받을 수 있다.
다운로드는 jquery 홈페이지에서 다운로드를 받으면 된다.
일종의 프로그램이라 버전을 가진다. 숫자가 클수록 최신 버전이다.
다운로드 받지않고 CDN을 사용하여 링크를 연결해주면된다. 링크도 홈페이지에서 복사를 해오면 도니다.
<body>
<h1 id="title">제목</h1>
<!-- CDN: 인터넷 주소로 다른 라이브러리 사용방법 -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="./js/01_jq_selector.js"></script>
</body>jq의 기본 형태
$(function () {
// 여기에 코딩을 하면 된다.
$("#title").css("color", "skyblue");
});
()의 괄호안에 function 을 만들어주고 이것의 중괄호 안에 코딩을 해주는 것이다. $("css선택자").함수("속성:, "값");을 해주면된다. ("css선택자")이것이 바닐라의 document.querySelextor과 같은 기능을 하는 것이다. 위 코드에서는 css라는 함수를 사용했고 css의 디자인 속성을 변경해주는 함수이다.
doc으로 태그에 접근을 하지 않아도 되어 코드가 짧아진다는 장점이 있다.
결과
함수 체이닝
같은 선택자에게 여러 함수를 적용할때 굳이 여러번 선택자를 적어줄 필요없이 다음 코드와같이 함수만 계속해서 적어주면된다.
$(function () {
$("#tit").css("background-color", "#ff0")
.css("border", "1px solid black");
});결과
두개의 함수가 잘 적용된 것을 확인 할 수 있다.
참고로 css처럼 여러개의 선택자도 선택이 가능하다
$(function () {
$("h1, #tit3").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
})방법도 똑같다. 이외에도 자식선택자 선택하기 등 css와 선택자 선택 방법이 같다.
자식선택자 모두 선택하기
자식선택자를 모두 선택하는 속성이 바닐라에도 있듯이 jq에도 있다. 하지만 jq는 모두 함수로 하기때문에 이 또한 함수이다.
사용방법은 다음과 같다.
$(function () {
$("#wrap > sectoin").children()
.css("background-color" , "yellow")
.css("border" , "2px solid #f00");
});이렇게 하면 section태그의 모든 자식태그가 위의 속성이 적용된다.
새 창으로 링크 열기
틈새 새로운 속성 새창에서 링크를 여는 속성
<a href="http://www.naver.com" target="_blank">네이버</a>target 속성없이 그냥 a태그만 사용하면 그창에서 바로 링크로 이동하지만, 새창에서 링크를 연결하고 싶다면 target의 blank를 만들어주면된다.
속성 선택자
css에서도 배웠듯이 해당 속성을 지정할 수 있다.
방법도 똑같다.
$(function name(params) {
$("#wrap a[target]").css("color", "red");
});"태그[속성]"으로 지정을 해주면 된다.
입력양식의 value값 가져오기 with.val()
입력양식에 있는 value값을 출력할 일이 생기는데 어떻게 하는지 알아보자
html코드
<form >
<p>
<label for="user-name"></label>
<input type="text" id="user-name" value="용대리">
</p>
</form>js코드
$(function () {
let result = $("#user-name").val();
alert(result);
});val을 사용하면 지정한 함수의 value의 값을 불러올 수 있다. 이걸 불러와서 alert로 출력하였다.
결과
수정도 가능하다
$(function () {
let result = $("#user-name").val("javascript");
alert(result);
});val()의 괄호안에 수정할 문구를 넣어주기만 하면된다.
결과
용대리가 javascript로 바뀐것을 확인 할 수 있다.
이벤트
jquery에서 이벤트가 발생했을때 디자인을 바꾸는 방법을 알아보자
click이벤트
바닐라에서는 onclick같은 html태그를 먼저 지정해줘야하고 거기에 함수를 넣어주어 이벤트를 만들어 주었지만, 여기서는 바로 함수를 이용하여 만들 수있다.
html코드
<body>
<p>안녕하세요</p>
<p>반갑습니다.</p>
<button>글자색변경</button>
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="./js/03_jq_click.js"></script>
</body>js코드
$(function () {
$("button").click(function () {
$("p").css("color", "red") ;
});
});버튼에 click()이라는 함수를 넣어주어 클릭이 발생할경우 일어나는 코드를 넣어주면된다. 이때 이벤트함수에도 function을 넣어주어야한다.
또 다른 특이점은 바닐라는 여러개의 p태그를 선택하기위해 반복문을 사용해야했지만 jquery는 일괄적으로 자동으로 선택을 해주어 쉽다.
결과
버튼을 누르니 모든 문구가 빨간색으로 변하는 것을 볼 수 있다.
마우스가 위에 있을 때 / 없을 때
여기서는 hover이라는 함수를 사용하는데 특이점은 function을 2개를 사용하는 것이다. 하나는 마우스가 있을 때이고, 하나는 마우스가 없을 때이다. 코드 내용은 다음과 같다.
$(function () {
$("h1").hover(function () {
$("h1").css("background-color" , "red");
}, function () {
$("h1").css("background-color" , "");
})
})위와같이 function을 두개 넣어주고 각각 마우스가 있을 때, 없을 때의 코드를 넣어주기만 하면된다.
html태그 넣기
jquery에서 html의 내용도 수정이나 내용 추가가 가능하다 이때 필요한 함수가 html()이라는 함수이다.
html코드
<div id="box">
<h3>내용 가져오기</h3>
<p>html 태그도 가져옴</p>
<button id="btn">html 가져오기</button>
</div>js코드
$(function () {
$("#btn").click(function () {
$("h3").html("내용 수정했음");
});
});
버튼을 누르면 h3의 내용이 내용 수정했음으로 바뀌는 것으로 만들어주었다.
결과
내용 가져오기에서 내용 수정했음으로 바뀐 것을 볼 수 있다.
클래스 추가 삭제하기
전에 바닐라에서도 했던것인데 css를 미리 정해두고 그css를 적용해주고 싶은 태그에 css속성이 있는 클래스를 부여하여 디자인을 추가해주는 방법이다.
html코드
div class="box"></div>css코드
.box {
width: 100px;
height: 100px;
background-color: red;
}
.hover {
background-color: blue;
border-radius: 50px;
}js코드
$(function () {
$(".box").hover(function () {
$(".box").addClass("hover");
},
function () {
$(".box").removeClass("hover");
});
})box클래스만 있는 태그에 마우스가 올라가면 hover클래스를 추가하고, 마우스를 제거하면 hover클래스도 제거하는 코드를 주었다.
.addClass와 .removeClass로 줄 수 있다.
애니메이션 기능
$(function () {
$("button").click(function () {
$(".page").fadeToggle("slow");
})
});버튼을 누르면 사라지고 생기고 하는 기능을 만들었다.
여기서 사용한 함수는 fadeToggle()인데 toggle은 있으면 없애고 없으면 있게하고 하는 기능이고 fade는 사라지게 하는 기능이다. 괄호안에는 사라지는 속도를 단어로 표현해 넣을 수 있다.
표시 숨김
바닐라에선 none, block으로 하던 기능이다. jquery에서는 show, hide함수를 다음과 같이 사용하면 된다.
$(function () {
$("#showBtn").click(function () {
$("#text").show();
})
$("#hideBtn").click(function () {
$("#text").hide();
})
});숨김버튼을 누르면 텍스트가 사라지고, 표시 버튼을 누르면 덱스트가 생기는 간단한 기능이다.
부모태그밑의 특정 태그만 디자인하기
그냥 자식 선택 방법으로도 자식을 선택할 수도 있지만 find함수를 이용해서도 자식을 선택할 수 있다.
html코드
<p class="target">
<span class="lo">Lorem</span>
<span class="ip">Ipsum</span>
<span class="do">Dolor</span>
</p>js코드
$(function () {
$(".target") .find(".lo")
.css("background-color" , "skyblue");
});find함수에 target클래스의 자식 태그를 입력하여 그 태그만 선택이 가능하다.
느낀점
jquery도 필요한 함수들을 팔요할때마다 검색해서 사용하면 될거 같다. jquery는 태그 속성을 걸거나 그러지 않아도 되는 편리함이 있는데 바닐라보다 성능이 좋지 않다는 단점이 있어서 바닐라를 중점으로 공부하면 좋겠다는 생각이 들었다. 그래도 아직 jquery를 쓰는 사람이 많기 때문에 알아둘 필요는 있다고 생각한다.
